博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
理解JavaScript里的 [].forEach.call() 写法
阅读量:4635 次
发布时间:2019-06-09

本文共 916 字,大约阅读时间需要 3 分钟。

原文:  

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

你可能感兴趣的文章
Apache - Storm
查看>>
tkinter中scale拖拉改变值控件(十一)
查看>>
NB-IOT连接移动onenet平台流程
查看>>
无敌简单快速的文件服务器sgfs
查看>>
Chapter 5 Blood Type——33
查看>>
从github clone文件: Failed to receive SOCKS4 connect request ack.
查看>>
英语学习Day1
查看>>
JavaScript
查看>>
Overload重載和Override重写的区别。Overloaded的方法是否可以改变返回值的类型?
查看>>
响应式面包屑菜单
查看>>
python实例31[文件夹清理]
查看>>
删除节点removeChild()
查看>>
Gearman 启动日志文件提示协议出错的BUG
查看>>
js中的this
查看>>
[转]深入理解linux内核list_head
查看>>
百度富文本编辑器的应用技巧---在一个页面中使用多个样式不同功能不同的编辑器...
查看>>
windows mysqldump 不成功 1049 1064 报错
查看>>
js call(),apply(),对象冒充,改变变量作用域
查看>>
查看符号表
查看>>
web安全测试-AppScan使用分享
查看>>