在 JavaScript 开发中，解构赋值是一个非常常用且便捷的操作，我们可以利用解构赋值从数组或者对象中快速提取所需的变量或属性并赋值给变量。
在 ES6 中，项解构（Destructuring）操作尤其引人注目，通过项解构，我们可以从一个数组或对象中提取若干项，并将它们赋值给独立的变量。本篇文章将介绍如何使用 ES6 中的项解构操作方法，希望能对你在日常前端开发中的变量解构有所帮助。
数组项解构
数组项解构，就是将一个数组中的若干项提取出来并赋值给对应的变量。ES6 提供了很多项解构的深度。下面是一些例子：
基本数组解构
const arr = [1, 2, 3]; const [a, b, c] = arr; console.log(a, b, c); // 1 2 3
解构嵌套数组
const arr = [1, [2, 3], 4]; const [a, [b, c], d] = arr; console.log(a, b, c, d); // 1 2 3 4
指定数组解构默认值
const arr = [1, 2]; const [a, b, c = 3] = arr; console.log(a, b, c); // 1 2 3
省略数组项
const arr = [1, 2, 3]; const [, , c] = arr; console.log(c); // 3
交换数组元素
let a = 1; let b = 2; [a, b] = [b, a]; console.log(a, b); // 2 1
对象项解构
对象项解构，就是将一个对象中的若干项提取出来并赋值给对应的变量。ES6 也提供了很多项解构的深度。下面是一些例子：
基本对象解构
const obj = { name: 'Tom', age: 18, sex: 'Male' };
const { name, age, sex } = obj;
console.log(name, age, sex); // Tom 18 Male对象属性别名解构
const obj = { name: 'Tom', age: 18, sex: 'Male' };
const { name: myName, age: myAge, sex: mySex } = obj;
console.log(myName, myAge, mySex); // Tom 18 Male解构嵌套对象
const obj = { name: 'Tom', info: { age: 18, sex: 'Male' } };
const { name, info: { age, sex } } = obj;
console.log(name, age, sex); // Tom 18 Male指定对象解构默认值
const obj = { name: 'Tom', age: 18 };
const { name, age, address = 'Shanghai' } = obj;
console.log(name, age, address); // Tom 18 Shanghai变量赋值解构
// javascriptcn.com 代码示例
const obj = { a: 1, b: 2 };
let { a, b } = obj;
console.log(a, b); // 1 2
a = 3;
b = 4;
console.log(obj); // { a: 1, b: 2 }总结
通过 ES6 中提供的项解构操作方法，我们可以非常方便地从数组或对象中提取所需变量或属性。此外，项解构操作还有很多细节和技巧需要我们注意。在正式项目中多加练习，提高自己的 JavaScript 基础能力，从而能够更好地解决实际开发问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65355c6b7d4982a6ebc16880