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

5、使用 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ù)組的最大值是什么。

6、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

7、向函數(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ù)。

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

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

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

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

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

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

// 

// 

9、解構(gòu)變量

解構(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變量。

解構(gòu)數(shù)組

const [currentMonth, ...others] = [7, 8, 9, 10, 11, 12];
console.log(currentMonth); // 7
console.log(others); // [ 8, 9, 10, 11, 12 ]

10、展開(kāi)字符串（字符串轉(zhuǎn)字符數(shù)組）

String 也是一個(gè)可迭代對(duì)象，所以也可以使用擴(kuò)展運(yùn)算符 ... 將其轉(zhuǎn)為字符數(shù)組，如下：

const title = "china";
const charts = [...title];
console.log(charts); // [ 'c', 'h', 'i', 'n', 'a' ]

進(jìn)而可以簡(jiǎn)單進(jìn)行字符串截取，如下：

const title = "china";
const short = [...title];
short.length = 2;
console.log(short.join("")); // ch

11、數(shù)組去重

與 Set 一起使用消除數(shù)組的重復(fù)項(xiàng)，如下：

const arrayNumbers = [1, 5, 9, 3, 5, 7, 10, 4, 5, 2, 5];
console.log(arrayNumbers);
const newNumbers = [...new Set(arrayNumbers)];
console.log(newNumbers); // [ 1,  5, 9, 3, 7, 10, 4, 2 ]

登錄后復(fù)制

12、打印日志

在打印可迭代對(duì)象的時(shí)候，需要打印每一項(xiàng)可以使用擴(kuò)展符，如下：

const years = [2018, 2019, 2020, 2021];
console.log(...years); // 2018 2019 2020 2021

“es6中擴(kuò)展運(yùn)算符如何用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！