uncategorized

分散 / 其餘(Spread/Rest)

es6, rest, spread

ES6 引進一個新的 … 運算子(你沒看錯，就是三個點)，它通常被稱為 spread(分散) 或 rest(其餘) 運算子，取決於被使用的時機與方式。

分散(Spread)

分散(spread)用於將 陣列 展開為個別的值。

1
2
3
const numbers = [1, 2, 3]
const newNumbers = [...numbers, 4]
console.log(newNumbers) //[1, 2, 3, 4]

也可拿來複製物件屬性

1
2
3
4
5
6
7
8
const person = {
  name: 'Tony'
}
const newPerson = {
  ...person,
  age: 20
}
console.log(newPerson) // {name: 'Tony', age 20}

注意，spread 在 object 是拿來複製屬性 property，所以相同屬性會後者覆蓋前者！！

1
2
3
4
const thunder = { C:'Adams', PF:'Grant', PG:'Westbrook'};
const sonics = { C:'Perkins', PF:'Kemp', PG:'Payton'};
const teams = { ...thunder, ...sonics }
console.log(teams) //{ C:'Perkins',PF: 'Kemp', PG: 'Payton'};

可能會有些人以為 console.log(teams) 會印出{ C:’Adams’,PF:’Grant’, PG:’Westbrook’, C:’Perkins’, PF:’Kemp’, PG:’Payton’ }，但其實這是一個大陷阱，因為 …sonics 的屬性會覆蓋掉前者 …thunder 的屬性，所以最後印出的結果是{ C:’Perkins’,PF: ‘Kemp’, PG: ‘Payton’}。

在函數調用時，我們也可以用 spread 

1
2
3
function myFunction(x, y, z) { }
var args = [0, 1, 2]
myFunction(...args)

在 ES5 時，想要將 array 新增至另一個 array 時，只能用 push, splice, concat 等方法，現在我們可以用 spread 輕鬆的完成這些事。

1
2
3
var girls = ['Stacy'，'Mary'] 
var friends = ['Tommy'，...girls，'Wong'，'Gary'] 
// ["Tommy", "Stacy", "Mary", "Wong", "Gary"]

其餘(Rest)

另一個用法被視為是相反的動作，它不是分散值，而是將一組值 聚集 為一個 陣列。

在以下程式碼中，…z 表示將 其餘 的引數聚集為一個叫做 z 的陣列。因為 x 被指定為 1，y 被指定為 2，剩下的 3, 4, 5 就會被聚集成名為 z 的陣列。

1
2
3
4
function foo(x, y, ...z){
  console.log(x, y, z)
}
foo(1, 2, 3, 4, 5) //1 2 [3, 4, 5]

現在我們知道 rest 可以將引數聚集成一個陣列，所以我們也可把它用在需要陣列的方法中，例如 map(), filter()…等。

1
2
3
4
const twice = (...args) => {
  return args.map((i) => i*2)  //引數1,2,3
}
console.log(twice(1, 2, 3)) // [2, 4, 6]

總結

  • 分散(spread) 用於 陣列字面 與 函式呼叫
    1
    2
    const a = [...arr, b]
    f(...arr)
  • 其餘(rest)) 用於 函式傳入參數設定 與 解構賦值
    1
    2
    function f(...arr){}
    const[a, ...b] = [1, 2, 3]

參考連結:
React 16 - The Complete Guide
MDN - 展开语法
ES6篇: Spread Operator & Rest Operator(展開與其餘運算符)
ECMAScript 6 入门
你所不知道的JS：ES6與未來發展

Share