JavaScript ES6入门指南：扩展运算符与解构赋值

1. 扩展运算符（...）

扩展运算符（...）允许将数组或对象展开为一个平坦的列表。它可以在多种场景下使用：

• 合并数组：可以使用扩展运算符合并两个或多个数组。例如：

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

const combinedArr = [...arr1, ...arr2];

console.log(combinedArr); // [1, 2, 3, 4, 5, 6]

• 复制数组：可以使用扩展运算符复制数组。例如：

const arr1 = [1, 2, 3];
const copiedArr = [...arr1];

console.log(copiedArr); // [1, 2, 3]

• 传递函数参数：可以使用扩展运算符将数组或对象作为参数传递给函数。例如：

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

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

console.log(sum(...numbers)); // 15

2. 解构赋值

解构赋值是一种从数组或对象中提取数据的语法。它允许将数组或对象的元素分配给变量。

• 数组解构：可以使用解构赋值从数组中提取元素。例如：

const numbers = [1, 2, 3];

const [first, second, third] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(third); // 3

• 对象解构：可以使用解构赋值从对象中提取属性。例如：

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

const {name, age, city} = person;

console.log(name); // John
console.log(age); // 30
console.log(city); // New York

• 默认值：可以在解构赋值中设置默认值。例如：

const person = {
  name: 'John'
};

const {name, age = 30, city = 'New York'} = person;

console.log(name); // John
console.log(age); // 30
console.log(city); // New York

扩展运算符和解构赋值的结合使用

扩展运算符和解构赋值可以结合使用来实现更复杂的赋值操作。例如：

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

const [first, ...rest] = numbers;

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

在这段代码中，我们使用扩展运算符将数组的第一个元素提取出来，并将剩下的元素作为rest数组返回。

总结

扩展运算符和解构赋值是JavaScript ES6中的两个重要特性，它们可以帮助我们更方便地处理数据和对象。通过理解和掌握这些特性，我们可以编写出更简洁、更易读的代码。