5.4 扩展运算符（...）的应用

5.4 扩展运算符（...）的应用

扩展运算符（Spread Operator）是 ES6 引入的一种语法，用于展开数组、对象或函数参数。它极大地简化了数组和对象的操作，使代码更简洁、更易读。本节将详细介绍扩展运算符的用法及其常见应用场景。

5.4.1 扩展运算符的基本用法

扩展运算符使用三个点（...）表示，可以用于数组、对象和函数参数。

1. 展开数组

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];
console.log(newNumbers); // 输出 [1, 2, 3, 4, 5]

2. 展开对象

const person = { name: "Alice", age: 25 };
const updatedPerson = { ...person, age: 26 };
console.log(updatedPerson); // 输出 { name: "Alice", age: 26 }

3. 展开函数参数

function sum(a, b, c) {
  return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 输出 6

5.4.2 扩展运算符的常见应用场景

1. 复制数组或对象
扩展运算符可以用于浅拷贝数组或对象：

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

const originalObject = { name: "Alice", age: 25 };
const copiedObject = { ...originalObject };
console.log(copiedObject); // 输出 { name: "Alice", age: 25 }

2. 合并数组或对象
扩展运算符可以用于合并多个数组或对象：

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

const obj1 = { name: "Alice" };
const obj2 = { age: 25 };
const mergedObject = { ...obj1, ...obj2 };
console.log(mergedObject); // 输出 { name: "Alice", age: 25 }

3. 函数参数展开
扩展运算符可以将数组展开为函数的参数：

function greet(name, age) {
  console.log(`Hello, ${name}! You are ${age} years old.`);
}
const args = ["Alice", 25];
greet(...args); // 输出 "Hello, Alice! You are 25 years old."

4. 解构赋值
扩展运算符可以与解构赋值结合使用：

const [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 输出 1
console.log(rest); // 输出 [2, 3, 4]

const { name, ...details } = { name: "Alice", age: 25, job: "Engineer" };
console.log(name); // 输出 "Alice"
console.log(details); // 输出 { age: 25, job: "Engineer" }

5. 创建新数组或对象
扩展运算符可以用于创建新的数组或对象，同时添加新元素或属性：

const numbers = [1, 2, 3];
const newNumbers = [0, ...numbers, 4];
console.log(newNumbers); // 输出 [0, 1, 2, 3, 4]

const person = { name: "Alice", age: 25 };
const updatedPerson = { ...person, job: "Engineer" };
console.log(updatedPerson); // 输出 { name: "Alice", age: 25, job: "Engineer" }

5.4.3 注意事项

• 浅拷贝：扩展运算符只能进行浅拷贝，嵌套对象或数组不会被深拷贝。
• 对象属性覆盖：如果对象中有相同的属性，后面的属性会覆盖前面的属性：

  const obj1 = { name: "Alice", age: 25 };
  const obj2 = { age: 26, job: "Engineer" };
  const mergedObject = { ...obj1, ...obj2 };
  console.log(mergedObject); // 输出 { name: "Alice", age: 26, job: "Engineer" }
  

5.4.4 示例代码

示例 1：复制数组

const original = [1, 2, 3];
const copy = [...original];
console.log(copy); // 输出 [1, 2, 3]

示例 2：合并对象

const defaults = { theme: "light", fontSize: 12 };
const userSettings = { fontSize: 14, showNotifications: true };
const finalSettings = { ...defaults, ...userSettings };
console.log(finalSettings); // 输出 { theme: "light", fontSize: 14, showNotifications: true }

示例 3：函数参数展开

function multiply(a, b, c) {
  return a * b * c;
}
const numbers = [2, 3, 4];
console.log(multiply(...numbers)); // 输出 24

5.4.5 总结

• 扩展运算符：用于展开数组、对象或函数参数。
• 常见应用：复制数组或对象、合并数组或对象、函数参数展开、解构赋值。
• 注意事项：扩展运算符只能进行浅拷贝，对象属性可能会被覆盖。

通过掌握扩展运算符的用法，你可以编写更简洁、更灵活的代码。在接下来的学习中，我们将继续探索 JavaScript 的其他高级特性。

思考题：

1. 扩展运算符与 Object.assign 的区别是什么？
2. 如何实现对象的深拷贝？
3. 在什么情况下应该使用扩展运算符而不是传统的数组或对象操作方法？