【ES6复习】扩展运算和剩余操作符

ES6语法糖，使用 ... 操作符对数组或对象进行展开或者收集，他可以使你的代码更加简洁优雅。

扩展运算符的使用

扩展运算也叫做展开操作，它能够把一个数组或者对象里面的值展开。

• 数组或对象的复制，类似Object.assign都是浅拷贝

  // 数组
  let arr = [1, 2, 3],
      // 展开操作
      newArr = [...arr];
  
  arr !== newArr;
  
  // 对象
  let obj = {foo: 1},
      newObj = {...obj};
  
  obj !== newObj;

• 数组或对象的合并

  let a1 = [1,2,3],
      a2 = [4,5,6];
  
  let a = [...a1, ...a2];

• 类数组转换成数组

  function fn() {
    // 把arguments对象转换成一个数组，   也可以用后面的剩余操作符直接产生一个数组
    let arr = [...arguments];
    console.log(arr)
  }
  
  fn(1,2,3)

• 更好的apply解决方案

  function add(a, b, c) {
    console.log(a + b + c)
  }
  
  const arr = [1, 2, 3]
  
  // 使用 apply
  fn.apply(null, arr)
  
  // 使用 扩展运算
  fn(...arr)

剩余操作符的使用

同样是使用 ... ，和扩展运算符不同的是，它能够把多个值进行收集，并保存到一个变量。

• 对多余参数进行接收

  let [a1, ...last] = [1, 2, 3];
  // a1 = 1
  // last = [2, 3]
  
  
  let {a, ...last} = { a: 1, b: 2, c: 3 };
  // a = 1
  // last = {b:2, c:3}
  
  // 在函数中使用 替代argument的使用
  function fn(..arr) {
    console.log(arr)
  }
  
  fn(1,2,3)

• 结合解构复制，可以更好的使用变量复制，以及参数的默认值操作

  // z 会接收函数第一个参数初x、y属性以外的属性作为一个对象
  // others 会接收foo函数以外的其他参数左右一个数组
  function foo({x, y = 5, ...z} = {}, ...others) {
      console.log(x, y, z, others);
  }
  
  foo({x: 0}); // x=0 y=5 z={} others=[]
  foo({x: 0, y: 1, m: 2, n: 3}); // x=0 y=1 z={m:2,n:3} others=[]
  foo({x: 0, y: 1, m: 2, n: 3}, 7, 8); // x=0 y=1 z={m:2,n:3} others=[7, 8]

• 注意事项
  ⚠️进行剩余操作之后不能在继续解构赋值，如下：

  let arr = [1, 2, 3, 4];
  
  // 正确
  let [a, ...b] = arr;
  
  // 错误 Rest element must be last element
  let [a, ...b, c] = arr;
  
  // 错误(在函数中使用) Rest element must be last element
  ((a, ...b, c)=>{
      // ...
  })(...arr)