JavaScript展开语法详解

一、简介

展开语法(Spread syntax)，是将数组、string或者（key-value）对象在语法层面展开，用在函数调用和数组构造时，关键字是：...

1、数组

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

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// 用上面的写法，代替下面
console.log(sum(numbers[0], numbers[1], numbers[2]));

// 输出结果: 6

2、时间 - new

// 在 new 表达式中应用
var dateFields = [1970, 0, 1]; // 1970年1月1日
var d = new Date(...dateFields);

3、数组拷贝

// 数组拷贝(copy)
var arr = [1, 2, 3];
var arr2 = [...arr]; // like arr.slice()
arr2.push(4);

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

4、数组拼接

// 正常写法：将 arr2 中所有元素附加到 arr1 后面并返回
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var arr3 = arr1.concat(arr2);

// 使用展开语法:
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var arr3 = [...arr1, ...arr2];

5、对象

// 构造字面量对象时使用展开语法
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 }

---

二、参考链接：

• JavaScript展开语法详解！