JavaScript展開運算符的方式有哪些

這篇文章主要講解了“JavaScript展開運算符的方式有哪些”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“JavaScript展開運算符的方式有哪些”吧！

由三個點 ( ...) 表示，JavaScript 擴展運算符是在 ES6 中引入的。它可用于將集合和數組中的元素擴展為單個單獨的元素。

擴展運算符可用于創(chuàng)建和克隆數組和對象、將數組作為函數參數傳遞、從數組中刪除重復項等等。

語法

擴展運算符只能用于可迭代對象。它必須在可迭代對象之前使用，沒有任何分隔。例如：

console.log(...arr);

功能以及參數

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

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

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

請注意，第一個參數是null，因為第一個參數用于更改this調用函數的值。

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

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

創(chuàng)建數組

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

例如，它可用于克隆數組。如果您只是將現有數組的值分配給新數組，則對新數組進行更改將更新現有數組：

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]

通過使用擴展運算符，可以將現有數組克隆到一個新數組中，并且對新數組所做的任何更改都不會影響現有數組：

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]

應該注意的是，這只會克隆一維數組。它不適用于多維數組。

擴展運算符也可用于將多個數組連接為一個。例如：

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]

您還可以在字符串上使用擴展運算符來創(chuàng)建一個數組，其中每個項目都是字符串中的一個字符：

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

創(chuàng)建對象

擴展運算符可以以不同的方式用于創(chuàng)建對象。

它可用于淺克隆另一個對象。例如：

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

它還可以用于將多個對象合并為一個。例如：

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

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

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

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

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

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


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 轉換為數組

NodeList是節(jié)點的集合，它們是文檔中的元素。元素通過集合中的方法訪問，例如itemor entries，與數組不同。

您可以使用擴展運算符將 NodeList 轉換為 Array。例如：

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

從數組中刪除重復項

Set對象是一個僅存儲唯一值的集合。與 NodeList 類似，可以使用擴展運算符將 Set 轉換為數組。

由于 Set 僅存儲唯一值，因此可以將其與擴展運算符配對以從數組中刪除重復項。例如：

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]

擴展運算符與休息運算符

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

例如：

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

  return sum;
}

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

然后，您可以將變量一個一個地calculateSum作為參數傳遞給函數，或者使用擴展運算符將數組的元素作為參數傳遞：

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

感謝各位的閱讀，以上就是“JavaScript展開運算符的方式有哪些”的內容了，經過本文的學習后，相信大家對JavaScript展開運算符的方式有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！