ES6扩展运算符

ES6的扩展运算符（Spread Operator）用于在函数调用、数组字面量或对象字面量中解构或展开对象和数组。

数组展开运算符

数组展开运算符可以将数组展开为多个用逗号隔开的参数，方便函数的调用。

const arr1 = [1, 2, 3];
const arr2 = ['a', 'b', 'c'];

const arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 'a', 'b', 'c']

const arr4 = [...arr1, 4, 5, ...arr2];
console.log(arr4); // [1, 2, 3, 4, 5, 'a', 'b', 'c']

对象展开运算符

对象展开运算符可以将对象展开为其他对象的属性，并修改或添加属性。

const obj1 = { name: 'Alice' };
const obj2 = { age: 18 };
const obj3 = { ...obj1, ...obj2 };

console.log(obj3); // { name: 'Alice', age: 18 }

const obj4 = { ...obj1, age: 20 };
console.log(obj4); // { name: 'Alice', age: 20 }

使用展开运算符比较数组/对象

展开运算符还可以用于比较数组和对象是否相同，可以避免使用循环和递归。

const a = [1, 2, 3];
const b = [1, 2, 3];
console.log([...a].toString() === [...b].toString()); // true

const c = { name: 'Alice', age: 18 };
const d = { name: 'Alice', age: 18 };
console.log(JSON.stringify(c) === JSON.stringify(d)); // true

注意事项

当使用展开运算符时，要注意深浅复制的问题。如果要深复制一个数组或对象，需要使用递归或第三方库。

const arr1 = [[1, 2], [3, 4]];
const arr2 = [...arr1];
arr2[0].push(3);
console.log(arr1); // [[1, 2, 3], [3, 4]]
console.log(arr2); // [[1, 2, 3], [3, 4]]

const obj1 = { a: { b: 1 } };
const obj2 = { ...obj1 };
obj2.a.b = 2;
console.log(obj1); // { a: { b: 2 } }
console.log(obj2); // { a: { b: 2 } }

总结

ES6的扩展运算符在函数调用、数组字面量或对象字面量中可以解构或展开对象和数组，并且可以用于比较数组和对象是否相同。但要注意深浅复制的问题，避免产生副作用。