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