美文网首页
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伪数组转真正数组的方法。该方法还有很多使用场景,需要大家自己去探索。

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

相关文章

  • 数组操作

    array.join array.slice ES5 伪数组转真数组 ES6 array.sort forEach...

  • slice方法

    slice方法 实现伪数组转数组:[].slice.call(伪数组)

  • es6实现伪数组转数组

    伪数组:拥有length属性,其它属性(索引)为非负整数(对象中的索引会被当做字符串来处理,这里你可以当做是个非负...

  • 伪数组

    1、伪数组特点 2、常见伪数组 3、伪数组与数组的区别 4、伪数组转成真数组

  • JavaScript 数组与伪数组简介

    JavaScript-数组与伪数组简介 本文章面向小白 数组与伪数组的概念 数组与伪数组从何而来在JavaScri...

  • 数组的扩展-ES6初学习

    数组的扩展 Array.from() 把一些不是数组的数据转为数组,比如字符串,集合,之类的一些不是数组的伪数组转...

  • AutoHotKey伪数组、数组与关联数组

    来吧!然我们一起领略一下数组的神奇。常见的数组有三种,伪数组、数组、关联数组。 伪数组 伪数组应该是AutoHot...

  • javascript 数组以及对象的深拷贝

    ES6扩展运算符实现数组的深拷贝 concat 方法实现数组的深拷贝 它是用于连接多个数组组成一个新的数组的方法。...

  • js数组扁平化和数组去重处理(对比)

    数组扁平化(多维数组)(es6) 数组去重 (es6) 数组去重(es5)

  • 2019前端经典面试题

    1.简述对标签语义化的理解。 2. css实现垂直水平居中 3. js中哪些是伪数组?如何将伪数组转化为标准数组?...

网友评论

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

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