拓展运算符和剩余参数

在JavaScript中，扩展运算符（...）和剩余参数（也是用 ... 表示）是紧密相关但用途不同的两个概念。以下为你详细解析，方便面试作答：

定义与外观 ：扩展运算符（...）用于在函数调用、数组字面量或对象字面量中展开数组或对象的元素或属性。
在数组中的应用 ：
- 数组展开 ：将数组展开成独立元素，常用于函数调用场景。例如，Math.min() 函数接收多个数字参数并返回最小值，若已有数字数组，可借助扩展运算符实现功能。

javascript 复制代码

let numbers = [3, 5, 1];
let minNumber = Math.min(...numbers);
console.log(minNumber);

这里 ...numbers 将数组 numbers 展开为 3, 5, 1，作为 Math.min() 的参数，如同直接传递这些数字。 - 数组合并：简洁地合并多个数组。

javascript 复制代码

let arr1 = [1, 2];
let arr2 = [3, 4];
let combinedArray = [...arr1, ...arr2];
console.log(combinedArray);

通过 ...arr1 和 ...arr2，将两个数组合并为 [1, 2, 3, 4]，相比 concat() 方法，代码更简洁，合并多个数组时优势明显。 - 数组复制：实现数组浅拷贝。

javascript 复制代码

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

copiedArray 是 originalArray 的浅拷贝，两个数组内容相同但内存独立，修改其中一个不影响另一个。

javascript 复制代码

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

...obj1 将 obj1 的属性 a 和 b 展开到 obj2 中，再添加新属性 c，最终 obj2 为 { a: 1, b: 2, c: 3 }。 - 对象合并：合并多个对象。

javascript 复制代码

let objA = { x: 10 };
let objB = { y: 20 };
let mergedObj = { ...objA, ...objB };
console.log(mergedObj);

mergedObj 合并了 objA 和 objB 的属性，若有相同属性名，后面对象的属性会覆盖前面对象的属性。

javascript 复制代码

function sum(...nums) {
    return nums.reduce((acc, num) => acc + num, 0);
}
let result = sum(1, 2, 3);
console.log(result);

这里 ...nums 收集了所有传递给 sum() 函数的参数，无论参数个数，都能方便处理。与 arguments 对象相比，剩余参数是真正的数组，具备数组的方法，使用更便捷直观。 - 函数参数解构：在函数参数解构时，剩余参数可收集未匹配的参数。

javascript 复制代码

function showArgs([a, b,...rest]) {
    console.log(a); 
    console.log(b); 
    console.log(rest); 
}
showArgs([1, 2, 3, 4]);

在这个例子中，a 匹配数组第一个元素 1，b 匹配第二个元素 2，...rest 收集剩余元素 [3, 4]。