任何一種編程語(yǔ)言都具有超出基本用法的功能，它得益于成功的設(shè)計(jì)和試圖去解決廣泛?jiǎn)栴}。

科爾沁右翼前網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站設(shè)計(jì)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營(yíng)維護(hù)。成都創(chuàng)新互聯(lián)公司2013年開創(chuàng)至今到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。

JavaScript 中有一個(gè)這樣的函數(shù)：Array.from：允許在 JavaScript 集合(如: 數(shù)組、類數(shù)組對(duì)象、或者是字符串、map 、set 等可迭代對(duì)象) 上進(jìn)行有用的轉(zhuǎn)換。

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

1. 介紹

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

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

• arrayLike：必傳參數(shù)，想要轉(zhuǎn)換成數(shù)組的偽數(shù)組對(duì)象或可迭代對(duì)象。

• mapFunction：可選參數(shù)，mapFunction(item，index){...} 是在集合中的每個(gè)項(xiàng)目上調(diào)用的函數(shù)。返回的值將插入到新集合中。

• thisArg：可選參數(shù)，執(zhí)行回調(diào)函數(shù) mapFunction 時(shí) this 對(duì)象。這個(gè)參數(shù)很少使用。

例如，讓我們將類數(shù)組的每一項(xiàng)乘以2：

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

2.將類數(shù)組轉(zhuǎn)換成數(shù)組

Array.from()第一個(gè)用途：將類數(shù)組對(duì)象轉(zhuǎn)換成數(shù)組。

通常，你會(huì)碰到的類數(shù)組對(duì)象有：函數(shù)中的arguments關(guān)鍵字，或者是一個(gè)DOM集合。

在下面的示例中，讓我們對(duì)函數(shù)的參數(shù)求和：

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

Array.from(arguments)將類數(shù)組對(duì)象arguments轉(zhuǎn)換成一個(gè)數(shù)組，然后使用數(shù)組的reduce方法求和。

此外，Array.from()的第一個(gè)參數(shù)可以是任意一個(gè)可迭代對(duì)象，我們繼續(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.克隆一個(gè)數(shù)組

在 JavaScript 中有很多克隆數(shù)組的方法。正如你所想，Array.from() 可以很容易的實(shí)現(xiàn)數(shù)組的淺拷貝。

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

numbers === numbersCopy; // => false

Array.from(numbers)創(chuàng)建了對(duì)numbers數(shù)組的淺拷貝，numbers === numbersCopy的結(jié)果是false，意味著雖然numbers和numbersCopy有著相同的項(xiàng)，但是它們是不同的數(shù)組對(duì)象。

是否可以使用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ù)組的深拷貝，通過(guò)判斷 數(shù)組的item是否是一個(gè)數(shù)組，如果是數(shù)組，就繼續(xù)調(diào)用recursiveClone()來(lái)實(shí)現(xiàn)了對(duì)數(shù)組的深拷貝。

你能編寫一個(gè)比使用Array.from()遞歸拷貝更簡(jiǎn)短的數(shù)組深拷貝嗎？如果可以的話，請(qǐng)寫在下面的評(píng)論區(qū)。

4. 使用值填充數(shù)組

如果你需要使用相同的值來(lái)初始化數(shù)組，那么Array.from()將是不錯(cuò)的選擇。

我們來(lái)定義一個(gè)函數(shù)，創(chuàng)建一個(gè)填充相同默認(rèn)值的數(shù)組：

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

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

result是一個(gè)新的數(shù)組，它的長(zhǎng)度為3，數(shù)組的每一項(xiàng)都是0。調(diào)用Array.from()方法，傳入一個(gè)類數(shù)組對(duì)象{ length }和 返回初始化值的mapFunction函數(shù)。

但是，有一個(gè)替代方法array.fill()可以實(shí)現(xiàn)同樣的功能。

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

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

fill()使用初始值正確填充數(shù)組。

4.1 使用對(duì)象填充數(shù)組

當(dāng)初始化數(shù)組的每個(gè)項(xiàng)都應(yīng)該是一個(gè)新對(duì)象時(shí)，Array.from()是一個(gè)更好的解決方案：

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使用不同空對(duì)象實(shí)例進(jìn)行初始化。之所以發(fā)生這種情況是因?yàn)槊看握{(diào)用時(shí)，mapFunction，即此處的() => ({})都會(huì)返回一個(gè)新的對(duì)象。

然后，fill()方法創(chuàng)建的resultB使用相同的空對(duì)象實(shí)例進(jìn)行初始化。不會(huì)跳過(guò)空項(xiàng)。

4.2 使用array.map怎么樣？

是不是可以使用array.map()方法來(lái)實(shí)現(xiàn)？我們來(lái)試一下：

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

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

map()方法似乎不正常，創(chuàng)建出來(lái)的數(shù)組不是預(yù)期的[0, 0, 0]，而是一個(gè)有3個(gè)空項(xiàng)的數(shù)組。

這是因?yàn)?code>Array(length)創(chuàng)建了一個(gè)有3個(gè)空項(xiàng)的數(shù)組(也稱為稀疏數(shù)組)，但是map()方法會(huì)跳過(guò)空項(xiàng)。

5. 生成數(shù)字范圍

你可以使用Array.from()生成值范圍。例如，下面的range函數(shù)生成一個(gè)數(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}，以及一個(gè)簡(jiǎn)單地返回當(dāng)前索引的map函數(shù) 。這樣你就可以生成值范圍。

6.數(shù)組去重

由于Array.from()的入?yún)⑹强傻鷮?duì)象，因而我們可以利用其與Set結(jié)合來(lái)實(shí)現(xiàn)快速?gòu)臄?shù)組中刪除重復(fù)項(xiàng)。

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

首先，new Set(array)創(chuàng)建了一個(gè)包含數(shù)組的集合，Set集合會(huì)刪除重復(fù)項(xiàng)。

因?yàn)?code>Set集合是可迭代的，所以可以使用Array.from()將其轉(zhuǎn)換為一個(gè)新的數(shù)組。

這樣，我們就實(shí)現(xiàn)了數(shù)組去重。

7.結(jié)論

Array.from()方法接受類數(shù)組對(duì)象以及可迭代對(duì)象，它可以接受一個(gè)map函數(shù)，并且，這個(gè)map函數(shù)不會(huì)跳過(guò)值為undefined的數(shù)值項(xiàng)。這些特性給Array.from()提供了很多可能。

如上所述，你可以輕松的將類數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組，克隆一個(gè)數(shù)組，使用初始化填充數(shù)組，生成一個(gè)范圍，實(shí)現(xiàn)數(shù)組去重。

實(shí)際上，Array.from()是非常好的設(shè)計(jì)，靈活的配置，允許很多集合轉(zhuǎn)換。

當(dāng)前標(biāo)題：javascript中Array.from的用法-創(chuàng)新互聯(lián)
鏈接分享：http://www.chinadenli.net/article42/deedec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、軟件開發(fā)、ChatGPT、外貿(mào)網(wǎng)站建設(shè)、外貿(mào)建站、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)