用于数组数据获取 和 数据解构合并, 还可用来替换变量值

1. 数据合并

1.1 合并数组

let a = [1, 2, ,4, 4];let b = [2, 3, 4];console.log(a);      // [1, 2, empty, 4, 4]console.log(...a);   // 1 2 undefined 4 4console.log([...a, ...b]);   // [1, 2, undefined, 4, 4, 2, 3, 4]

1.2 合并对象

const obj1 = { a: 1, b: 2 };const obj2 = { c: 1, d: 2 };const obj3 = { ...obj1, ...obj2 };console.log(obj3);

输入

{ a: 1, b: 2, c: 1, d: 2 }
1.2.1 ...扩大运算符混合和键值对应用
const obj1 = { a: 1, b: 2 };const obj2 = { c: 1, d: 2 };const obj3 = { ...obj1, ...obj2, e: 1, f: 2 };console.log(obj3);

输入

{ a: 1, b: 2, c: 1, d: 2, e: 1, f: 2 }

2. 数据解构

用于数组，对象间接应用的话会报错

2.1 数组解构

const arr = [1, 2, 3];console.log(...arr);

输入

1 2 3
2.1.1 混合应用
const arr = [1, 2, 3];console.log([...arr, 4, 5, 6]);

输入

[ 1, 2, 3, 4, 5, 6 ]

2.2 对象解构

对象间接应用的话会报错

注：对象应用的话必须在外层增加 { } ，否则会报错

2.2.1 正确应用

例子

const obj = { a: 1, b: 2 };console.log({ ...obj });

输入如下

{a: 1, b: 2}
注：对象应用的话必须在外层增加 { } ，否则会报错
2.2.2 谬误应用

例子

const obj = { a: 1, b: 2 };console.log(...obj);

输入如下

3. 替换变量

let a = 10;let b = 20;console.log('替换前', a, b);[a, b] = [b, a]; //这样的解构能实现替换console.log('替换后', a, b);

输入

替换前 10 20替换后 20 10