ES6 解构赋值，让赋值更简洁

前言

在 ES6 之前，我们只能通过逐一赋值或使用临时变量来从数组和对象中提取值并赋值给变量。这种方式不仅繁琐，而且容易出错。ES6 的解构赋值功能可以让你更轻松、更简洁地完成这些操作，从而使你的代码更加优雅和易读。

数组解构

数组解构允许你将数组中的元素逐一赋值给多个变量。例如，以下代码使用数组解构将数组 [1, 2, 3] 中的元素赋值给变量 a、b 和 c：

const [a, b, c] = [1, 2, 3];

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

你还可以使用数组解构来交换变量的值。例如，以下代码使用数组解构将变量 a 和 b 的值交换：

let a = 1;
let b = 2;

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

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

对象解构

对象解构允许你从对象中提取值并赋值给变量。例如，以下代码使用对象解构将对象 { name: 'John', age: 30 } 中的属性值赋值给变量 name 和 age：

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

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

你还可以使用对象解构来设置默认值。例如，以下代码使用对象解构将对象 { name: 'John' } 中的属性值赋值给变量 name，并为变量 age 设置默认值为 30：

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

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

嵌套解构

ES6 的解构赋值功能还可以用于嵌套的数据结构。例如，以下代码使用嵌套解构将数组 [[1, 2], [3, 4]] 中的元素逐一赋值给变量 a、b、c 和 d：

const [[a, b], [c, d]] = [[1, 2], [3, 4]];

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // 4

结语

ES6 的解构赋值功能可以让你更轻松、更简洁地从数组和对象中提取值并赋值给变量，从而使你的代码更加优雅和易读。通过本文的介绍，你已经掌握了 ES6 解构赋值的基本用法。现在，你可以开始在你的 JavaScript 代码中使用它，以提高代码的可读性和简洁性。