深入理解JavaScript展开运算符（附Demo）

1. 基本知识

JavaScript ES6中的一个特色

• 由三个点（...）组成，主要用于数组和对象的操作
• 可以将数组或对象的元素展开到另外一个数组或对象中

数组中的展开运算符：(将数组中的元素展开为单独的元素)

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

对象中的展开运算符：（将一个对象的所有可枚举属性拷贝到一个新对象中）

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

2. Demo

• 合并数组：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArray = [...arr1, ...arr2];
console.log(mergedArray); // [1, 2, 3, 4, 5, 6]

• 拷贝数组：

const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];
console.log(copiedArray); // [1, 2, 3]

• 传递函数参数：（将数组元素作为独立的参数传递给函数）

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

const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

• 合并对象：（展开运算符，可以合并多个对象）

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

• 拷贝对象：（拷贝一个对象）

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

• 数组合并并添加新元素：（合并数组的同时添加新的元素）

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArray = [0, ...arr1, ...arr2, 7];
console.log(combinedArray); // [0, 1, 2, 3, 4, 5, 6, 7]

• 对象合并并覆盖属性：（有相同的属性，后面的属性会覆盖前面的）

// obj2的b属性覆盖了obj1的b属性
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const combinedObject = { ...obj1, ...obj2 };
console.log(combinedObject); // { a: 1, b: 3, c: 4 }

3. 总结

优点	描述
合并数组和对象	可以轻松地合并多个数组或对象。
拷贝数组和对象	方便地进行浅拷贝操作，不需要使用Object.assign或其他方法。
传递函数参数	将数组元素作为独立的参数传递给函数

缺点	描述
浅拷贝	只进行浅拷贝，对于嵌套的引用类型（如对象或数组）只拷贝引用，不会深层次地拷贝内容
不可枚举属性	只拷贝对象的自身可枚举属性，不会拷贝继承的或不可枚举的属性
顺序问题	合并对象时，如果有相同的属性，后面的属性会覆盖前面的属性，可能会导致意外的覆盖

不可枚举属性：

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

浅拷贝：

const originalArray = [{ a: 1 }, { b: 2 }];
const copiedArray = [...originalArray];
copiedArray[0].a = 99;
console.log(originalArray[0].a); // 99