JavaScript 中三个点扩展运算符（...）和剩余参数语法的详细解析

在 JavaScript 中，... 是扩展运算符（Spread Operator）或剩余参数（Rest Parameters）语法，根据使用场景的不同，它有着不同的作用。

• 扩展运算符：用于展开数组、对象或函数参数，在数组拼接、对象合并、函数调用等场景中非常有用。
• 剩余参数：用于收集函数的剩余参数或解构赋值中的剩余元素，使函数能够处理不定数量的参数。

1. 扩展运算符

扩展运算符可以将数组展开为单独的元素，常用于数组的拼接、复制等操作

1.1 展开数组

扩展运算符可以将数组展开为单独的元素，常用于数组的拼接、复制等操作。

//1.数组拼接
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArr = [...arr1, ...arr2];
console.log(combinedArr); // 输出: [1, 2, 3, 4, 5, 6]

//2.数组复制
const originalArr = [1, 2, 3];
const copiedArr = [...originalArr];
console.log(copiedArr); // 输出: [1, 2, 3]

1.2 展开对象

扩展运算符可以将对象的属性展开，常用于对象的合并、复制等操作。

//3.对象合并
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combinedObj = { ...obj1, ...obj2 };
console.log(combinedObj); // 输出: { a: 1, b: 2, c: 3, d: 4 }

//4.对象复制
const originalObj = { name: 'John', age: 30 };
const copiedObj = { ...originalObj };
console.log(copiedObj); // 输出: { name: 'John', age: 30 }

1.3 函数调用时展开参数

在函数调用时，可以使用扩展运算符将数组展开为函数的参数。

//5.函数调用时展开参数
function sum(a, b, c) {
    return a + b + c;
}
const numbers = [1, 2, 3];
const result = sum(...numbers);
console.log(result); // 输出: 6

 

2. 剩余参数

2.1 收集函数的剩余参数

在函数定义时，剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

//收集函数的剩余参数
function sumAll(...numbers) {
    let total = 0;
    for (let number of numbers) {
        total += number;
    }
    return total;
}
const result = sumAll(1, 2, 3, 4, 5);
console.log(result); // 输出: 15

2.2 解构赋值中的剩余参数

在解构赋值时，剩余参数可以用来收集剩余的元素。

//数组解构
const [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 输出: 1
console.log(rest); // 输出: [2, 3, 4, 5]

//对象解构
const { a, ...others } = { a: 1, b: 2, c: 3 };
console.log(a); // 输出: 1
console.log(others); // 输出: { b: 2, c: 3 }

 

参考：

https://blog.csdn.net/a1963919036/article/details/146207765

https://blog.csdn.net/YfaWu/article/details/129819716