为什么 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中文网其他相关文章！