美文网首页
es6实现伪数组转数组

es6实现伪数组转数组

作者: 坏丶毛病 | 来源:发表于2020-10-28 09:56 被阅读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标签

    image

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

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

    结果:

    image

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

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

    相关文章

      网友评论

          本文标题:es6实现伪数组转数组

          本文链接:https://www.haomeiwen.com/subject/ybrqvktx.html