Js - ES6语法 “...”的使用

展开语法(Spread syntax), 可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。

1.将数组迭代变为参数

一般除了使用apply函数外，可以使用该语法对数组参数进行遍历

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// expected output: 6

console.log(sum.apply(null, numbers));
// expected output: 6


function myFunction(x,y,z,v,w){
      console.log(x);
      console.log(y);
      console.log(z);
      console.log(v);
      console.log(w);
    }
    var args = [0,1];
    myFunction(-1,...args,...[7,8])
    // output:-1,0,1,7,8

2.构造函数

var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes']; 
// ["head", "shoulders", "knees", "and", "toes"]

3.数组拷贝

仅能对数组进行浅拷贝，不能对多维数组进行深拷贝

var arr = [1, 2, 3];
var arr2 = [...arr]; // like arr.slice()
arr2.push(4);

// arr2 此时变成 [1, 2, 3, 4]
// arr 不受影响

4.构造字面量对象时使用语法

浅拷贝(Shallow-cloning, 不包含 prototype) 和对象合并, 可以使用更简短的展开语法。

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// 克隆后的对象: { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// 合并后的对象: { foo: "baz", x: 42, y: 13 }