【转】[JavaScript] ... 的用法

转自：kimi.ai

在 JavaScript 中，... 是一个非常强大的语法符号，称为 扩展运算符（Spread Operator） 或 剩余参数（Rest Parameters），具体用法取决于它出现的上下文环境。以下是它的一些常见用法：

---

1. 扩展运算符（Spread Operator）

当 ... 出现在函数调用、数组或对象字面量中时，它被称为 扩展运算符，用于将数组或对象的元素展开。

1.1 在数组中

• 展开数组元素
  将一个数组的元素展开为单独的值，常用于数组拼接、复制数组等场景。

JavaScript复制

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

// 拼接数组
let combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

// 复制数组
let copy = [...arr1]; // [1, 2, 3]

• 与数组解构结合
  可以用于提取数组的某些部分。

JavaScript复制

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

1.2 在对象中

• 展开对象属性
  将一个对象的属性展开为单独的键值对，常用于对象的浅拷贝或合并对象。

JavaScript复制

let obj1 = { a: 1, b: 2 };
let obj2 = { c: 3, d: 4 };

// 合并对象
let combinedObj = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }

// 复制对象
let copyObj = { ...obj1 }; // { a: 1, b: 2 }

• 覆盖对象属性
  如果对象中有相同的键，后面的键值会覆盖前面的键值。

JavaScript复制

let obj1 = { a: 1, b: 2 };
let obj2 = { b: 3, c: 4 };

let combinedObj = { ...obj1, ...obj2 }; // { a: 1, b: 3, c: 4 }

---

2. 剩余参数（Rest Parameters）

当 ... 出现在函数的参数定义中时，它被称为 剩余参数，用于将函数调用时传入的多余参数收集为一个数组。

2.1 收集函数参数

剩余参数允许你将不定数量的参数收集到一个数组中，方便处理。

JavaScript复制

function sum(...numbers) {
  return numbers.reduce((acc, num) => acc + num, 0);
}

console.log(sum(1, 2, 3)); // 6
console.log(sum(1, 2, 3, 4, 5)); // 15

2.2 与普通参数结合

剩余参数必须是函数参数的最后一个参数，前面可以有普通参数。

JavaScript复制

function logInfo(name, ...args) {
  console.log(`Name: ${name}`);
  console.log(`Additional Info: ${args}`);
}

logInfo("Alice", "Age: 25", "City: New York");
// Name: Alice
// Additional Info: ["Age: 25", "City: New York"]

---

3. 注意事项

• 扩展运算符与剩余参数的区别：扩展运算符用于展开，而剩余参数用于收集。
• 对象展开的浅拷贝问题：使用扩展运算符复制对象时，只是浅拷贝，不会复制嵌套对象的深层结构。
• 性能问题：虽然扩展运算符和剩余参数非常方便，但在处理大量数据时可能会对性能产生影响，需谨慎使用。

---

总之，... 是 JavaScript 中非常灵活且强大的语法，掌握它的用法可以让你的代码更加简洁和高效。