為什麼在 JavaScript 中使用空數組和 `.forEach.call()` ？

理解JavaScript 中[].forEach.call() 的行為

這個非常規的程式碼片段（其中forEach 方法前面有一個空數組）一直讓開發人員感到困惑。讓我們深入研究一下它是如何運作的。

空數組 - 存取數組原型的技巧

空數組有一個特殊的用途：它提供對 .forEach 等數組原型的存取。使用陣列直接為您提供此功能，無需明確編寫 Array.prototype.forEach.call(...);。

forEach - 自訂迭代

forEach 是一個函數，將另一個函數作為輸入。對於類似陣列的物件（例如節點清單）中的每個元素，它傳遞三個參數：

• 元素本身
• 元素的索引
• 對類別數組物件的引用

.call - 修改此上下文

.call 方法可讓您使用特定的this 上下文呼叫函數。在這種情況下，它會用節點列表覆蓋內部函數的 this，確保函數可以透過索引存取元素。

範例

考慮這個：

[1,2,3].forEach.call( document.querySelectorAll('a'), function(el) { /* logic */ });

此程式碼使用空數組存取 .forEach 原型，將節點清單傳遞給 forEach，並迭代每個 。標籤，提供對元素、其索引和整個節點清單的存取。

揭穿函數式程式設計問題

雖然有些人認為與手動循環相比，使用這種技術不太優雅，但它確實有用當您需要在存取元素或索引資訊時多次修改外在世界（例如DOM）時，這是一個目的。

ES6 及其他版本中的現代解決方案

在現代JavaScript 版本中並使用諸如Babel，您可以使用...rest 和spread 運算符來更乾淨地實現類似的功能。但是，使用空數組進行數組原型存取以及使用 .call 修改此上下文的核心原則仍然相關。

以上是為什麼在 JavaScript 中使用空數組和 `.forEach.call()` ？的詳細內容。更多資訊請關注PHP中文網其他相關文章！