掌握 JavaScript 中的展開和剩餘運算符

JavaScript 中的展開與休息運算符

spread 和 rest 運算子均由三個點 (...) 表示，是 ES6 中引入的 JavaScript 中的多功能功能。儘管它們共享相同的語法，但它們具有不同的用途：展開運算符用於擴展元素，而剩餘運算符用於收集元素。

---

1.傳播運算子

擴充運算子用於將陣列、物件或可迭代物件的元素擴展為單一元素。

A.以陣列形式傳播

擴充運算子可用於複製、連接或傳遞陣列元素。

範例：複製陣列

const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // Creates a copy of arr1
console.log(arr2); // Output: [1, 2, 3]

範例：連線陣列

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // Output: [1, 2, 3, 4, 5, 6]

範例：將元素傳遞給函數

const numbers = [10, 20, 30];
console.log(Math.max(...numbers)); // Output: 30

B.在物體中傳播

您可以使用擴充運算子來複製或合併物件。

範例：複製物件

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1 };
console.log(obj2); // Output: { a: 1, b: 2 }

範例：合併物件

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // Output: { a: 1, b: 3, c: 4 }

---

2.休息操作員

剩餘運算子將多個元素收集到單一陣列或物件中。它常用於函數參數或解構賦值。

A.在函數參數中使用 Rest

剩餘運算子可以將不定數量的參數收集到陣列中。

範例：收集參數

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // Output: 10

B.在解構數組中使用 Rest

剩餘運算子收集數組解構作業中剩餘的元素。

範例：陣列解構

const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // Output: 1
console.log(second); // Output: 2
console.log(rest); // Output: [3, 4, 5]

C.在解構物件中使用 Rest

剩餘運算子收集物件解構作業中剩餘的屬性。

範例：物件解構

const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // Creates a copy of arr1
console.log(arr2); // Output: [1, 2, 3]

---

3.擴充運算子和剩餘運算子之間的主要差異

Aspect	Spread Operator	Rest Operator
Purpose	Expands elements into individual items	Collects items into a single entity
Use Cases	Copying, merging, passing elements	Collecting function arguments, destructuring
Data Types	Arrays, Objects, Iterables	Arrays, Objects

方面

---

擴充運算子

休息操作員 標題> 目的

將元素擴展為單獨的項目 將項目收集到單一實體 用例 複製、合併、傳遞元素 收集函數參數，解構 資料類型

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // Output: [1, 2, 3, 4, 5, 6]

數組、物件、可迭代 數組、物件 表>

4.實際範例

const numbers = [10, 20, 30];
console.log(Math.max(...numbers)); // Output: 30

---

A.交換數組元素

• B.休息與伸展結合
5.總結

擴充運算子 (...)：將陣列、物件或可迭代物件擴充為單一元素。

Rest Operator (...)

：將多個元素收集到陣列或物件中。 這兩個運算子都使 JavaScript 程式碼更加簡潔和靈活，尤其是在處理陣列、物件和函數參數時。 嗨，我是 Abhay Singh Kathayat！ 我是一名全端開發人員，擁有前端和後端技術的專業知識。我使用各種程式語言和框架來建立高效、可擴展且用戶友好的應用程式。 請隨時透過我的商務電子郵件與我聯繫：kaashshorts28@gmail.com。

以上是掌握 JavaScript 中的展開和剩餘運算符的詳細內容。更多資訊請關注PHP中文網其他相關文章！