ES6的數組方法之Array.from

首先說說什麼是數組：數組在類型劃分上歸爲Object,屬於比較特殊的對象，數組的索引值相似於對象的key值。

數組的幾個注意點：

1.數組的長度是可讀屬性，不可更改，數組的長度根據索引最大值。

2.數組的索引值能夠是字符串等，但這個不影響數組的長度。

3.數組根據下標最大值，會自動補齊對應的其餘索引值，且值爲空。

ES6新增了數組的一系列方法，如Array.of,Array.from,Array.find等等

數組與類數組的最大區別在於數組自身具備迭代器iterator

 

Array.from   方法用於將兩類對象轉爲真正的數組：相似數組的對象（array-like object）和可遍歷（iterable）的對象（包括ES6新增的數據結構Set和 Map）

任何有length屬性的均可以轉換爲數組。

document.querySelectorAll() //返回的是object，可是內有迭代器，可循環

document.getElementsByClassName()//類數組集合，不可循環

function fn(){ let args = arguments //不定參集合，不可循環 }

 

解決方法

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

或者

arr = Array.from(likeArr) //ES6  不改變原來的類數組，返回新的數組

在解決不定參的轉爲數組也能夠用擴展運算符

function foo() {  var args = [...arguments]; } //擴展運算符背後調用的是遍歷器接口（Symbol.iterator），若是一個對象沒有部署這個接口，就沒法轉換

 Array.from還能夠接受第二個參數，做用相似於數組的map方法，用來對每一個元素進行處理，將處理後的值放入返回的數組.

Array.from([1, 2, 3], (x) => x * x) // [1, 4, 9]

利用這一特性，能夠這樣作：

Array.from([1, , 2, , 3], (n) => n || 0) // [1, 0, 2, 0, 3]

或者這樣

function typesOf () {  return Array.from(arguments, value => typeof value) }

Array.from()能夠將各類值轉爲真正的數組，而且還提供map功能。這實際上意味着，只要有一個原始的數據結構，你就能夠先對它的值進行處理，然 後轉成規範的數組結構，進而就能夠使用數量衆多的數組方法

Array.from({ length: 2 }, () => 'jack') // ['jack', 'jack']

對於不支持Array.from的瀏覽器，能夠用Array.prototype.slice方法去彌補

const toArray = (() => 
　　 Array.from ? Array.from : obj => [].slice.call(obj)
 )();