四、扩展运算符与剩余参数

扩展运算符（...）是 ES6 引入的一个非常实用的语法特性，它可以将数组或对象展开，也可以用于收集剩余参数。

扩展运算符 ... 用法

数组复制

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

// 验证是深拷贝还是浅拷贝
arr2[0] = 10;
console.log(arr1); // [1, 2, 3] - 原数组不受影响

数组合并

const arr3 = [4, 5, 6];
const arr4 = [...arr1, ...arr3];
console.log(arr4); // [1, 2, 3, 4, 5, 6]

// 与其他元素混合
const arr5 = [0, ...arr1, 4, ...arr3, 7];
console.log(arr5); // [0, 1, 2, 3, 4, 4, 5, 6, 7]

对象复制

const obj1 = { name: 'John', age: 30 };
const obj2 = { ...obj1 };
console.log(obj2); // { name: 'John', age: 30 }

// 验证是深拷贝还是浅拷贝
obj2.name = 'Jane';
console.log(obj1); // { name: 'John', age: 30 } - 原对象不受影响

对象合并

const obj3 = { city: 'New York', country: 'USA' };
const obj4 = { ...obj1, ...obj3 };
console.log(obj4); // { name: 'John', age: 30, city: 'New York', country: 'USA' }

// 同名属性会被后面的覆盖
const obj5 = { name: 'John', age: 30 };
const obj6 = { name: 'Jane', city: 'New York' };
const obj7 = { ...obj5, ...obj6 };
console.log(obj7); // { name: 'Jane', age: 30, city: 'New York' }

剩余参数 ...args

基本用法

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

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

与普通参数结合

function greet(name, ...messages) {
  console.log(`Hello, ${name}!`);
  messages.forEach(message => console.log(message));
}

greet('John', 'How are you?', 'Welcome!', 'Have a nice day!');
// Hello, John!
// How are you?
// Welcome!
// Have a nice day!

与解构赋值结合

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

const { name, age, ...otherInfo } = { name: 'John', age: 30, city: 'New York', country: 'USA' };
console.log(name); // John
console.log(age); // 30
console.log(otherInfo); // { city: 'New York', country: 'USA' }

与 arguments 的区别

特性	arguments	剩余参数
类型	类数组对象	真正的数组
可用方法	需转换为数组才能使用数组方法	可直接使用数组方法
作用域	所有函数都有	仅箭头函数和使用剩余参数语法的函数
可读性	不明确参数个数	明确表示收集剩余参数

示例对比

// 使用 arguments
function oldSum() {
  return Array.from(arguments).reduce((acc, curr) => acc + curr, 0);
}

// 使用剩余参数
function newSum(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(oldSum(1, 2, 3)); // 6
console.log(newSum(1, 2, 3)); // 6

实战：函数传参、数组去重

函数传参

const numbers = [1, 2, 3, 4, 5];

// 传统方式
console.log(Math.max.apply(null, numbers)); // 5

// 使用扩展运算符
console.log(Math.max(...numbers)); // 5

// 传递给构造函数
const date = new Date(...[2023, 0, 1]); // 2023年1月1日
console.log(date);

数组去重

const arrWithDuplicates = [1, 2, 2, 3, 3, 3, 4, 5, 5];
const uniqueArr = [...new Set(arrWithDuplicates)];
console.log(uniqueArr); // [1, 2, 3, 4, 5]

扩展运算符的其他用途

字符串转数组

const str = 'hello';
const strArr = [...str];
console.log(strArr); // ['h', 'e', 'l', 'l', 'o']

NodeList 转数组

// 在浏览器环境中
// const nodeList = document.querySelectorAll('div');
// const nodeArray = [...nodeList];
// console.log(nodeArray); // 转换为真正的数组

函数调用

function foo(a, b, c) {
  console.log(a, b, c);
}

const args = [1, 2, 3];
foo(...args); // 1 2 3

扩展运算符的优势

1. 代码简洁：减少了繁琐的数组和对象操作代码
2. 可读性高：一眼就能看出是展开操作
3. 功能强大：可以用于数组、对象、函数参数等多种场景
4. 与其他 ES6 特性配合：与解构赋值、剩余参数等特性配合使用效果更佳

通过本章节的学习，你已经掌握了扩展运算符和剩余参数的用法。扩展运算符是 ES6 中非常实用的语法特性，可以大大简化代码，提高开发效率。