【转】[JavaScript] … 的用法

猿柒

8个月前更新

180

转自：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"]