前言

Spread Operator (展開運算符) 是 ES6 引入的強大功能, 使用三個點 ... 來表示. 它可以展開陣列或物件, 讓程式碼更簡潔易讀.

Spread Operator 是什麼?

在 JavaScript 中, Spread operator 是一個用來展開 array 或 object 的運算符號, 可以分解成單獨的元素, 讓它們可以被傳遞到函式或者陣列中. 好處是可以簡化程式碼, 使其簡潔易讀.

陣列的應用

展開陣列

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6];

console.log(arr2); // [1, 2, 3, 4, 5, 6]

將兩個陣列合併

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];

console.log(arr3); // [1, 2, 3, 4, 5, 6]

在函式中傳遞陣列

function myFunction(x, y, z) {
  console.log(x + y + z);
}

const arr = [1, 2, 3];

myFunction(...arr); // 6

複製陣列

const arr1 = [1, 2, 3];
const arr2 = [...arr1];

console.log(arr2); // [1, 2, 3]

物件的應用

展開物件

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };

console.log(obj2); // { a: 1, b: 2, c: 3 }

將原物件屬性取代為新值

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, a: 3 };

console.log(obj2); // { a: 3, b: 2 }

總結

Spread Operator 是 JavaScript 中非常實用的語法, 無論是複製陣列、合併陣列、還是操作物件, 都能讓程式碼更加簡潔. 建議在日常開發中多加利用這個強大的功能.