关于前端: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. 替换变量

let a = 10;
let b = 20;

console.log('替换前', a, b);

[a, b] = [b, a]; // 这样的解构能实现替换

console.log('替换后', a, b);

输入

 替换前 10 20
替换后 20 10