欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

前言

今天，我們來介紹的是一個(gè)運(yùn)算符... ，它的含義可不是聊天中女神對(duì)你的敷衍。在 JavaScript 中，三個(gè)點(diǎn) ... 稱為展開運(yùn)算符（spread operator）或剩余參數(shù)（rest parameters），具體含義取決于它的使用場(chǎng)景。

場(chǎng)景一：展開運(yùn)算符：讓數(shù)據(jù)“散開”重生

1. 在數(shù)組中使用

創(chuàng)建數(shù)組副本：你可以使用展開運(yùn)算符來創(chuàng)建一個(gè)數(shù)組的淺拷貝。

const arr = [1, 2, 3];const copy = [...arr]; // 淺拷貝原數(shù)組

合并數(shù)組：通過展開多個(gè)數(shù)組，你可以輕松地合并它們。

const arr1 = [1, 2, 3];const arr2 = [4, 5, 6];const combined = [...arr1, ...arr2]; // 結(jié)果是 [1, 2, 3, 4, 5, 6]

const numbers = [1, 2, 3];const moreNumbers = [...numbers, 4, 5]; // 結(jié)果是 [1, 2, 3, 4, 5]

function sum(x, y, z) {  return x + y + z;}const args = [1, 2, 3];console.log(sum(...args)); // 輸出 6

2. 在字符串中使用

將字符串轉(zhuǎn)換為字符數(shù)組：可以直接將字符串展開成字符數(shù)組。

const str = 'hello';const chars = [...str]; // ['h', 'e', 'l', 'l', 'o']

3. 處理迭代對(duì)象

Set 和 Map：對(duì)于 Set 或者 Map 這樣的集合類型，可以使用展開運(yùn)算符來創(chuàng)建副本或者與其他集合進(jìn)行合并。

const set1 = new Set([1, 2, 3]);const set2 = new Set([...set1, 4, 5]); // 創(chuàng)建一個(gè)包含新元素的副本const map1 = new Map([['key1', 'value1']]);const map2 = new Map([...map1, ['key2', 'value2']]); // 合并兩個(gè) Map

場(chǎng)景二：剩余運(yùn)算符

這個(gè)功能在函數(shù)定義中非常有用，特別是當(dāng)你不知道或不想限制傳遞給函數(shù)的參數(shù)數(shù)量時(shí)。剩余參數(shù)使用三個(gè)點(diǎn) ... 來表示，并且總是放在參數(shù)列表的最后。

1. 與普通參數(shù)結(jié)合使用

你可以在函數(shù)定義中同時(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ù)

如果你有一個(gè)函數(shù)，它的參數(shù)數(shù)量可能變化，那么你可以使用剩余參數(shù)來簡(jiǎn)化代碼。

function sum(...numbers) {  return numbers.reduce((total, num) => total + num, 0);}console.log(sum(1, 2, 3)); // 輸出: 6console.log(sum(1, 2, 3, 4, 5)); // 輸出: 15

3. 處理回調(diào)函數(shù)中的參數(shù)

當(dāng)編寫接受回調(diào)函數(shù)作為參數(shù)的高階函數(shù)時(shí)，剩余參數(shù)可以幫助你處理那些可能會(huì)傳遞給回調(diào)的任意數(shù)量的參數(shù)。

function higherOrderFunction(callback, ...args) {  callback(...args);}higherOrderFunction((a, b, c) => console.log(a, b, c), 1, 2, 3);// 輸出: 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ù)并直接賦值給變量的語法糖。它簡(jiǎn)化了從復(fù)雜的數(shù)據(jù)結(jié)構(gòu)中獲取所需部分的操作，使得代碼更加簡(jiǎn)潔和易讀。

const [coach,...players]=["米盧","李鐵","孫繼科","范志毅"];// ...  rest運(yùn)算符 剩余運(yùn)算符console.log(coach);//米盧console.log(players);//[ '李鐵', '孫繼科', '范志毅' ]

注意事項(xiàng)

• 只能有一個(gè)剩余參數(shù)：在一個(gè)函數(shù)的參數(shù)列表中只能有一個(gè)剩余參數(shù)。
• 不能與解構(gòu)賦值混淆：雖然剩余參數(shù)和解構(gòu)賦值都可以用三個(gè)點(diǎn) ... 表示，但是它們的用法不同。剩余參數(shù)用于函數(shù)參數(shù)列表中，而解構(gòu)賦值中的展開運(yùn)算符用于對(duì)象或數(shù)組的復(fù)制、合并等操作。
• 性能考慮：對(duì)于非常大的參數(shù)列表，使用剩余參數(shù)可能會(huì)帶來性能上的開銷，因?yàn)樗婕暗絼?chuàng)建新的數(shù)組。

總結(jié)：三點(diǎn)魔法的力量

... 運(yùn)算符就像是一個(gè)魔法師手中的萬能鑰匙，它既能讓你的數(shù)據(jù)“散開”重生，又能幫你收集所有的寶藏。無論是處理數(shù)組、對(duì)還是函數(shù)參數(shù)，... 都能為你提供簡(jiǎn)潔而強(qiáng)大的解決方案。掌握這把鑰匙，你就能更加靈活地編寫代碼，使你的 JavaScript 程序既優(yōu)雅又高效。所以，下次當(dāng)你看到三個(gè)點(diǎn)的時(shí)候，記得這是開啟編程魔法世界的秘密符號(hào)哦！

閱讀原文：原文鏈接