ES6对象解构赋值解读

2023-09-22 00:38:54

众所周知，ES6（ES2015）的发布，给JavaScript 提供了一种更方便快捷的方式来处理对象的属性。该机制称为Destructuring（也称为解构赋值）。但是你真的会用吗？你真的了解各种场景下，解构赋值得使用方式吗？本文将通过几个示例，详细地介绍ES6对象解构赋值的使用方法和技巧。

一、基本用法

对象解构

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

const { name, age } = person;

console.log(name); // John Doe
console.log(age); // 30

在上述示例中，我们将person对象的name和age属性解构出来，并分别赋给了name和age变量。这与下面的代码等价：

const name = person.name;
const age = person.age;

数组解构

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

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

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

在上述示例中，我们将numbers数组解构为first、second和rest三个变量。first和second分别被赋予了数组中的第一个和第二个元素，而rest被赋予了数组中剩下的元素。这与下面的代码等价：

const first = numbers[0];
const second = numbers[1];
const rest = numbers.slice(2);

嵌套解构

const person = {
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main Street',
    city: 'Anytown',
    state: 'CA'
  }
};

const { name, age, address: { street, city, state } } = person;

console.log(name); // John Doe
console.log(age); // 30
console.log(street); // 123 Main Street
console.log(city); // Anytown
console.log(state); // CA

在上述示例中，我们将person对象的name、age属性和address对象中的street、city、state属性解构出来，并分别赋给了相应的变量。这与下面的代码等价：

const name = person.name;
const age = person.age;
const street = person.address.street;
const city = person.address.city;
const state = person.address.state;

二、解构赋值的技巧

交换变量的值

let a = 1;
let b = 2;

[a, b] = [b, a];

console.log(a); // 2
console.log(b); // 1

在上述示例中，我们通过解构赋值交换了a和b的值。这与下面的代码等价：

const temp = a;
a = b;
b = temp;

函数参数解构

function sum(a, b) {
  return a + b;
}

const numbers = [1, 2];

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

在上述示例中，我们通过函数参数解构将numbers数组中的元素传递给sum函数的参数a和b。这与下面的代码等价：

function sum(a, b) {
  return a + b;
}

const numbers = [1, 2];

console.log(sum(numbers[0], numbers[1])); // 3

默认值

const person = {
  name: 'John Doe'
};

const { age = 30 } = person;

console.log(age); // 30

在上述示例中，我们为age属性设置了一个默认值30。如果person对象中没有age属性，那么age变量将被赋予默认值30。这与下面的代码等价：

const person = {
  name: 'John Doe'
};

let age = person.age;
if (age === undefined) {
  age = 30;
}

console.log(age); // 30

展开运算符

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

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

在上述示例中，我们使用展开运算符将numbers数组中的元素复制到newNumbers数组中，并添加了4和5两个元素。这与下面的代码等价：

const numbers = [1, 2, 3];
const newNumbers = [];
for (const number of numbers) {
  newNumbers.push(number);
}
newNumbers.push(4);
newNumbers.push(5);

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