Array.from的作用

Array.from 方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

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

扩展运算符(...)也可以将某些数据结构转为数组。

// arguments对象
function foo() {
  var args = [...arguments];
}

// NodeList对象
[...document.querySelectorAll('div')]

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 三,字符串扩展 3.1 Unicode表示法 ES6 做出了改进,只要将码点放入大括号,就能正确解读该字符。有了这...
    eastbaby阅读 1,584评论 0 8
  • 数组的扩展--转自:阮一峰《ECMAScript 6 入门》 Array.from( Array.from方法用于...
    呼呼哥阅读 617评论 0 0
  • 很多事就是那样,若是不好好想,若是不深入地想,若是不长期地想。要不了多久我们就可以忘记自己当初为什么要做这件事。 ...
    我是刘良阅读 499评论 0 0
  • 【知-学习】 1.朗读5分钟。 2.《六项精进》大纲诵读0遍。 【经典名句分享】 深到骨子里的成熟,就是不要轻易指...
    玉_莲子阅读 230评论 0 0
  • 黑夜 茫茫夜空里,听见心跳的声音,虽然相隔万里,渴望梦想成真,却找着彼此的轨迹…… 当黑夜来临时,我们怀着同样的不...
    桔子210阅读 584评论 0 2