• ES6学习--Array.from()方法


    Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。

      那么什么是类数组对象呢?所谓类数组对象,最基本的要求就是具有length属性的对象。

      1、将类数组对象转换为真正数组:

    let arrayLike = {

        0: 'tom'
        1: '65',
        2: '男',
        3: ['jane','john','Mary'],
        'length': 4
    }
    let arr = Array.from(arrayLike)
    console.log(arr) // ['tom','65','男',['jane','john','Mary']]
     

    那么,如果将上面代码中length

    属性去掉呢?实践证明,答案会是一个长度为0的空数组。

      这里将代码再改一下,就是具有length属性,但是对象的属性名不再是数字类型的,而是其他字符串型的,代码如下:

    let arrayLike = {

        'name''tom'
        'age''65',
        'sex''男',
        'friends': ['jane','john','Mary'],
        length: 4
    }
    let arr = Array.from(arrayLike)
    console.log(arr)  // [ undefined, undefined, undefined, undefined ]
     

    会发现结果是长度为4,元素均为undefined的数组

      由此可见,要将一个类数组对象转换为一个真正的数组,必须具备以下条件:

      1、该类数组对象必须具有length属性,用于指定数组的长度。如果没有length属性,那么转换后的数组是一个空数组。

      2、该类数组对象的属性名必须为数值型或字符串型的数字

      ps: 该类数组对象的属性名可以加引号,也可以不加引号

    实际应用中,常见的类似数组的对象是DOM操作返回的NodeList集合,以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组。

    // NodeList对象
    let ps = document.querySelectorAll('p');
    Array.from(ps).forEach(function (p) {
      console.log(p);
    });
    
    // arguments对象
    function foo() {
      var args = Array.from(arguments);
      // ...
    }
    

    上面代码中,querySelectorAll方法返回的是一个类似数组的对象,可以将这个对象转为真正的数组,再使用forEach方法。

    只要是部署了Iterator接口的数据结构,Array.from都能将其转为数组。

    Array.from('hello')
    // ['h', 'e', 'l', 'l', 'o']
    
    let namesSet = new Set(['a', 'b'])
    Array.from(namesSet) // ['a', 'b']
    

    上面代码中,字符串和Set结构都具有Iterator接口,因此可以被Array.from转为真正的数组。

    如果参数是一个真正的数组,Array.from会返回一个一模一样的新数组。

    Array.from([1, 2, 3])
    // [1, 2, 3]
    

    值得提醒的是,扩展运算符(...)也可以将某些数据结构转为数组。

    // arguments对象
    function foo() {
      var args = [...arguments];
    }
    
    // NodeList对象
    [...document.querySelectorAll('div')]
    

    扩展运算符背后调用的是遍历器接口(Symbol.iterator),如果一个对象没有部署这个接口,就无法转换。Array.from方法则是还支持类似数组的对象。所谓类似数组的对象,本质特征只有一点,即必须有length属性。因此,任何有length属性的对象,都可以通过Array.from方法转为数组,而此时扩展运算符就无法转换。

    Array.from({ length: 3 });
    // [ undefined, undefined, undefined ]
    

    上面代码中,Array.from返回了一个具有三个成员的数组,每个位置的值都是undefined。扩展运算符转换不了这个对象。

    对于还没有部署该方法的浏览器,可以用Array.prototype.slice方法替代。

    const toArray = (() =>
      Array.from ? Array.from : obj => [].slice.call(obj)
    )();
    

    Array.from还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。

    Array.from(arrayLike, x => x * x);
    // 等同于
    Array.from(arrayLike).map(x => x * x);
    
    Array.from([1, 2, 3], (x) => x * x)
    // [1, 4, 9]
    

    下面的例子是取出一组DOM节点的文本内容。

    let spans = document.querySelectorAll('span.name');
    
    // map()
    let names1 = Array.prototype.map.call(spans, s => s.textContent);
    
    // Array.from()
    let names2 = Array.from(spans, s => s.textContent)
    

    下面的例子将数组中布尔值为false的成员转为0

    Array.from([1, , 2, , 3], (n) => n || 0)
    // [1, 0, 2, 0, 3]
    

    另一个例子是返回各种数据的类型。

    function typesOf () {
      return Array.from(arguments, value => typeof value)
    }
    typesOf(null, [], NaN)
    // ['object', 'object', 'number']
    

    如果map函数里面用到了this关键字,还可以传入Array.from的第三个参数,用来绑定this

    Array.from()可以将各种值转为真正的数组,并且还提供map功能。这实际上意味着,只要有一个原始的数据结构,你就可以先对它的值进行处理,然后转成规范的数组结构,进而就可以使用数量众多的数组方法。

    Array.from({ length: 2 }, () => 'jack')
    // ['jack', 'jack']
    

    上面代码中,Array.from的第一个参数指定了第二个参数运行的次数。这种特性可以让该方法的用法变得非常灵活。

    Array.from()的另一个应用是,将字符串转为数组,然后返回字符串的长度。因为它能正确处理各种Unicode字符,可以避免JavaScript将大于uFFFF的Unicode字符,算作两个字符的bug。

    function countSymbols(string) {
      return Array.from(string).length;
    }
  • 相关阅读:
    习题2-7
    习题2-6
    习题2-5
    习题2-4
    习题2-3
    作业二 分支循环结构
    2- 8
    实验三-计算圆柱体积
    实验三-计算n个圆柱体体积
    实验3-计算圆面积
  • 原文地址:https://www.cnblogs.com/1571523732-qq/p/10024739.html
Copyright © 2020-2023  润新知