五個超好用的Array.from()用途（詳解）

任何一種程式語言都具有超越基本用法的功能，它得益於成功的設計和試圖去解決廣泛問題。

JavaScript 中有一個這樣的函數：Array.from：允許在JavaScript 集合(如: 陣列、類別陣列物件、或是字串、map 、set 等可迭代物件)上進行有用的轉換。

【相關課程推薦：JavaScript影片教學】

在本文中，我將描述5個有用且有趣的Array.from() 用例。

1. 介紹

在開始之前，我們先回想一下 Array.from() 的作用。語法:

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

• arrayLike：必傳參數，想要轉換成陣列的偽數組物件或可迭代物件。

• mapFunction：可選參數，mapFunction(item，index){...} 是在集合中的每個項目上呼叫的函數。傳回的值將插入到新集合中。

• thisArg：可選參數，執行回呼函數 mapFunction 時 this 物件。這個參數很少使用。

例如，讓我們將類別數組的每一項乘以2：

const someNumbers = { '0': 10, '1': 15, length: 2 };
Array.from(someNumbers, value => value * 2); // => [20, 30]

2.將類別數組轉換成陣列

Array.from() 第一個用途：將類別陣列物件轉換成陣列。

通常，你會碰到的類別數組物件有：函數中的 arguments 關鍵字，或是一個 DOM 集合。

在下面的範例中，讓我們對函數的參數求和：

function sumArguments() {
    return Array.from(arguments).reduce((sum, num) => sum + num);
}
sumArguments(1, 2, 3); // => 6

Array.from(arguments) 將類別陣列物件arguments 轉換成數組，然後使用數組的reduce 方法求和。

此外，Array.from() 的第一個參數可以是任一個可迭代對象，我們繼續看一些例子:

Array.from('Hey');                   // => ['H', 'e', 'y']
Array.from(new Set(['one', 'two'])); // => ['one', 'two']

const map = new Map();
map.set('one', 1)
map.set('two', 2);
Array.from(map); // => [['one', 1], ['two', 2]]

3.克隆一個陣列

在JavaScript 中有很多複製陣列的方法。正如你所想，Array.from() 可以很容易的實作陣列的淺拷貝。

const numbers = [3, 6, 9];
const numbersCopy = Array.from(numbers);

numbers === numbersCopy; // => false

Array.from(numbers) 建立了對numbers 陣列的淺拷貝，numbers === numbersCopy 的結果是false，表示雖然numbers 和numbersCopy 有著相同的項，但是它們是不同的陣列物件。

是否可以使用 Array.from() 建立陣列的克隆，包括所有嵌套的？挑戰一下！

function recursiveClone(val) {
    return Array.isArray(val) ? Array.from(val, recursiveClone) : val;
}

const numbers = [[0, 1, 2], ['one', 'two', 'three']];
const numbersClone = recursiveClone(numbers);

numbersClone; // => [[0, 1, 2], ['one', 'two', 'three']]
numbers[0] === numbersClone[0] // => false

recursiveClone() 能夠對數組的深拷貝，透過判斷數組的item 是否是數組，如果是數組，就繼續呼叫recursiveClone () 來實現了對數組的深拷貝。

你能寫一個比使用 Array.from() 遞歸拷貝更簡短的陣列深拷貝嗎？如果可以的話，請寫在下面的評論區。

4. 使用值填入數組

如果你需要使用相同的值來初始化數組，那麼Array.from() 會是不錯的選擇。

我們來定義一個函數，建立一個填滿相同預設值的陣列：

const length = 3;
const init   = 0;
const result = Array.from({ length }, () => init);

result; // => [0, 0, 0]

result 是一個新的數組，它的長度為3，陣列的每一項都是0。呼叫 Array.from() 方法，傳入一個類別數組物件 { length } 和 傳回初始化值的 mapFunction 函數。

但是，有一個替代方法 array.fill() 可以實作相同的功能。

const length = 3;
const init   = 0;
const result = Array(length).fill(init);

fillArray2(0, 3); // => [0, 0, 0]

fill() 使用初始值正確填入陣列。

4.1 使用物件填入陣列

當初始化陣列的每個項目都應該是新物件時，Array.from() 是一個更好的解決方案：

const length = 3;
const resultA = Array.from({ length }, () => ({}));
const resultB = Array(length).fill({});

resultA; // => [{}, {}, {}]
resultB; // => [{}, {}, {}]

resultA[0] === resultA[1]; // => false
resultB[0] === resultB[1]; // => true

由Array.from 傳回的resultA 使用不同空物件實例進行初始化。之所以會發生這種情況是因為每次呼叫時，mapFunction，即此處的 () => ({}) 都會傳回一個新的物件。

然後，fill() 方法建立的 resultB 使用相同的空物件實例進行初始化。不會跳過空項。

4.2 使用 array.map 怎麼樣？

是不是可以用 array.map() 方法來實作？讓我們來試試看：

const length = 3;
const init   = 0;
const result = Array(length).map(() => init);

result; // => [undefined, undefined, undefined]

map() 方法似乎不正常，創建出來的陣列不是預期的[0, 0, 0]，而是一個有3個空項的陣列。

這是因為Array(length) 建立了一個有3個空項的陣列(也稱為稀疏數組)，但是map() 方法會跳過空項。

5. 產生數字範圍

你可以使用 Array.from() 生成值范围。例如，下面的 range 函数生成一个数组，从0开始到 end - 1。

function range(end) {
    return Array.from({ length: end }, (_, index) => index);
}
range(4); // => [0, 1, 2, 3]

在 range() 函数中，Array.from() 提供了类似数组的 {length：end} ，以及一个简单地返回当前索引的 map 函数 。这样你就可以生成值范围。

6.数组去重

由于 Array.from() 的入参是可迭代对象，因而我们可以利用其与 Set 结合来实现快速从数组中删除重复项。

function unique(array) {
  return Array.from(new Set(array));
}
unique([1, 1, 2, 3, 3]); // => [1, 2, 3]

首先，new Set(array) 创建了一个包含数组的集合，Set 集合会删除重复项。

因为 Set 集合是可迭代的，所以可以使用 Array.from() 将其转换为一个新的数组。

这样，我们就实现了数组去重。

7.结论

Array.from() 方法接受类数组对象以及可迭代对象，它可以接受一个 map 函数，并且，这个 map 函数不会跳过值为 undefined 的数值项。这些特性给 Array.from() 提供了很多可能。

如上所述，你可以轻松的将类数组对象转换为数组，克隆一个数组，使用初始化填充数组，生成一个范围，实现数组去重。

实际上，Array.from() 是非常好的设计，灵活的配置，允许很多集合转换。

英文原文地址：https://dmitripavlutin.com/javascript-array-from-applications/

本文来自 js教程 栏目，欢迎学习！

以上是五個超好用的Array.from()用途（詳解）的詳細內容。更多資訊請關注PHP中文網其他相關文章！