ES6之解构：便捷、灵活的赋值新方式

2023-10-27 04:15:18

1. 对象解构

ES6的解构特性允许我们以一种简洁的方式从对象中提取数据。具体来说，我们可以通过let {属性名} = 对象的形式将对象的属性值赋值给变量。例如：

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

const { name, age } = person;

console.log(name); // 输出: "John"
console.log(age); // 输出: 30

2. 数组解构

ES6中的数组解构同样简单易用。我们可以通过let [元素1, 元素2] = 数组的形式将数组的元素赋值给变量。例如：

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

const [first, second] = numbers;

console.log(first); // 输出: 1
console.log(second); // 输出: 2

3. 函数参数列表解构

ES6的解构特性还可用于函数参数列表。我们可以通过function(参数1, 参数2) {}的形式将函数参数解构成变量。例如：

function printNameAndAge({ name, age }) {
  console.log(`Name: ${name}, Age: ${age}`);
}

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

printNameAndAge(person); // 输出: "Name: John, Age: 30"

4. 扩展运算符

ES6的解构特性还引入了扩展运算符...。扩展运算符可以将数组或对象的元素展开为单独的元素。例如：

const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];

const combinedNumbers = [...numbers1, ...numbers2];

console.log(combinedNumbers); // 输出: [1, 2, 3, 4, 5, 6]