欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一文教會你如何在JavaScript中使用展開運算符

 更新時間：2022年10月08日 16:11:09   作者：執(zhí)寧  
展開運算符(spread operator)允許一個表達式在某處展開,下面這篇文章主要給大家介紹了關(guān)于如何通過一文教會你如何在JavaScript中使用展開運算符的相關(guān)資料,需要的朋友可以參考下

前言

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

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

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

語法

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

console.log(...arr);

功能以及參數(shù)

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

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

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

請注意，第一個參數(shù)是null，因為第一個參數(shù)用于更改this調(diào)用函數(shù)的值。

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

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

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

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

例如，它可用于克隆數(shù)組。如果您只是將現(xiàn)有數(shù)組的值分配給新數(shù)組，則對新數(shù)組進行更改將更新現(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]

通過使用擴展運算符，可以將現(xiàn)有數(shù)組克隆到一個新數(shù)組中，并且對新數(shù)組所做的任何更改都不會影響現(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)該注意的是，這只會克隆一維數(shù)組。它不適用于多維數(shù)組。

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

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)建一個數(shù)組，其中每個項目都是字符串中的一個字符：

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}

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

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 轉(zhuǎn)換為數(shù)組

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

您可以使用擴展運算符將 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ù)項

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

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

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 運算符可以在函數(shù)的參數(shù)列表中使用，表示該函數(shù)接受未定義數(shù)量的參數(shù)。這些參數(shù)可以作為數(shù)組處理。

例如：

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

  return sum;
}

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

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

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

結(jié)論

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

總結(jié)

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

相關(guān)文章

最新評論