一顆藍莓

展開運算子 (Spread Operator) 與其餘運算子 (Rest Operator)

這兩種運算子的寫法都是 ...，對，你沒看錯，就是三個點！

接下來來實際說明使用情境：

展開運算子 (Spread Operator)

用來將舊的陣列或物件複製到新的陣列或物件中，算是淺拷貝 (Shallow Copy) 的一種。

陣列範例

1
2
3
4
5
6
7
const numbers = [1, 2, 3];
const newNumbers = [...number, 4];

console.log(newNumbers);

/* Output:
   [1, 2, 3, 4] */

物件範例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const person = {
    name: 'Blueberry'
};

const newPerson = {
    ...person,
    age: 24
};

console.log(newPerson);

/* Output:
   {
       age: 24,
       name: 'Blueberry'
   } */

其餘運算子 (Rest Operator)

將不確定數量的參數視為一個陣列。

範例示範將多個數字傳入函式，並用 filter 找出 args 陣列中等於 1 的數字：

1
2
3
4
5
6
7
8
const equalOne = (...args) => {
    return args.filter(el => el === 1);
}

console.log(equalOne(1, 2, 3, 4));

/* Output:
   [1] */
文章結束囉～

如果我的文章對你有幫助，可以幫我拍個手，感謝支持！

...
Blueberry
2020-01-11
[Javascript]
Expand all Back to top Go to bottom