ES6 解构赋值详解：对象与数组的高级用法
本文深入解析 ES6 中的解构赋值特性，涵盖对象与数组的解构语法。详细讲解基础解构、未声明对象解构、变量重命名、默认值设置、嵌套对象处理，以及在函数参数中的应用。同时介绍数组解构中的默认值、变量交换技巧及忽略返回值等方法，帮助开发者写出更简洁清晰的 JavaScript 代码。
ES6 解构赋值概述
ES6 引入了解构赋值特性，使从对象或数组中提取值变得更加便捷，同时提升了代码的可读性。熟悉 Python 的开发者对此并不陌生，该特性在 Python 中早已实现。例如在 Python 中，可以通过以下代码进行取值：
lst = [3, 5]
first, second = lst
print(first, second)
变量 first 和 second 分别被赋值为数组中的 3 和 5，这种写法简洁明了。那么在使用此特性之前，我们通常如何从对象或数组中获取值呢？参考以下代码：
let list = [3, 5]
let first = list[0]
let second = list[1]传统方式需要手动指定数组下标，将对应值赋给指定变量。而使用 ES6 解构特性后，代码变得更加简洁且可读性更高：
let [first, second] = list;
对象解构
基础对象解构
首先介绍 ES6 中基本的对象解构写法：
对象解构详解
const family = {
father: ''
mother: ''
}
const { father, mother } = family;
上述代码从 family 对象中解构出 father 和 mother 两个属性，并将它们赋值给同名的新变量。之后，即可直接通过 father 和 mother 变量访问 family 中对应 key 的值。这是对象解构最简单的应用，接下来看更复杂的用法。
解构未声明的对象
在前例中，我们先声明了 family 对象，再通过解构语法获取其值。如果不预先声明对象是否可行呢？参考以下代码：
const { father, mother } = {father: '',mother: ''}
这是可行的。在某些场景下，无需特意声明对象或将其赋值给变量再解构。很多时候，我们可以直接对未声明的对象进行解构操作。
解构对象并重命名变量
我们还可以在解构对象属性后对其进行重命名，例如：
const { father: f, mother:m } = {father: '1',mother: '2'}
console.log(f); // '1'
在上述代码中，对象的 father 属性被解构后重命名为变量 f。与前例相比，这相当于将 father 变量重命名为 f。随后即可使用 f 进行后续操作。
解构默认值
设想一种场景：后端返回一个 family 对象，约定包含 father、mother 和 child 三个属性。获取返回数据并解构这三个属性：
const { father, mother, child } = {father: '1',mother: '2', child: '3'}
看似没有问题，但实际情况往往不如预期。若后端因代码 bug 返回的 family 对象仅包含 mother 和 child，遗漏了 father，经上述代码解构后，father 的值将变为 undefined：
const { father, mother, child } = {father: '1',mother: '2'}
console.log(child) //undefined
当后端遗漏某个属性时，我们仍希望解构出一个默认值。此时可以这样编写代码：
const { father = '1', mother = '2', child = '3'} = {father: '1',mother: '2'}
console.log(child) //'3'
结合前例，你可以在重命名变量的同时设置默认值：
const { father: f = '1', mother: m = '2', child: c = '3'} = {father: '1',mother: '2'}
在函数参数中解构
const family = {
father: ''
mother: ''
}
function log({father}){
console.log(father)
}
log(family)
在函数参数中使用解构方式，可以直接获取传入对象的属性值，无需像以往那样通过 family.father 的方式传入。
解构嵌套对象
前例中 family 的属性仅有一层。若 family 的某些属性值也是对象或数组，如何解构出嵌套对象的属性值？参考以下代码：
const family = {
father: 'mike'
mother: [{
name: 'mary'
}]
}
const { father, mother: [{
name:motherName
}]} = family;
console.log(father); //'mike'
console.log(motherName) //'mary'
数组解构
数组解构的方式与对象非常相似，文章开头已略有提及，但这里仍展示数组解构的一些典型场景。
基础数组解构
数组解构详解
const car = ['AUDI', 'BMW'];
const [audi, bmw] = car;
console.log(audi); // "AUDI"
console.log(bmw); // "BMW"
只要对应数组的位置，即可正确解构出相应的值。
解构默认值
与对象解构的默认值场景类似，在解构数组时，我们常需添加默认值以满足业务需求。
const car = ['AUDI', 'BMW'];
const [audi, bmw, benz = 'BENZ'] = car;
console.log(benz); // "BENZ"
在解构中交换变量
假设现有如下两个变量：
let car1 = 'bmw';
let car2 = 'audi'
若需交换这两个变量，传统做法是：
let temp = car1;
car1 = car2;
car2 = temp;
需要借助一个中间变量来实现。而利用数组解构，实现起来更为简单：
let car1 = 'bmw';
let car2 = 'audi'
[car2, car1] = [car1, car2]
console.log(car1); // 'audi'
console.log(car2); // 'bmw'
若要在一个数组内部完成元素位置交换，例如将 [1,2,3] 交换为 [1,3,2]，可按以下方式实现：
const arr = [1,2,3];
[arr[2], arr[1]] = [arr[1], arr[2]];
console.log(arr); // [1,3,2]
从函数返回结果解构数组
许多函数会返回数组类型的结果，通过数组解构可直接获取值：
functin fun(){
return [1,2,3]
}
let a, b, c;
[a, b, c] = fun();
如果只想获取函数返回数组中的部分值，还可以忽略不需要的值：
functin fun(){
return [1,2,3]
}
let a, c;
[a, , c] = fun();
由此可见，ES6 的解构特性在多种场景下非常实用。希望大家能将解构更多地运用到项目中，使代码更加简单、清晰易懂。
到此这篇关于 ES6 中 JavaScript 解构的实现的文章就介绍到这了，更多相关 ES6 解构内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！
5款主流JS在线运行工具对比：CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑：这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
JavaScript函数定义的三种方式：声明、表达式与箭头函数
2026-11-05 13:50:55