Array.from的妙用

es6新特性中Array类多了一个静态方法from，这个方法做用是将一个ArrayLike对象或者Iterable对象转换成一个Array，本文只讨论ArrayLike对象相关内容。

所谓ArrayLike对象指具备数组某些行为的对象，表现出来的特征就是具备length属性。

var obj = {
    "0" : 1,
    length: 1
};

这一类对象不能调用数组所具备的方法(push/forEach/map之类)，最多见的有两种：DOM中的NodeList和函数中的arguments。

在日常开发中，咱们常常遇到须要将这两种对象转化为真正数组的场景，通常咱们是这么写：

var args = [].slice.call(arguments);
var imgs = [].slice.call(document.querySelectorAll('img'));

如今咱们有了Array.from，能够这样写。

var args = Array.from(arguments);
var imgs = Array.from(document.querySelectorAll('img'));

不考虑兼容性的话，咱们就能够直接用Array.from了。前面说了Array.from的一些内容，既然标题说了妙用,天然还要来点新的东西。

有时咱们会遇到这样的场景，须要建立一个包含从0到99(n)的连续整数的数组。之前咱们会这样写

var arr = [];
for(var i = 0; i <= 99; i++) {
    arr.push(i);
}

这种方法最直观了，性能也很好。只是不喜欢写for循环的同窗可能不会这样写，因此有人搞出了下面这种写法

var arr = Array(100).join(' ').split('').map(function(item,index){return index});

这种方法中Array(100)建立了一个包含100个空位的数组。

可是这样的数组是无法迭代的(参考forEach方法的定义)，

因此要经过字符串转换，覆盖undefined，最后调用map修改元素值。

有了es6,用Array.from的写法是这样的

var arr = Array.from({length:100}).map(function(item,index){return index});

这种方法中Array.from({length:100})也是建立了一个包含100个undefined的数组，

可是这个数组能够迭代([].slice.call({length:100})建立的不可迭代)，能够直接调用map方法。

上面的代码其实包含了一个重要的信息，Array.from建立的数组是能够迭代的(参考Array.from方法的定义)，

即便元素值都是undefined。因此Array.from还能够用来实现次数肯定的循环遍历。例如在写React组件时，有时要map迭代肯定次数，生成html。

Array.from好用归好用，不过在性能上却有些尴尬。上面三种方法第一种性能最好，第二种次之，第三种最差。具体数据能够看这里constarray