[[380431]]

本文已經(jīng)過(guò)原作者 Chris Bongers 授權(quán)翻譯。

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

我們可以使用展開(kāi)操作符復(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)在可以使用展開(kāi)操作符：

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]; 

此外，展開(kāi)運(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，我們可以再次利用展開(kāi)操作符。

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

使用 Math() 函數(shù)

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

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

為了獲得最小值，我們可以使用展開(kāi)操作符和 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 

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

你可能會(huì)好奇，如果我們不使用展開(kāi)操作符會(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]; 

我們可以使用展開(kāi)操作符將這個(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è)我們使用了展開(kāi)運(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); 
}); 
// <div></div> 
// <div></div> 
// <div></div> 

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

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

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

現(xiàn)在，我們可以使用展開(kāi)運(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變量。

展開(kāi)字符串

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

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

const str = 'Hello'; 

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

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

~ 完，我是小智，我要刷碗去了，我們下期再見(jiàn)!

作者：Chris Bongers 譯者：前端小智 來(lái)源：ishadeed原文：https://dev.to/dailydevtips1/10-ways-to-use-the-spread-operator-in-javascript-1imb

歡迎關(guān)注「大遷世界」,認(rèn)真學(xué)前端，做個(gè)專業(yè)的技術(shù)人...