本篇內(nèi)容主要講解“JS中使用擴(kuò)展運(yùn)算符的方法有哪些”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“JS中使用擴(kuò)展運(yùn)算符的方法有哪些”吧!

目前創(chuàng)新互聯(lián)已為數(shù)千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機(jī)、網(wǎng)站托管維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、樊城網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

復(fù)制數(shù)組

我們可以使用展開操作符復(fù)制數(shù)組，不過(guò)要注意的是這是一個(gè)淺拷貝。

const arr1 = [1,2,3]; const arr2 = [...arr1]; console.log(arr2); // [ 1, 2, 3 ]

這樣我們就可以復(fù)制一個(gè)基本的數(shù)組，注意，它不適用于多級(jí)數(shù)組或帶有日期或函數(shù)的數(shù)組。

合并數(shù)組

假設(shè)我們有兩個(gè)數(shù)組想合并為一個(gè)，早期間我們可以使用concat方法，但現(xiàn)在可以使用展開操作符：

const arr1 = [1,2,3]; const arr2 = [4,5,6]; const arr3 = [...arr1, ...arr2]; console.log(arr3); // [ 1, 2, 3, 4, 5, 6 ]

我們還可以通過(guò)不同的排列方式來(lái)說(shuō)明哪個(gè)應(yīng)該先出現(xiàn)。

const arr3 = [...arr2, ...arr1]; console.log(arr3); [4, 5, 6, 1, 2, 3];

此外，展開運(yùn)算符號(hào)還適用多個(gè)數(shù)組的合并：

const output = [...arr1, ...arr2, ...arr3, ...arr4];

向數(shù)組中添加元素

let arr1 = ['this', 'is', 'an']; arr1 = [...arr1, 'array']; console.log(arr1); // [ 'this', 'is', 'an', 'array' ]

向?qū)ο筇砑訉傩?/p>

假設(shè)你有一個(gè)user 的對(duì)象，但它缺少一個(gè)age屬性。

const user = {   firstname: 'Chris',   lastname: 'Bongers' };

要向這個(gè)user對(duì)象添加age，我們可以再次利用展開操作符。

const output = {...user, age: 31};

使用 Math() 函數(shù)

假設(shè)我們有一個(gè)數(shù)字?jǐn)?shù)組，我們想要獲得這些數(shù)字中的最大值、最小值或者總和。

const arr1 = [1, -1, 0, 5, 3];

為了獲得最小值，我們可以使用展開操作符和 Math.min 方法。

const arr1 = [1, -1, 0, 5, 3]; const min = Math.min(...arr1); console.log(min); // -1

同樣，要獲得最大值，可以這么做：

const arr1 = [1, -1, 0, 5, 3]; const max = Math.max(...arr1); console.log(max); // 5

如大家所見，最大值5，如果我們刪除5，它將返回3。

你可能會(huì)好奇，如果我們不使用展開操作符會(huì)發(fā)生什么?

const arr1 = [1, -1, 0, 5, 3]; const max = Math.max(arr1); console.log(max); // NaN

這會(huì)返回NaN，因?yàn)镴avaScript不知道數(shù)組的最大值是什么。

rest 參數(shù)

假設(shè)我們有一個(gè)函數(shù)，它有三個(gè)參數(shù)。

const myFunc(x1, x2, x3) => {     console.log(x1);     console.log(x2);     console.log(x3); }

我們可以按以下方式調(diào)用這個(gè)函數(shù):

myFunc(1, 2, 3);

但是，如果我們要傳遞一個(gè)數(shù)組會(huì)發(fā)生什么。

const arr1 = [1, 2, 3];

我們可以使用展開操作符將這個(gè)數(shù)組擴(kuò)展到我們的函數(shù)中。

myFunc(...arr1); // 1 // 2 // 3

這里，我們將數(shù)組分為三個(gè)單獨(dú)的參數(shù)，然后傳遞給函數(shù)。

const myFunc = (x1, x2, x3) => {   console.log(x1);   console.log(x2);   console.log(x3); }; const arr1 = [1, 2, 3]; myFunc(...arr1); // 1 // 2 // 3

向函數(shù)傳遞無(wú)限參數(shù)

假設(shè)我們有一個(gè)函數(shù)，它接受無(wú)限個(gè)參數(shù)，如下所示：

const myFunc = (...args) => {   console.log(args); };

如果我們現(xiàn)在調(diào)用這個(gè)帶有多個(gè)參數(shù)的函數(shù)，會(huì)看到下面的情況:

myFunc(1, 'a', new Date());

返回：

[   1,   'a',   Date {     __proto__: Date {}   } ]

然后，我們就可以動(dòng)態(tài)地循環(huán)遍歷參數(shù)。

將 nodeList 轉(zhuǎn)換為數(shù)組

假設(shè)我們使用了展開運(yùn)算符來(lái)獲取頁(yè)面上的所有div：

const el = [...document.querySelectorAll('div')]; console.log(el); // (3) [div, div, div]

在這里可以看到我們從dom中獲得了3個(gè)div。

現(xiàn)在，我們可以輕松地遍歷這些元素，因?yàn)樗鼈兪菙?shù)組了。

const el = [...document.querySelectorAll('div')]; el.forEach(item => {   console.log(item); }); // 
 // 
 // 

解構(gòu)對(duì)象

假設(shè)我們有一個(gè)對(duì)象user:

const user = {   firstname: 'Chris',   lastname: 'Bongers',   age: 31 };

現(xiàn)在，我們可以使用展開運(yùn)算符將其分解為單個(gè)變量。

const {firstname, ...rest} = user; console.log(firstname); console.log(rest); // 'Chris' // { lastname: 'Bongers', age: 31 }

這里，我們解構(gòu)了user對(duì)象，并將firstname解構(gòu)為firstname變量，將對(duì)象的其余部分解構(gòu)為rest變量。

展開字符串

展開運(yùn)算符的最后一個(gè)用例是將一個(gè)字符串分解成單個(gè)單詞。

假設(shè)我們有以下字符串：

const str = 'Hello';

然后，如果我們對(duì)這個(gè)字符串使用展開操作符，我們將得到一個(gè)字母數(shù)組。

const str = 'Hello'; const arr = [...str]; console.log(arr); // [ 'H', 'e', 'l', 'l', 'o' ]

到此，相信大家對(duì)“JS中使用擴(kuò)展運(yùn)算符的方法有哪些”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！