zoukankan      html  css  js  c++  java
  • slice方法可以将“类似数组的对象”变成真正的数组 (遇到时候再研究一次)

    典型的“类似数组的对象”是函数的arguments对象,以及大多数 DOM 元素集,还有字符串。

    // arguments对象
    function args() { return arguments }
    var arrayLike = args('a', 'b');
    
    arrayLike[0] // 'a'
    arrayLike.length // 2
    arrayLike instanceof Array // false
    
    // DOM元素集
    var elts = document.getElementsByTagName('h3');
    elts.length // 3
    elts instanceof Array // false
    
    // 字符串
    'abc'[1] // 'b'
    'abc'.length // 3
    'abc' instanceof Array // false

    上面代码包含三个例子,它们都不是数组(instanceof运算符返回false),但是看上去都非常像数组。

    数组的slice方法可以将“类似数组的对象”变成真正的数组。

    var arr = Array.prototype.slice.call(arrayLike);

    除了转为真正的数组,“类似数组的对象”还有一个办法可以使用数组的方法,就是通过call()把数组的方法放到对象上面。

    function print(value, index) {
      console.log(index + ' : ' + value);
    }
    
    Array.prototype.forEach.call(arrayLike, print);

    上面代码中,arrayLike代表一个类似数组的对象,本来是不可以使用数组的forEach()方法的,但是通过call(),可以把forEach()嫁接到arrayLike上面调用。

    下面的例子就是通过这种方法,在arguments对象上面调用forEach方法。

    // forEach 方法
    function logArgs() {
      Array.prototype.forEach.call(arguments, function (elem, i) {
        console.log(i + '. ' + elem);
      });
    }
    
    // 等同于 for 循环
    function logArgs() {
      for (var i = 0; i < arguments.length; i++) {
        console.log(i + '. ' + arguments[i]);
      }
    }

    字符串也是类似数组的对象,所以也可以用Array.prototype.forEach.call遍历。

    Array.prototype.forEach.call('abc', function (chr) {
      console.log(chr);
    });
    // a
    // b
    // c

    注意,这种方法比直接使用数组原生的forEach要慢,所以最好还是先将“类似数组的对象”转为真正的数组,然后再直接调用数组的forEach方法。

    var arr = Array.prototype.slice.call('abc');
    arr.forEach(function (chr) {
      console.log(chr);
    });
    // a
    // b
    // c
  • 相关阅读:
    Angular 双向数据绑定
    Angular 过滤器
    Angular 自定义指令传参
    润滑油 标号
    Oracle concat
    sqlldr load UTF8 error
    linux中shell变量$#,$@,$0,$1,$2的含义解释
    shell 执行结果赋给变量
    linux 如何显示一个文件的某几行(中间几行)
    linux shell date 用当天时间做备份文件名
  • 原文地址:https://www.cnblogs.com/likewpp/p/9605385.html
Copyright © 2011-2022 走看看