Array.from() 五個超好用的用途

翻譯：劉小夕

原文連接：https://dmitripavlutin.com/ja...

因水平有限，文中部分翻譯可能不夠準確，若是你有更好的想法，歡迎在評論區指出。

更多文章可戳: https://github.com/YvetteLau/...

任何一種編程語言都具備超出基本用法的功能，它得益於成功的設計和試圖去解決普遍問題。

JavaScript 中有一個這樣的函數: Array.from：容許在 JavaScript 集合(如: 數組、類數組對象、或者是字符串、map 、set 等可迭代對象) 上進行有用的轉換。

在本文中，我將描述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() 是很是好的設計，靈活的配置，容許不少集合轉換。

你知道 Array.from() 的其餘有趣用例嗎？能夠寫在評論區。

寫在最後

翻譯完又是凌晨一點，果真，沒有一個成年人的生活是容易的。

謝謝各位小夥伴願意花費寶貴的時間閱讀本文，若是本文給了您一點幫助或者是啓發，請不要吝嗇你的贊和Star，你的確定是我前進的最大動力。https://github.com/YvetteLau/...

推薦關注本人公衆號：