前言

在本教程中，您將了解在 JavaScript 中使用擴(kuò)展運(yùn)算符的不同方式，以及擴(kuò)展運(yùn)算符和剩余運(yùn)算符之間的主要區(qū)別。

由三個(gè)點(diǎn) ( ...) 表示，JavaScript 擴(kuò)展運(yùn)算符是在 ES6 中引入的。它可用于將集合和數(shù)組中的元素?cái)U(kuò)展為單個(gè)單獨(dú)的元素。

擴(kuò)展運(yùn)算符可用于創(chuàng)建和克隆數(shù)組和對(duì)象、將數(shù)組作為函數(shù)參數(shù)傳遞、從數(shù)組中刪除重復(fù)項(xiàng)等等。

語(yǔ)法

擴(kuò)展運(yùn)算符只能用于可迭代對(duì)象。它必須在可迭代對(duì)象之前使用，沒有任何分隔。例如：

console.log(...arr);

功能以及參數(shù)

以Math.min()方法為例。此方法接受至少一個(gè)數(shù)字作為參數(shù)，并返回傳遞的參數(shù)中最小的數(shù)字。

如果您有一個(gè)數(shù)字?jǐn)?shù)組并且您想找到這些數(shù)字中的最小值，那么在沒有展開運(yùn)算符的情況下，您需要使用它們的索引一個(gè)一個(gè)地傳遞元素，或者使用apply()方法來(lái)傳遞數(shù)組作為參數(shù)。例如：

const numbers = [15, 13, 100, 20];
const minNumber = Math.min.apply(null, numbers);
console.log(minNumber); // 13

請(qǐng)注意，第一個(gè)參數(shù)是null，因?yàn)榈谝粋€(gè)參數(shù)用于更改this調(diào)用函數(shù)的值。

擴(kuò)展運(yùn)算符是將數(shù)組元素作為參數(shù)傳遞給函數(shù)的更方便和可讀的解決方案。例如：

const numbers = [15, 13, 100, 20];
const minNumber = Math.min(...numbers);
console.log(numbers); // 13

創(chuàng)建數(shù)組

擴(kuò)展運(yùn)算符可用于從現(xiàn)有數(shù)組或其他包含Symbol.iterator()方法的可迭代對(duì)象創(chuàng)建新數(shù)組。這些是可以使用for...of循環(huán)迭代的對(duì)象。

例如，它可用于克隆數(shù)組。如果您只是將現(xiàn)有數(shù)組的值分配給新數(shù)組，則對(duì)新數(shù)組進(jìn)行更改將更新現(xiàn)有數(shù)組：

const numbers = [15, 13, 100, 20];
const clonedNumbers = numbers;
clonedNumbers.push(24);
console.log(clonedNumbers); // [15, 13, 100, 20, 24]
console.log(numbers); // [15, 13, 100, 20, 24]

通過(guò)使用擴(kuò)展運(yùn)算符，可以將現(xiàn)有數(shù)組克隆到一個(gè)新數(shù)組中，并且對(duì)新數(shù)組所做的任何更改都不會(huì)影響現(xiàn)有數(shù)組：

const numbers = [15, 13, 100, 20];
const clonedNumbers = [...numbers];
clonedNumbers.push(24);
console.log(clonedNumbers); // [15, 13, 100, 20, 24]
console.log(numbers); // [15, 13, 100, 20]

應(yīng)該注意的是，這只會(huì)克隆一維數(shù)組。它不適用于多維數(shù)組。

擴(kuò)展運(yùn)算符也可用于將多個(gè)數(shù)組連接為一個(gè)。例如：

const evenNumbers = [2, 4, 6, 8];
const oddNumbers = [1, 3, 5, 7];
const allNumbers = [...evenNumbers, ...oddNumbers];
console.log(...allNumbers); //[2, 4, 6, 8, 1, 3, 5, 7]

您還可以在字符串上使用擴(kuò)展運(yùn)算符來(lái)創(chuàng)建一個(gè)數(shù)組，其中每個(gè)項(xiàng)目都是字符串中的一個(gè)字符：

const str = 'Hello, World!';
const strArr = [...str];
console.log(strArr); // ['H', 'e', 'l', 'l', 'o', ',', ' ', 'W', 'o', 'r', 'l', 'd', '!']

創(chuàng)建對(duì)象

擴(kuò)展運(yùn)算符可以以不同的方式用于創(chuàng)建對(duì)象。

它可用于淺克隆另一個(gè)對(duì)象。例如：

const obj = { name: 'Mark', age: 20};
const clonedObj = { ...obj };
console.log(clonedObj); // {name: 'Mark', age: 20}

它還可以用于將多個(gè)對(duì)象合并為一個(gè)。例如：

const obj1 = { name: 'Mark', age: 20};
const obj2 = { occupation: 'Student' };
const clonedObj = { ...obj1, ...obj2 };
console.log(clonedObj); // {name: 'Mark', age: 20, occupation: 'Student'}

需要注意的是，如果對(duì)象共享相同的屬性名稱，將使用最后一個(gè)對(duì)象展開的值。例如：

const obj1 = { name: 'Mark', age: 20};
const obj2 = { age: 30 };
const clonedObj = { ...obj1, ...obj2 };
console.log(clonedObj); // {name: 'Mark', age: 30}

擴(kuò)展運(yùn)算符可用于從數(shù)組創(chuàng)建對(duì)象，其中數(shù)組中的索引成為屬性，該索引處的值成為屬性的值。例如：

const numbers = [15, 13, 100, 20];
const obj = { ...numbers };
console.log(obj); // {0: 15, 1: 13, 2: 100, 3: 20}

它還可以用于從字符串創(chuàng)建對(duì)象，其中，字符串中的索引成為屬性，該索引處的字符成為屬性的值。例如：

const str = 'Hello, World!';
const obj = { ...str };
console.log(obj); // {0: 'H', 1: 'e', 2: 'l', 3: 'l', 4: 'o', 5: ',', 6: ' ', 7: 'W', 8: 'o', 9: 'r', 10: 'l', 11: 'd', 12: '!'}

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

NodeList是節(jié)點(diǎn)的集合，它們是文檔中的元素。元素通過(guò)集合中的方法訪問(wèn)，例如itemor entries，與數(shù)組不同。

您可以使用擴(kuò)展運(yùn)算符將 NodeList 轉(zhuǎn)換為 Array。例如：

const nodeList = document.querySelectorAll('div');
console.log(nodeList.item(0)); // <div>...</div>
const nodeArray = [...nodeList];
console.log(nodeList[0]); // <div>...</div>

從數(shù)組中刪除重復(fù)項(xiàng)

Set對(duì)象是一個(gè)僅存儲(chǔ)唯一值的集合。與 NodeList 類似，可以使用擴(kuò)展運(yùn)算符將 Set 轉(zhuǎn)換為數(shù)組。

由于 Set 僅存儲(chǔ)唯一值，因此可以將其與擴(kuò)展運(yùn)算符配對(duì)以從數(shù)組中刪除重復(fù)項(xiàng)。例如：

const duplicatesArr = [1, 2, 3, 2, 1, 3];
const uniqueArr = [...new Set(duplicatesArr)];
console.log(duplicatesArr); // [1, 2, 3, 2, 1, 3]
console.log(uniqueArr); // [1, 2, 3]

擴(kuò)展運(yùn)算符與休息運(yùn)算符

rest 運(yùn)算符也是一個(gè)三點(diǎn)運(yùn)算符 ( ...)，但它用于不同的目的。rest 運(yùn)算符可以在函數(shù)的參數(shù)列表中使用，表示該函數(shù)接受未定義數(shù)量的參數(shù)。這些參數(shù)可以作為數(shù)組處理。

例如：

function calculateSum(...funcArgs) {
  let sum = 0;
  for (const arg of funcArgs) {
    sum += arg;
  }

  return sum;
}

在此示例中，rest 運(yùn)算符用作calculateSum函數(shù)的參數(shù)。然后，您循環(huán)遍歷數(shù)組中的項(xiàng)目并將它們相加以計(jì)算它們的總和。

然后，您可以將變量一個(gè)一個(gè)地calculateSum作為參數(shù)傳遞給函數(shù)，或者使用擴(kuò)展運(yùn)算符將數(shù)組的元素作為參數(shù)傳遞：

console.log(calculateSum(1, 2, 3)); // 6
const numbers = [1, 2, 3];
console.log(calculateSum(...numbers)); // 6

結(jié)論

擴(kuò)展運(yùn)算符允許您用更少的代碼行做更多的事情，同時(shí)保持代碼的可讀性。它可以用于可迭代對(duì)象以將參數(shù)傳遞給函數(shù)，或從其他可迭代對(duì)象創(chuàng)建數(shù)組和對(duì)象。

總結(jié)

到此這篇關(guān)于如何在JavaScript中使用展開運(yùn)算符的文章就介紹到這了,更多相關(guān)JS使用展開運(yùn)算符內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論