一、介紹

Array.from()方法從一個類似陣列或可迭代物件中建立一個新的陣列例項。

const bar = ["a", "b", "c"];
Array.from(bar);
// ["a", "b", "c"]

Array.from('foo');
// ["f", "o", "o"]

語法

Array.from(arrayLike[, mapFunction[, thisArg]])

• arrayLike：必傳引數，想要轉換成陣列的偽陣列物件或可迭代物件。
• mapFunction：可選引數，mapFunction(item，index){...} 是在集合中的每個專案上呼叫的函式。返回的值將插入到新集合中。
• thisArg：可選引數，執行回撥函式 mapFunction 時 this 物件。這個引數很少使用。
• 返回一個新的陣列例項

描述

• 偽陣列物件：擁有一個 length 屬性和若感覺索引屬性的任意物件
• 可迭代物件：可以獲取物件中的元素，如Map和Set等

二、用法

1. 從偽陣列物件中獲取陣列

let arrayLike = {
    0: 'tom', 
    1: '65',
    2: '男',
    3: ['jane','john','Mary'],
    'length': 4
}
let arr = Array.from(arrayLike)
console.log(arr) // ['tom','65','男',['jane','john','Mary']]
 

如果去掉length屬性，輸出的arr為空陣列[]

let arrayLike = {
    'name': 'tom', 
    'age': '65',
    'sex': '男',
    'friends': ['jane','john','Mary'],
    length: 4
}
let arr = Array.from(arrayLike)
console.log(arr) // [ undefined, undefined, undefined, undefined ]

改一下程式碼，前面的索引屬性換成字串的話，會輸出四個undefined的陣列

2. 從字串中獲取陣列

console.log(Array.from('zoro'));	//["z", "o", "r", "o"]

2. 從Set中獲取陣列

let arr = [1,2,3]
let set = new Set(arr)
console.log(Array.from(set)) //[1, 2, 3]

還可以加第二個引數，類似於陣列的map方法，對裡面的每個元素進行處理

let arr = [1,2,3]
let set = new Set(arr)
console.log(Array.from(set, item => item + 1)) //[2, 3, 4]

2. 從Map中獲取陣列

var m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m); // [[1, 2], [2, 4], [4, 8]]

另一種方法，用擴充套件運算子轉為陣列

const myMap = new Map().set(true, 7)
console.log(myMap); //Map(1) {true => 7}
console.log([...myMap]); //[true ,7]