Question

有效的[].forEach.call函数参数是什么？在下面的代码中，el似乎是Nodelist或节点列表的元素？

[].forEach.call(
    document.getElementById('menu').querySelectorAll('.custom-can-transform'),
       function(el){
           el.classList.toggle('pure-menu-horizontal');
       }
    );
)

Answer 1

许多Array方法都是通用的。这意味着它们的内部实现不依赖this为Array实例。基本上，此类实现仅要求此对象具有数字索引和length属性。这些对象称为“类似于数组的对象”。

有许多符合此要求的对象。例如，您将NodeList视为document.getElementById('menu').querySelectorAll。这是类似于数组的对象，因为您可以通过索引访问单个节点，并且此类节点列表具有length属性。

任何字符串也都是类似数组的对象。例如，字符串“hello world”。您可以将字符“w”作为str[t]来访问。 str.length等于11。

数字索引和length属性的要求允许方法实现迭代遍历集合的所有单个元素，而不需要知道这个集合实际上是什么。

它还可以在不同的对象上使用泛型方法：

const obj = {0: 'one', 1: 'two', length: 2};

Array.prototype.forEach.call(obj, (el, index) => {
  console.log(`${index}: ${el}`)
})

或者，这种“借用”其他原型方法最常见的用法是在非数组上使用数组方法，通常是DOM元素：

const items = document.querySelector('ul > li')

const ids = [].map.call(items, li => li.id)

我应该注意，ES2015规范中的spread operator不太需要这种借用方法。

Answer 2

Function.prototype.call用其第一个参数替换函数的this变量，然后调用该函数，并将所有剩余参数赋予.call()。

这意味着上面的代码评估为：

document.getElementById('menu').querySelectorAll('.custom-can-transform').forEach(function(el){
  el.classList.toggle('pure-menu-horizontal');
});

请注意，不使用this方法的forEach .call()变量为[]，因为它是forEach调用的前缀。

关于数组forEach的参数是什么？

它只接受2个参数。第一个参数是为数组的每个元素调用的函数callback。第二个（可选）参数用于将this变量注入回调方法的函数体。 source

什么是有效的[] .forEach.call函数参数？

2 个答案: