扩展运算符

扩展运算符

扩展运算符 (…) 允许一个表达式在原地展开，当需要多个参数（比如函数调用时）或者多个值（比如字面量数组）。

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

扩展运算符主要用于函数调用的参数（形参与实参）。

function f(x,y,z){
    closole.log(x+y+z); // 3
}
var args = [0,1,2];
f(...args);

替代 apply() 方法

由于扩展运算符可以展开数组所以不再需要 apply() 方法将数组转为函数的参数。

function f(x,y,z){}
var args = [0,1,2];

f.apply(null, args); // ES5的写法
f(...args); // ES6的写法

扩展运算符的应用

• 复制数组

  // 扩展运算符复制数组 - 深复制
  // let arr2 = [...arr1];
  let [...arr2] = arr1;
  console.log(arr2);
  arr2[2] = 6;
  console.log(arr2, arr1);
  

• 合并数组

  let arr1 = [1, 2, 3];
  let arr2 = [4, 5, 6];
  // ES5合并数组的方法
  console.log(arr1.concat(arr2)); // [ 1, 2, 3, 4, 5, 6 ]
  // ES6合并数组的方法(利用扩展运算符)
  console.log([...arr1, ...arr2]); // [ 1, 2, 3, 4, 5, 6 ]
  

• 与解构赋值结合

  const list = [1,2,3,4,5];
  // ES5
  console.log(a = list[0], rest = list.slice(1));
  // ES6
  console.log([a, ...rest] = list)
  

  如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

• 字符串转换为数组

  console.log([..."hello"]); // [ 'h', 'e', 'l', 'l', 'o' ]