JavaScript中的[].forEach.call()是什么意思？

Question

JavaScript中的[].forEach.call()是什么意思？

javascriptarraysforeachecmascript-5nodelist

162

我正在查看一些代码片段，发现有多个元素通过应用于一个空数组的forEach来调用一个函数来遍历节点列表。

例如，我有如下代码：

[].forEach.call( document.querySelectorAll('a'), function(el) {
   // whatever with the current node
});

但我不理解它是如何工作的。有人能解释一下在forEach前面的空数组的行为以及call是如何工作的吗？

- Mimo

14个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mikel · Answer 1

Norguard 解释了什么是 [].forEach.call()，而 James Allardice 解释了 为什么 我们要这样做：因为 querySelectorAll 返回的是一个没有 forEach 方法的 NodeList...

除非你使用的是 Chrome 51+、Firefox 50+、Opera 38 或 Safari 10 等现代浏览器。

如果不是，你可以添加一个 Polyfill：

if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = function (callback, thisArg) {
        thisArg = thisArg || window;
        for (var i = 0; i < this.length; i++) {
            callback.call(thisArg, this[i], i, this);
        }
    };
}

- Xotic750 · Answer 2

[] 总是返回一个新的数组，它等同于 new Array() 但是保证返回一个数组，因为 Array 可能被用户重写，而 [] 不会。所以这是一种安全的方式来获取 Array 的原型，然后按照描述，使用 call 在类似数组的节点列表（this）上执行函数。

使用给定的 this 值和单独提供的参数调用一个函数。mdn

- ThePaulin · Answer 3

假设你有这样一个代码：const myList= document.querySelectorAll("p"); 这将返回HTML中所有

的列表/数组。现在Array.prototype.forEach.call(myList, myCallback)等同于[].forEach.call(myList, myCallback)，其中'myCallback'是回调函数。基本上，你正在对myList的每个元素运行回调函数。希望这可以帮助你！

- Marcelo Perim · Answer 4

我不知道是否有任何限制，但它可以工作。我使用 展开运算符 将 nodeList 转换为一个 迭代器对象，并进行了映射：

let _btns = document.querySelectorAll('.btn');

[..._btns].map(function(elem, i) {
  elem.addEventListener('click', function (e) {
    console.log(elem.textContent);
  })
})

.btn {
  padding: 5px; 
  color:#fff; 
  background-color: darkred; 
  text-align:center;
  color: white;
}

<button class="btn">button 1</button>
<button class="btn">button 2</button>