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