Day06【JS】「...」展开运算符 & 其余运算符

「展开运算符」与「其余运算符」，
两者的表示方式都是 ...，
以下分别说明。

展开运算符

展开运算符（Spread Operator）

• 用来解压缩阵列，把一个阵列展开成个别值
• 属於阵列的浅拷贝
• 在「阵列字面定义」与「函式呼叫」时使用
• 能够把「可迭代（iterable）」或「伪阵列（Array-like）」的物件转变为阵列
  • 可迭代物件：String、Array、TypedArray、Map、Set
  • 伪阵列物件：函式的「arguments」

建议使用展开运算符取代以下语法

• Array.prototype.concat()
• Object.assign()

范例：

const todos =["aaa","bbb","ccc"]

//使用展开运算符
const addTodos =[...todos, "ddd"];
//等同於
const addTodos = todos;
addTodos.push("ddd");

特殊用法：

function sum(a, b, c) {
  return a + b + c
}
const args = [1, 2, 3]
sum(…args) // 6

其余运算符

其余运算符（Rest Operator）

• 在「函式传入参数定义」与「解构赋值（destructuring）」时使用
• 若没有传入实际值，会成为一个空阵列
• 其余运算符必定位於最後一位，并且只能使用一次

其余参数 Rest parameters

将函式参数「剩余的值」组合成一个阵列

• 建议使用其余运算符来代替函式中的 arguments 物件
• 其余参数在传入参数定义中，

解构赋值 destructuring

const [x, ...y] = [1, 2, 3]

console.log(x) //1
console.log(y) //[2,3]

等号左右个数不相等时，会成为空阵列

const [x, y, ...z] = [1]

console.log(x) //1
console.log(y) //undefined
console.log(z) //[]

参考资料

• Day 09: ES6篇: Spread Operator & Rest Operator(展开与其余运算符)