理解JavaScript里的 [].forEach.call() 写法
2024-09-05 10:03:23
原文: http://www.webhek.com/javascript-foreach-call
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。
最新文章
- 如何在vim里删除空行?
- html标签属性(attribute)和dom元素的属性(property)
- Popline:帅气的浮动 HTML5 文本编辑器工具栏
- ibatis动态多条件查询及模糊查询(oracle,mysql,sql)
- 清理一下电脑垃圾,打开Eclipse发现左边的全部项目消失了
- 常见的appbug(转)
- 原创:ASP.Net状态管理读书笔记--思维导图
- ES6 — 数组Array
- Java动手实验及课后程序
- cocos2dx中加载图片资源的方法,和从内存中获取已经加载的图片资源的方法
- ps,Photoshop
- GUI编程笔记(java)03:GUI的组件继承图
- Unsupported Media Type 415问题解决办法(Ajax)
- 基于jQuery带标题的图片3D切换焦点图
- 组合框里添加复选框的方法(使用勾选的假象,用图片代替而已,并非QT原生支持)
- Tomcat7调优及JVM性能优化for Linux环境
- DFB系列 之 Bilp叠加
- UIAlertController基本使用与内存泄露分析!!!
- clumsy模拟客户端网络差的场景的使用
- Java判断字符串是否为数字的自定义方法