JS ES6 ...扩展运算符

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

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 4
console.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. 交换变量

                  console.log('交换前', a, b);
                  
                  [a, b] = [b, a]; //这样的解构能实现交换
                  
                  console.log('交换后', a, b);" aria-label="复制" data-bs-original-title="复制"></button>
</div>

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

交换前 10 20
交换后 20 10