您好,登錄后才能下訂單哦!
任何一種編程語言都具有超出基本用法的功能,它得益于成功的設(shè)計和試圖去解決廣泛問題。
JavaScript 中有一個這樣的函數(shù):Array.from
:允許在 JavaScript 集合(如: 數(shù)組、類數(shù)組對象、或者是字符串、map 、set 等可迭代對象) 上進行有用的轉(zhuǎn)換。
在本文中,我將描述5個有用且有趣的 Array.from()
用例。
1. 介紹
在開始之前,我們先回想一下 Array.from() 的作用。語法:
Array.from(arrayLike[, mapFunction[, thisArg]])
arrayLike:必傳參數(shù),想要轉(zhuǎn)換成數(shù)組的偽數(shù)組對象或可迭代對象。
mapFunction:可選參數(shù),mapFunction(item,index){...} 是在集合中的每個項目上調(diào)用的函數(shù)。返回的值將插入到新集合中。
thisArg:可選參數(shù),執(zhí)行回調(diào)函數(shù) mapFunction 時 this 對象。這個參數(shù)很少使用。
例如,讓我們將類數(shù)組的每一項乘以2:
const someNumbers = { '0': 10, '1': 15, length: 2 }; Array.from(someNumbers, value => value * 2); // => [20, 30]
2.將類數(shù)組轉(zhuǎn)換成數(shù)組
Array.from()
第一個用途:將類數(shù)組對象轉(zhuǎn)換成數(shù)組。
通常,你會碰到的類數(shù)組對象有:函數(shù)中的 arguments
關(guān)鍵字,或者是一個 DOM
集合。
在下面的示例中,讓我們對函數(shù)的參數(shù)求和:
function sumArguments() { return Array.from(arguments).reduce((sum, num) => sum + num); } sumArguments(1, 2, 3); // => 6
Array.from(arguments)
將類數(shù)組對象 arguments
轉(zhuǎn)換成一個數(shù)組,然后使用數(shù)組的 reduce
方法求和。
此外,Array.from()
的第一個參數(shù)可以是任意一個可迭代對象,我們繼續(xù)看一些例子:
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.克隆一個數(shù)組
在 JavaScript 中有很多克隆數(shù)組的方法。正如你所想,Array.from() 可以很容易的實現(xiàn)數(shù)組的淺拷貝。
const numbers = [3, 6, 9]; const numbersCopy = Array.from(numbers); numbers === numbersCopy; // => false
Array.from(numbers)
創(chuàng)建了對 numbers
數(shù)組的淺拷貝,numbers === numbersCopy
的結(jié)果是 false
,意味著雖然 numbers
和 numbersCopy
有著相同的項,但是它們是不同的數(shù)組對象。
是否可以使用 Array.from()
創(chuàng)建數(shù)組的克隆,包括所有嵌套的?挑戰(zhàn)一下!
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()
能夠?qū)?shù)組的深拷貝,通過判斷 數(shù)組的 item
是否是一個數(shù)組,如果是數(shù)組,就繼續(xù)調(diào)用 recursiveClone()
來實現(xiàn)了對數(shù)組的深拷貝。
你能編寫一個比使用 Array.from()
遞歸拷貝更簡短的數(shù)組深拷貝嗎?如果可以的話,請寫在下面的評論區(qū)。
4. 使用值填充數(shù)組
如果你需要使用相同的值來初始化數(shù)組,那么 Array.from()
將是不錯的選擇。
我們來定義一個函數(shù),創(chuàng)建一個填充相同默認值的數(shù)組:
const length = 3; const init = 0; const result = Array.from({ length }, () => init); result; // => [0, 0, 0]
result
是一個新的數(shù)組,它的長度為3,數(shù)組的每一項都是0。調(diào)用 Array.from()
方法,傳入一個類數(shù)組對象 { length }
和 返回初始化值的 mapFunction
函數(shù)。
但是,有一個替代方法 array.fill()
可以實現(xiàn)同樣的功能。
const length = 3; const init = 0; const result = Array(length).fill(init); fillArray2(0, 3); // => [0, 0, 0]
fill()
使用初始值正確填充數(shù)組。
4.1 使用對象填充數(shù)組
當(dāng)初始化數(shù)組的每個項都應(yīng)該是一個新對象時,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
使用不同空對象實例進行初始化。之所以發(fā)生這種情況是因為每次調(diào)用時,mapFunction
,即此處的 () => ({})
都會返回一個新的對象。
然后,fill()
方法創(chuàng)建的 resultB
使用相同的空對象實例進行初始化。不會跳過空項。
4.2 使用 array.map
怎么樣?
是不是可以使用 array.map()
方法來實現(xiàn)?我們來試一下:
const length = 3; const init = 0; const result = Array(length).map(() => init); result; // => [undefined, undefined, undefined]
map()
方法似乎不正常,創(chuàng)建出來的數(shù)組不是預(yù)期的 [0, 0, 0]
,而是一個有3個空項的數(shù)組。
這是因為 Array(length)
創(chuàng)建了一個有3個空項的數(shù)組(也稱為稀疏數(shù)組),但是 map()
方法會跳過空項。
5. 生成數(shù)字范圍
你可以使用 Array.from()
生成值范圍。例如,下面的 range
函數(shù)生成一個數(shù)組,從0開始到 end - 1
。
function range(end) { return Array.from({ length: end }, (_, index) => index); } range(4); // => [0, 1, 2, 3]
在 range()
函數(shù)中,Array.from()
提供了類似數(shù)組的 {length:end}
,以及一個簡單地返回當(dāng)前索引的 map
函數(shù) 。這樣你就可以生成值范圍。
6.數(shù)組去重
由于 Array.from()
的入?yún)⑹强傻鷮ο?,因而我們可以利用其與 Set
結(jié)合來實現(xiàn)快速從數(shù)組中刪除重復(fù)項。
function unique(array) { return Array.from(new Set(array)); } unique([1, 1, 2, 3, 3]); // => [1, 2, 3]
首先,new Set(array)
創(chuàng)建了一個包含數(shù)組的集合,Set
集合會刪除重復(fù)項。
因為 Set
集合是可迭代的,所以可以使用 Array.from()
將其轉(zhuǎn)換為一個新的數(shù)組。
這樣,我們就實現(xiàn)了數(shù)組去重。
7.結(jié)論
Array.from()
方法接受類數(shù)組對象以及可迭代對象,它可以接受一個 map
函數(shù),并且,這個 map
函數(shù)不會跳過值為 undefined
的數(shù)值項。這些特性給 Array.from()
提供了很多可能。
如上所述,你可以輕松的將類數(shù)組對象轉(zhuǎn)換為數(shù)組,克隆一個數(shù)組,使用初始化填充數(shù)組,生成一個范圍,實現(xiàn)數(shù)組去重。
實際上,Array.from()
是非常好的設(shè)計,靈活的配置,允許很多集合轉(zhuǎn)換。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。