作用

將 類似陣列物件 和 可遍歷物件 轉換為真正的陣列。

1.類似陣列物件

1.1 有length屬性的物件

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

Array.from(arrayLike); //['a', 'b', 'c']
複製程式碼

ES5也是存在可以將上面的類似陣列物件轉為真正的陣列物件

[].slice.call(arrayLike)
複製程式碼

1.2 DOM操作返回的NodeList集合

let ps = document.querySelectorAll('p');
Array.from(ps).foreach(function(p){
    console.log(p);
});
複製程式碼

擴充套件運算子（...）也可以轉換

[...document.querySelectorAll('div')]
複製程式碼

1.3 函式內部的arguments物件

function foo() {
    var args = Array.from(arguments);
}
複製程式碼

同樣擴充套件運算子(...)也可以實現

function foo(){
    var args = [...arguments];
}
複製程式碼

總結

擴充套件運算子(...)不可以將有length屬性的物件轉換為陣列。(...)可以將NodeList集合和arguments物件轉換為陣列。

2.可遍歷物件

部署了Iterator介面的資料結構，包括新增的資料結構Set和Map。

2.1 字串

Array.from('hello');
//['h','e','l','l','o']
複製程式碼

2.2 Set

let nameSet = new Set(['a', 'b']);
Array.from(nameSet);//['a', 'b']
複製程式碼

第二個引數

作用類似於陣列的map方法，用來對每個元素進行處理，將處理後的值放入返回的陣列。

Array.from(arrayLike, x => x * x);

Array.from(arrayLike).map(x => x * x);
複製程式碼