我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

本文中讲述一个看上去稍稍有些烧脑的js写法:[].forEach.call()。如何理解这个看上去有些奇怪的js写法呢?本文就是个类似孔乙己的茴香豆的hui字,有几种写法的问题。看起来高大上,细分析的话,就会发现这是个很无聊的写法而已。

苏南大叔:JavaScript,如何理解[].forEach.call()代码? - js-foreach-call
JavaScript,如何理解[].forEach.call()代码?(图2-1)

大家好,这里是苏南大叔的平行空间笔记本博客,这里记录苏南大叔的代码所学所想,本文描述一个比较罕见的茴香豆的hui字的写法的故事,代码的一个另类写法而已。测试环境:"谷歌浏览器@111.0.5563.111"。

代码主体

这里先提出代码的例子,大家猜一猜代码的运行效果是什么样的。

var arr = [];
[].forEach.call(["s", "u", "n", "a", "n"], function (item) {
  arr.push(item);
});
console.log(arr);

运行结果是:

seosn.com:这里是【评论】可见内容

苏南大叔:JavaScript,如何理解[].forEach.call()代码? - 运行结果
JavaScript,如何理解[].forEach.call()代码?(图2-2)

.call()

以前苏南大叔有篇文章,是分析.call()的用法的,参考下面的链接:

基本的结论是:A.call()基本上可以理解为A(),但是.call()可以修改this指向。参考代码:

var sunan = {
    c: 3,
    test: function (a, b) {
        return a + b + this.c;
    }
}
console.log(sunan.test(1, 2));                 // 6
console.log(sunan.test.call({ c: 4 }, 1, 2));  // 7

在这个例子里面,通过.call()的第一个参数,成功的修改了this.c属性。输出为:

6
7

.forEach()

对于.forEach(),苏南大叔也有篇文章对其进行过分析。参考文章:

参考代码如下:

const arr2 = ["sunan", "苏南"];
arr2.forEach((val, key, arr) => {
  console.log(val, key, arr);
});

不管是set类型,还是array类型,或者是map类型,都存在着forEach方法,除了key有所不同外,其它的两个参数都一致。本例子的输出为:

sunan  0  (2) ['sunan', '苏南']
苏南   1  (2) ['sunan', '苏南']

[].forEach.call()

再回到文章顶部的代码,这个代码究竟是个什么意思呢?运行结果是什么样的呢?看完代码的运行结果的话,就会发现这个大费周折的代码的运行结果,其实就是做了一个变量的定义而已。

var arr = [];
[].forEach.call(["s", "u", "n", "a", "n"], function (item) {
  arr.push(item);
});
console.log(arr);

上面的这个就相当于:

var arr = ["s", "u", "n", "a", "n"];

相关链接

总结

茴香豆的hui字有几种写法呢?脱去长衫的孔乙己也许更不知道。

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   js