es6实现伪数组转数组

红太狼 2021-08-13 18:47 459阅读 0赞

伪数组：拥有length属性，其它属性（索引）为非负整数(对象中的索引会被当做字符串来处理，这里你可以当做是个非负整数串来理解)，并且不具有数组所具有的方法

我们需要把它转为真正的数组才能使用一些数组的方法。

**Array.from**：该方法用于将两类对象（伪数组）转为真正的数组：类似数组的对象和可遍历对象（包括es6新增的数据结构Set和Map）

下面我们看一个类数组对象，并使用es5的方法和es6的方法将它转为真正的数组：

let arrayLike = {
    
        '0': "a",
    
        '1': "b",
    
        '2': "c",
    
        length: 3
    
      };
    
      // es5写法
    
      var arr1 = [].slice.call(arrayLike);
    
      console.log(arr1); // ['a', 'b', 'c']
    
      // es6写法
    
      let arr2 = Array.from(arrayLike);
    
      console.log(arr2); // ['a', 'b', 'c']

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

就拿dom集合举例，这里我们使用jquery获取p标签

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70][]

这里返回的集合就是类数组，我们可以将它转为真正的数组，以便使用forEach循环

var p = $('p');
    
    console.log(p);
    
    Array.from(p).forEach(element => console.log(element));

结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 1][]

好了，以上就是es6伪数组转真正数组的方法。该方法还有很多使用场景，需要大家自己去探索。

如有问题，请指出，接受批评。

个人微信公众号：

![20200824115048446.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70]: /images/20210813/a3d7b6b2519f4300b514a54e2bcd4b38.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 1]: /images/20210813/594843f532534dc5928da40f8d72f50f.png
[20200824115048446.png]: /images/20210813/172d0e9386a84e508e274ce25ec0428a.png