理解JavaScript里的 [].forEach.call() 写法

最新推荐文章于 2025-05-25 23:07:52 发布

weixin_30652879

最新推荐文章于 2025-05-25 23:07:52 发布

阅读量63

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gyc19920704/p/6645895.html

本文介绍如何使用[].forEach.call()方法来遍历document.querySelectorAll()返回的NodeList对象，解释了此方法的工作原理及其背后的原因。

document.querySelectorAll() 返回的并不是我们想当然的数组，而是 NodeList ，对 NodeList ，它里面没有 .forEach 方法，我们使用了这样的方法进行循环：

var divs = document.querySelectorAll('div');

[].forEach.call(divs, function(div) { // do whatever div.style.color = "red"; });

初次看到 [].forEach.call() 这样的代码，我觉得这种写法很有趣，为什么要这样写？为什么要用空数值引申出的方法？于是研究了一下。

[] 就是个数组，而且是用不到的空数组。用来就是为了访问它的数组相关方法，比如 .forEach 。这是一种简写，完整的写法应该是这样：

Array.prototype.forEach.call(...);

很显然，简写更方便。

至于 forEach 方法，它可以接受一个函数参数：

[1,2,3].forEach(function (num) { console.log(num); });

上面的这句代码中，我们可以访问 this 对象，也就是 [1,2,3] ，可以看出，这个 this 是个数组。

最后， .call 是一个prototype，JavaScript函数内置的。 .call 使用它的第一个参数替换掉上面说的这个 this ，也就是你要传人的数组，其它的参数就跟 forEach 方法的参数一样了。

[1, 2, 3].forEach.call(["a", "b", "c"], function (item, i, arr) { console.log(i + ": " + item); }); // 0: "a" // 1: "b" // 2: "c"

因此， [].forEach.call() 是一种快速的方法访问 forEach ，并将空数组的 this 换成想要遍历的list。

转载于:https://www.cnblogs.com/gyc19920704/p/6645895.html