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


    原文:  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。

  • 相关阅读:
    activiti流程跟踪图简单详解
    maven夹包引入的速度问题
    maven的pom.xml文件配置详解
    maven的简单使用
    Spring mail 邮件服务及其参数配置
    json格式的简单转换
    ajax的简单理解
    广告关闭按钮
    跨数据库调用
    如何完成DEDE CMS外部数据库调用|不同数据库调用数据
  • 原文地址:https://www.cnblogs.com/gyc19920704/p/6645895.html
Copyright © 2020-2023  润新知