今天javascript栏目介绍ES6中的Javascript解构。

ES6中的Javascript解构

ES6中的解构特性能让我们从对象（Object）或者是数组（Array）中取值的时候更方便，同时写出来的代码在可读性方面也更强。之前接触过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的解构特性，代码将会变得更简洁，可读性也更高：

立即学习“Java免费学习笔记（深入）”；

let [first, second] = list;复制代码

对象的解构

基础对象解构

首先我们来看看ES6中基本的对象解构应该怎么写：

const family = {	father: ''
	mother: ''}const { father, mother } = family;复制代码

我们从family对象中解构出来了它的两个属性father和mother，并赋值给了另外定义的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对象，原本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复制代码

很多时候我们会想要在后台漏了某个属性的时候，也能解构出一个默认值。那其实可以这么写：

jQuery图片内容展开-收缩选项卡

jQuery图片内容展开/收缩选项卡，点击图片会出现对应的文字解说。兼容主流浏览器，php中文网推荐下载！使用方法： 1、head区域引用以下文件

相关专题

高德地图升级方法汇总

本专题整合了高德地图升级相关教程，阅读专题下面的文章了解更多详细内容。

2026.01.16

全民K歌得高分教程大全

本专题整合了全民K歌得高分技巧汇总，阅读专题下面的文章了解更多详细内容。

2026.01.16

C++ 单元测试与代码质量保障

本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法，包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程，以及常见代码质量问题的发现与修复。通过工程化示例，帮助开发者建立可测试、可维护、高质量的 C++ 项目体系。

2026.01.16