為什麼 JavaScript 的 [].forEach.call() 函數中有一個空數組？

理解 JavaScript 中的 [].forEach.call() 函數

你對 [].forEach 的用法感到好奇嗎？ JavaScript 中的 call() ？讓我們深入研究一下它的用途和功能。

在 JavaScript 中，陣列擁有一個名為 forEach 的強大方法，它允許您對陣列的每個元素執行操作。但是，在某些情況下，您可能會遇到在將 forEach 應用於節點清單之前使用空數組的程式碼。

分解程式碼

考慮以下內容程式碼片段：

[].forEach.call(document.querySelectorAll('a'), function(el) {
  // Perform some operation on the current node
});

這裡發生了什麼事？讓我們分解一下：

• []：這是一個空數組。它在程式碼中沒有實際用途。它的存在只是為了提供對 forEach 方法的訪問，該方法是數組的原型。
• forEach：forEach 方法迭代數組（或類似數組的物件）中的每個元素並使用三個參數呼叫指定的函數：元素、其索引和數組本身。
• .call：.call 方法用於呼叫具有指定值的函數它的「this」關鍵字。在本例中，它將 forEach 方法的「this」值從空數組變更為 標籤清單。這允許函數透過索引存取每個 元素。

範例用法

讓我們看一個範例以更好地理解此程式碼的工作原理：

const myNodeList = document.querySelectorAll('a');
[].forEach.call(myNodeList, function(el) {
  el.style.color = 'blue';
});

在此程式碼中：

• 我們取得頁面上所有 標籤的節點清單。
• [].forEach.call () 方法將「this」值變更為 myNodeList，並在 元素上呼叫 forEach 方法。
• 在回調函數中，我們可以使用 el 存取每個 元素並修改其樣式 (在本例中，將其顏色變更為藍色）。

ES6 的替代語法

在ES6 (ECMAScript 2015) 及更高版本中，更現代、更簡潔的語法存在用於實現相同結果的語法：

[...document.querySelectorAll('a')].forEach(el => {
  el.style.color = 'blue';
});

在這個更新的語法中，我們使用展開運算子(...) 將節點列表轉換為數組，然後可以使用forEach 對其進行迭代。

結論

[].forEach.call() 技術提供了一種簡潔有效的方法將forEach 方法應用於類似數組的對象（例如節點列表） 。透過利用這種技術，您可以輕鬆地對清單中的每個元素執行操作。但請記住，在現代 JavaScript 中，擴充運算子等替代語法可能會提供更優雅的解決方案。

以上是為什麼 JavaScript 的 [].forEach.call() 函數中有一個空數組？的詳細內容。更多資訊請關注PHP中文網其他相關文章！