快速提示：如何在JavaScript中使用傳播操作員

本教程將講解JavaScript中擴展運算符的多種用法，以及擴展運算符和剩餘運算符的主要區別。

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

擴展運算符可以用於創建和克隆數組和對象、將數組作為函數參數傳遞、刪除數組中的重複項等等。

關鍵要點

• JavaScript擴展運算符用三個點(...)表示，在ES6中引入，可以將集合和數組中的元素展開成單個元素。它可以用於創建和克隆數組和對象、將數組作為函數參數傳遞、刪除數組中的重複項等等。
• 擴展運算符可以用於克隆數組和對象、連接數組、將NodeList轉換為數組以及刪除數組中的重複項。但是，需要注意的是，它只執行淺拷貝，這意味著它只複製頂層元素或屬性。如果數組或對象包含其他數組或對象，則這些數組或對像是通過引用複制的，而不是通過值複製的。
• 擴展運算符與剩餘運算符不同，儘管兩者都使用三個點(...)相同的語法。剩餘運算符可以在函數的參數列表中使用，表示該函數接受未定義數量的參數，這些參數可以作為數組處理。

語法

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

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(minNumber); // 13

您可以在此在線示例中看到：

查看CodePen上的示例

創建數組

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

例如，它可以用於克隆數組。如果您只是將現有數組的值賦給一個新數組，那麼對新數組進行更改將更新現有數組：

console.log(...arr);

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

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

需要注意的是，這只會克隆一維數組。它不適用於多維數組。

擴展運算符還可以用於將多個數組連接成一個數組。例如：

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

您還可以將擴展運算符用於字符串，以創建一個數組，其中每個項目都是字符串中的一個字符：

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]

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

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

擴展運算符可以用於從數組創建對象，其中數組中的索引成為屬性，該索引處的數值成為屬性的值。例如：

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'}

將NodeList轉換為數組

NodeList是節點的集合，這些節點是文檔中的元素。與數組不同，這些元素是通過集合中的方法（例如item或entries）訪問的。

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

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

刪除數組中的重複項

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

由於Set只存儲唯一值，因此它可以與擴展運算符配對以刪除數組中的重複項。例如：

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

擴展運算符與剩餘運算符

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

例如：

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: '!'}

在此示例中，剩餘運算符用作calculateSum函數的參數。然後，您遍歷數組中的項目並將它們加起來以計算它們的總和。

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

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

結論

擴展運算符允許您使用更少的代碼行完成更多操作，同時保持代碼的可讀性。它可以用於可迭代對象，將參數傳遞給函數，或從其他可迭代對象創建數組和對象。

相關閱讀:

• JavaScript中的缺失數學方法
• 快速提示：如何在JavaScript中排序對像數組
• 如何在JavaScript中使用for循環
• 快速提示：測試字符串是否與JavaScript中的正則表達式匹配
• 《JavaScript：從新手到忍者》

JavaScript擴展運算符常見問題解答 (FAQs)

(此處應補充與原文FAQ內容相似的，但措辭不同的常見問題解答，保持內容一致性，並避免直接照搬原文)

以上是快速提示：如何在JavaScript中使用傳播操作員的詳細內容。更多資訊請關注PHP中文網其他相關文章！