前言
今天，我們來介紹的是一個運算符... ，它的含義可不是聊天中女神對你的敷衍。在 JavaScript 中，三個點 ... 稱為展開運算符（spread operator）或剩余參數（rest parameters），具體含義取決于它的使用場景。
場景一：展開運算符：讓數據“散開”重生
1. 在數組中使用
創建數組副本：你可以使用展開運算符來創建一個數組的淺拷貝。
const arr = [1, 2, 3];const copy = [...arr];
合并數組：通過展開多個數組，你可以輕松地合并它們。
const arr1 = [1, 2, 3];const arr2 = [4, 5, 6];const combined = [...arr1, ...arr2];
const numbers = [1, 2, 3];const moreNumbers = [...numbers, 4, 5];
：當你有一個數組，并且希望將其元素作為單獨的參數傳遞給函數時，可以使用展開運算符。function sum(x, y, z) { return x + y + z;}const args = [1, 2, 3];console.log(sum(...args));
2. 在字符串中使用
將字符串轉換為字符數組：可以直接將字符串展開成字符數組。
const str = 'hello';const chars = [...str]; // ['h', 'e', 'l', 'l', 'o']
3. 處理迭代對象
Set 和 Map：對于 Set 或者 Map 這樣的集合類型，可以使用展開運算符來創建副本或者與其他集合進行合并。
const set1 = new Set([1, 2, 3]);const set2 = new Set([...set1, 4, 5]); // 創建一個包含新元素的副本const map1 = new Map([['key1', 'value1']]);const map2 = new Map([...map1, ['key2', 'value2']]); // 合并兩個 Map
場景二：剩余運算符
這個功能在函數定義中非常有用，特別是當你不知道或不想限制傳遞給函數的參數數量時。剩余參數使用三個點 ... 來表示，并且總是放在參數列表的最后。
1. 與普通參數結合使用
你可以在函數定義中同時使用固定參數和剩余參數，這使得你的函數更加靈活。
function logFirstAndRest(first, ...rest) { console.log('First:', first); console.log('Rest:', rest);}logFirstAndRest('hello', 'world', '!');// First: hello// Rest: ['world', '!']
2. 創建可變參數函數
如果你有一個函數，它的參數數量可能變化，那么你可以使用剩余參數來簡化代碼。
function sum(...numbers) { return numbers.reduce((total, num) => total + num, 0);}console.log(sum(1, 2, 3)); console.log(sum(1, 2, 3, 4, 5)); // 輸出: 15
3. 處理回調函數中的參數
當編寫接受回調函數作為參數的高階函數時，剩余參數可以幫助你處理那些可能會傳遞給回調的任意數量的參數。
function higherOrderFunction(callback, ...args) { callback(...args);}higherOrderFunction((a, b, c) => console.log(a, b, c), 1, 2, 3);
1.參數傳入： 將(a, b, c) => console.log(a, b, c)匿名函數作為參數傳給callback函數，剩余的1 2 3，通過剩余運算符都傳給args數組，最后args又作為參數傳給callback
2.結果： 輸出 1 2 3
4. 解構賦值
解構賦值（Destructuring Assignment）是 JavaScript 中用于從數組或對象中提取數據并直接賦值給變量的語法糖。它簡化了從復雜的數據結構中獲取所需部分的操作，使得代碼更加簡潔和易讀。
const [coach,...players]=["米盧","李鐵","孫繼科","范志毅"];// ... rest運算符 剩余運算符console.log(coach);//米盧console.log(players);//[ '李鐵', '孫繼科', '范志毅' ]
注意事項
- 只能有一個剩余參數：在一個函數的參數列表中只能有一個剩余參數。
- 不能與解構賦值混淆：雖然剩余參數和解構賦值都可以用三個點
... 表示，但是它們的用法不同。剩余參數用于函數參數列表中，而解構賦值中的展開運算符用于對象或數組的復制、合并等操作。 - 性能考慮：對于非常大的參數列表，使用剩余參數可能會帶來性能上的開銷，因為它涉及到創建新的數組。
總結：三點魔法的力量
... 運算符就像是一個魔法師手中的萬能鑰匙，它既能讓你的數據“散開”重生，又能幫你收集所有的寶藏。無論是處理數組、對還是函數參數，... 都能為你提供簡潔而強大的解決方案。掌握這把鑰匙，你就能更加靈活地編寫代碼，使你的 JavaScript 程序既優雅又高效。所以，下次當你看到三個點的時候，記得這是開啟編程魔法世界的秘密符號哦！
閱讀原文：原文鏈接
該文章在 2024/12/30 16:05:13 編輯過
400 186 1886
