当前位置：首页 > news >正文

解构赋值

news 来源：原创 2025/7/21 5:24:48

【系统学习ES6】

本专题旨在对ES6的常用技术点进行系统性梳理，帮助大家对其有更好的掌握，希望大家有所收获。

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。解构是一种打破数据结构，将其拆分为更小部分的过程。

为何使用解构

传统写法中，从数组或对象中提取特定数据赋值给变量，编写了很多结构相同，变量不同的代码，例如：

let option = {name:'foo',type:'string'
};
let name = option.name;
let type = option.type;

以上代码的作用是，从option对象中提取name和type两个属性，赋值给变量name和type。此时只有两个变量，想象一下，如果有更多变量，那就要依次追加多句赋值。如果其中包含嵌套结构，那就要深入读取层级，才能找到目标变量。

也许是为了解决这种困扰，所以ES6为对象和数组添加了解构功能，在合适的场景下运用，大大减少代码量，提高工作效率。

解构成功的前提，是左右两侧类型一致，即：如果是对象解构，左侧被赋值变量必须包装在{ }内，同理，数组解构，左侧必须是[ ]。

对象解构

上文强调过：对象的解构，左侧必须是{ }。只要左侧的变量在右侧对象中有，即使位置不同，也可被成功赋值，但如果变量在右侧没有与之对应的属性，则会被赋值为undefined。

let option = { name:'foo', type:'string' };
let { name, type } = option;
// let { type, name } = option; // 此句与上句效果相同
console.log(name);  // 'foo'
console.log(type);  // 'string'let { age } = option;
console.log(age);  // undefinedlet { name } = option;
console.log(name); // 'foo'

注意：对象解构前，必须提供初始值（即右侧的对象）。如果右侧没有值，程序会抛异常。

let { name };  // Uncaught SyntaxError:

为非同名变量赋值

如果变量名与对象属性名不一致，可以通过解构对变量赋值么？ES6的另一个拓展语法可以帮助我们。

let option = { name:'foo', type:'string' };
let { name: attrName, type: attrType} = option;
console.log(attrName); // 'foo'
console.log(attrType);  // 'string'

这实际上说明，对象的解构赋值是下面形式的简写：

let { name: attrName, type: attrType} = { name:'foo', type:'string' };

也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

嵌套赋值

可以单层解构赋值，就支持嵌套赋值。前提是左右两边形式一致。

let option = {name: 'foo',type: 'string',start: { row: 1, col: 0 }
};
let { start: { row } } = option;
console.log(row); // 1

数组解构

数组的解构与对象有一个重要的不同。对象的解构按属性名决定的，左右两侧变量位置可以不一致，但变量必须与属性同名，才能取到正确的值。

数组的元素是按顺序排列的，变量的取值由它的位置决定。只要等号两边类型相同（都是数组格式），左侧变量会按照位置关系，被赋予右侧数组的同的值。在这个过程中，右侧数组本身不会发生变化。

let [name, type] = ['foo','string'];
console.log(name);  // 'foo'
console.log(type); // 'string'

嵌套赋值

let [a, [b, c] = [1, [2, 3]];
console.log(name); // 1
console.log(type); // 2
console.log(height); // 3

如果左右形式不一致，可能会直接报错：

let [a] = 1; // Uncaught TypeError: 1 is not iterable

如果右侧数组元素数量比左侧变量多，可以解构成功。属于不完全匹配。

let [a, b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2

如果右侧数组元素数量比左侧变量少，这种情况属于解构失败，解构失败的变量会被赋值为undefined。

let [a, b] = [1];
console.log(a); // 1
console.log(b); // undefinedlet [a, b, ...c] = [1];
console.log(a); // 1
console.log(b); // undefined
console.log(b); // []

此时，b是undefined理解，那c为什么是数组？这不是解构的锅，相关知识点，后面会讨论到。

默认值设置

不管是数组还是对象，解构赋值都允许指定默认值。只有当右侧相应属性或位置的值全等（===）undefined，默认值才会生效。

数组：

let [a = 1] = [];  // a=1
let [a, b = 2] = [1]; // a=1, b=2
let [a, b = 2] = [1, undefined]; // a=1, b=2
let [a, b = 2] = [1, null]; // a=1, b=null
let [a, b = 2] = [1, ""]; // a=1, b=""

对象：

let { name, type = 'string' } = { name: 'foo'}; 
// name:'foo' type:'string'
let { name, type = 'string' } = { name: 'foo', type: undefined}; 
// name:'foo' type:'string'
let { name, type = 'string' } = { name: 'foo', type: null}; 
// name:'foo' type:'null'
let { name, type = 'string' } = { name: 'foo', type: ''};
// name:'foo' type:''

圆括号的妙用

（1）如果要将一个已经声明的变量用于解构赋值，要注意一下写法。

let name = 'bar';
{ name } = { name: 'foo' };
console.log(name); // SyntaxError: syntax error

上面代码会报错，因为 JavaScript 引擎会将{name}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，才能解决这个问题。于是圆括号来了。数组同理。

let name = 'bar';
({ name } = { name: 'foo' });
console.log(name); // 'foo'

字符串解构

字符串也可以解构，这是因为，此时字符串被转换成了一个类似数组的对象。

const [a,b,c,d,e]="lemoncool";
console.log(a); // l
console.log(b); // e
console.log(c); // m
console.log(d); // 0
console.log(e); // n
.....

混合解构

讨论完对象和数组的解构，其实可以基于二者来创造更复杂的表达式解构。比如json中，数组和对象混杂，此时想解析到某个信息。是否可以实现呢？答案是肯定的，前提是格式要对应正确，篇幅有限，此处不再举例。

解构实用场景

解构，除了基础的变量赋值外，用途还有很多。

1、交换变量的值

let x = 1;
let y = 2;
[x, y] = [y, x];

上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。

2、返回多个值

函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。

function example() {return [1, 2, 3];
}
let [a, b, c] = example();

3.引入脚手架中的指定方法

脚手架不想整体引入，可以指定引入某些方法。

import { cloneDeep, random } from 'lodash';

解构赋值

【系统学习ES6】本专题旨在对ES6的常用技术点进行系统性梳理，帮助大家对其有更好的掌握，希望大家有所收获。 ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。解构是一种打破数据结构&#x…...

编程日记 2025/7/21 5:24:48

LeetCode-BFS问题 1.Floodfill问题 1.图像渲染问题 [https://leetcode.cn/problems/flood-fill/description/](https://leetcode.cn/problems/flood-fill/description/) class Solution {public int[][] floodFill(int[][] image, int sr, int sc, int color) {//可以借助另一…...

编程日记 2025/7/15 7:34:11

AI 时代 UI 设计的未来范式

在人工智能技术持续突破的浪潮下，UI 设计领域正经历着前所未有的变革。AI 的深度介入不仅重塑了设计流程，更催生了全新的设计范式，为用户带来颠覆式的交互体验。探索 AI 时代 UI 设计的未来范式，是把握行业发展趋势的关键所在。…...

编程日记 2025/7/21 0:20:03

键盘输出希腊字符方法

在不同操作系统中，输出希腊字母的方法有所不同。以下是针对 Windows 和 macOS 系统的详细方法，以及一些通用技巧： 1.Windows 系统 1.1 使用字符映射表字符映射表是一个内置工具，可以方便地找到并插入希腊字母。 • 步骤&#xf…...

编程日记 2025/7/20 23:57:51

[数据结构高阶]并查集初识、手撕、可以解决哪类问题？

标题：[数据结构高阶]并查集初识、手撕、可以解决哪类问题？ 水墨不写bug 文章目录一、认识并查集二、模拟实现并查集三、用并查集解决问题1、[省份的数量](https://leetcode.cn/problems/number-of-provinces/)2、[等式方程的可满足性](https://leetcode…...

编程日记 2025/7/19 10:40:21

BUUCTF——PYWebsite

BUUCTF——PYWebsite 进入靶场看看基本信息没有什么信息扫个目录看看 http://node5.buuoj.cn:28115/.DS_Store http://node5.buuoj.cn:28115/flag.php http://node5.buuoj.cn:28115/index.html访问flag.php 提示保存购买者的IP 抓包看看直接XFF伪造一下 X-Forwarded-F…...

编程日记 2025/7/19 6:39:32

【学习笔记】机器学习(Machine Learning) | 第六章(2)| 过拟合问题

机器学习（Machine Learning） 简要声明基于吴恩达教授(Andrew Ng)课程视频 BiliBili课程资源文章目录机器学习（Machine Learning）简要声明解决过拟合问题一、收集更多训练数据二、选择特征三、正则化四、过拟合解决方法总结过…...

编程日记 2025/7/15 22:11:45

单片机-STM32部分：13-1、编码器

飞书文档https://x509p6c8to.feishu.cn/wiki/BpEywhaX9iqbiLkdqdAcmDnwnab EC旋转编码器在产品开发过程中，需要位置闭环的的产品，类似电机类产品来说，编码器至关重要，它不仅可以使我们对带年纪进行精确的速度闭环，位…...

编程日记 2025/7/21 0:42:05

浅谈大语言模型原理

1.反向传播算法背景反向传播算法是当前深度学习的核心技术。神经网络 x是输入，o是输出，w是需要训练的参数（w有初始值）三层全连接的神经网络：输入层、隐藏层、输出层激活函数 f ( x ) 1 1 x − 1 f(x)\frac…...

编程日记 2025/7/21 5:24:48

设计模式之中介者模式

在我们实际开发中，我们经常会遇到多个对象之间互相依赖、互相调用的场景。如果这些对象之间的耦合度太高，不仅会让系统变得难以维护，还会让扩展变得异常困难。此时，中介者模式(Mediatro)就是一种非常实用的设计方案，它…...

编程日记 2025/7/18 15:55:08

Matlab 空调温度时延模型的模糊pid控制

1、内容简介 Matlab 231-空调温度时延模型的模糊pid控制可以交流、咨询、答疑 2、内容说明略 3、仿真分析略 4、参考论文略中央空调温湿度采用PID控制系统的探讨.pdf 中央空调房间温度智能 PID控制的仿真研究.pdf...

编程日记 2025/7/12 23:31:28

RabbitMQ ③-Spring使用RabbitMQ

Spring使用RabbitMQ 创建 Spring 项目后，引入依赖：  <dependency><groupId>org.springframework.boot</groupId><artifac…...

编程日记 2025/7/21 0:32:44

C++修炼：模板进阶

Hello大家好！很高兴我们又见面啦！给生活添点passion，开始今天的编程之路！ 我的博客：<但凡. 我的专栏：《编程之路》、《数据结构与算法之美》、《题海拾贝》、《C修炼之路》欢迎点赞，关注&am…...

编程日记 2025/7/21 0:52:07

Spring Boot集成RabbitMQ高级篇：可靠性与性能提升

一、环境准备安装 RabbitMQ 在官网上下载对应操作系统的安装包（如 Windows、Linux 等），按照安装向导完成安装。安装完成后，启动 RabbitMQ 服务。在 Windows 系统下，可以在服务列表中找到 RabbitMQ Server 并启动&am…...

编程日记 2025/7/19 4:04:38

Shell脚本编程3（函数+正则表达式）

1.函数 1.1 定义简单来讲，所谓函数就是把完成特定功能，并且多次使用的一组命令或者语句封装在一个固定的结构中，这个结构我们就叫做函数。从本质上讲，函数是将一个函数名与某个代码块进行映射。也就是说，用户在定义了…...

编程日记 2025/7/21 1:30:40

【C++】语言深处的“精灵”：探索内存的奥妙

这里我们要知道，我们编写一个程序，这个程序中的变量是存储在哪个区域的栈一般是用于静态的分配内存的，但也可以动态的分配内存， 堆是用于动态的分配内存的，不能静态的分配内存栈： 通常是向低地址方向…...

编程日记 2025/7/21 0:02:40

c语言第一个小游戏：贪吃蛇小游戏03

我们为贪吃蛇的节点设置为一个结构体，构成贪吃蛇的身子的话我们使用链表，链表的每一个节点是一个结构体显示贪吃蛇身子的一个节点我们这边node就表示一个蛇的身体就是一小节输出结果如下显示贪吃蛇完整身子效果如下代码实现这个hasSnakeNode(…...

编程日记 2025/7/21 0:05:56

51 单片机头文件 reg51.h 和 reg52.h 详解

51 单片机头文件详解 51 单片机的头文件reg51.h和reg52.h是开发中非常重要的文件，它们定义了单片机的特殊功能寄存器 (SFR) 和位地址。以下是对这两个头文件的详细解析： 1. 头文件概述 reg51.h：针对标准 8051 单片机（4KB ROM, 128B RAM） reg52.h：针对增强型 8052 单片…...

编程日记 2025/7/20 15:03:51

让 - 艾里克・德布尔与斯普林格出版公司：科技变革下的出版业探索

在数字化浪潮席卷全球的当下，传统出版行业面临着前所未有的挑战与机遇。《对话 CTO，驾驭高科技浪潮》的第 10 章聚焦于让 - 艾里克・德布尔（Jean - Eric Debeure）及其所在的斯普林格出版公司（Springer Publishing Comp…...

编程日记 2025/7/19 9:31:02

[python] 面向对象的三大特性-封装及新式类

一继承继承是指一个类（子类）可以继承另一个类（父类）的属性和方法，并可以在其基础上进行扩展或修改。子类可以继承父类的属性和方法,包括私有属性和隐藏属性 💡 核心思想： 避免重复代码&…...

编程日记 2025/7/15 23:44:15

winreg查询Windows注册表的一些基本用法

注册表是Windows操作系统中用于存储配置信息的数据库。它包含了关于系统硬件、已安装的应用程序、用户账户设置以及系统设置的信息。特别地，当我们需要某些软件的配置配息时，主要在HKEY_CURRENT_USER和HKEY_LOCAL_MACHINE下的SoftWare内进行查询操作。 …...

编程日记 2025/7/15 14:09:25

DHCP自动分配IP

DHCP自动分配IP 练习1 路由器 Router>en Router#conf t Router(config)#ip dhcp pool ip10 //创建DHCP地址池 Router(dhcp-config)#network 192.168.20.0 255.255.255.0 // 配置网络地址和子网掩码 Router(dhcp-config)#default-router 192.168.20.254 //配置默认网关 Rou…...

编程日记 2025/7/18 12:50:33

互联网大厂Java求职面试实战：Spring Boot与微服务场景深度解析

💪🏻 1. Python基础专栏，基础知识一网打尽，9.9元买不了吃亏，买不了上当。 Python从入门到精通 😁 2. 毕业设计专栏，毕业季咱们不慌忙，几百款毕业设计等你选。 ❤️ 3. Python爬虫专栏…...

编程日记 2025/7/14 14:08:36

TDengine 在金融领域的应用

简介金融行业正处于数据处理能力革新的关键时期。随着市场数据量的爆炸式增长和复杂性的日益加深，金融机构面临着寻找能够高效处理大规模、高频次以及多样化时序数据的大数据处理系统的迫切需求。这一选择将成为金融机构提高数据处理效率、优化交易响应时间、提高…...

编程日记 2025/7/15 9:39:15

十三、动态对象创建（Dynamic Object Creation）

十三、动态对象创建（Dynamic Object Creation） 目录 13.1 对象创建（Object creation）13.2 new / delete 操作符13.3 数组的 new 与 delete13.4 总结背景说明有时候我们需要知道程序中对象的数量、类型和声明周期，…...

编程日记 2025/7/19 23:49:53

cursor Too many报错显示锁机器码怎么办？也就是Cursor的

22. Too many报错显示锁机器码怎么办？也就是Cursor的文档出自：https://www.kdocs.cn/l/cp5GpLHAWc0p...

编程日记 2025/7/16 4:56:46

window 显示驱动开发-将虚拟地址映射到内存段（二）

在将虚拟地址映射到段的一部分之前，视频内存管理器调用显示微型端口驱动程序的 DxgkDdiAcquireSwizzlingRange 函数，以便驱动程序可以设置用于访问可能重排的分配位的光圈。驱动程序既不能将偏移量更改为访问分配的 PCI 光圈，也不能更改分配…...

编程日记 2025/7/18 20:15:11

Linux 软硬连接详解

目录一、软链接（Symbolic Link） ‌定义与特性 ‌实现方法‌使用 ln -s 命令： 二、硬链接（Hard Link） 1、是什么 2、工作机制 3、实现方式一、软链接（Symbolic Link） ‌定义与特性定义…...

编程日记 2025/7/20 23:58:20

虚拟主机与独立服务器：哪个更好？

在选择网站主机提供商时，你可以选择独立服务器或者与其他用户共同使用的虚拟主机。这个决定不仅仅是基于价格，还有很多其他因素需要考虑。接下来，我们就来详细了解一下虚拟主机和独立服务器的区别。虚拟主机和独立服务器的区别独立服务器是…...

编程日记 2025/7/17 4:11:00

MiMo-7B-RL调研

结论 MiMo 在数学推理和代码竞赛的评测中表现出色，但是相较于 OpenAI 的 o1-mini 和阿里的 QwQ-32B-Preview 等更大规模的模型，推理耗时更长（4 到 10 倍），花费 Token 更多。链接开源地址: https://huggingface.co/…...

编程日记 2025/7/21 0:18:22

vue-i18n 优化

语言包管理优化： 当前语言包文件（en.json 和 zh.json）过大，建议按模块拆分建议的目录结构： src/assets/i18n/ ├── modules/ │ ├── common/ │ ├── dashboard/ │ ├── report/ │ └── system/ …...

编程日记 2025/7/21 3:55:37

全栈工程师实战手册：LuatOS日志系统开发指南！

本文聚焦LuatOS-log库的实战应用场景，通过完整案例演示日志模块集成、格式定制及远程同步方案，帮助全栈开发者构建灵活可靠的日志管理框架。下面，我们一起来认识LuatOS的log库！ 一、 log.info() log info()主要打印一些正常的…...

编程日记 2025/7/20 17:59:58

Java知识库网站整理

本文主要推荐一些高质量的Java知识库和学习网站，涵盖了从基础到高级的Java技术，包括JVM底层原理、框架源码分析、面试题集、全栈知识体系等。如果你有其他优秀的Java学习网站推荐，欢迎在评论区分享！ 如遇到以下网站不能打开请检查…...

编程日记 2025/7/18 15:39:15

详解 IRC协议及客户端工具 WeeChat 的使用

本文将详细介绍 Internet Relay Chat（IRC）协议及其历史、基本概念、核心功能，以及流行的 IRC 客户端 WeeChat 的安装、配置和使用方法。内容力求准确、详尽，涵盖 IRC 的技术背景、使用场景，以及 WeeChat 的高级功能和实…...

编程日记 2025/7/17 12:47:56

数据出境的安全合规思考

数据已成为新型国家战略性资产，其经济和战略价值在全球数字经济发展中愈加凸显。跨境数据流动既是重要的经济纽带，又是新兴的经济秩序博弈焦点，对于推动经济全球化发展意义重大。然而，跨境数据流动也面临诸多问题与挑战&#xff0…...

编程日记 2025/7/20 23:58:04

【技巧】使用frpc点对点安全地内网穿透访问ollama服务

回到目录【技巧】使用frpc点对点安全地内网穿透访问ollama服务 0. 为什么需要部署内网穿透点对点服务在家里想访问单位强劲机器，但是单位机器只能单向访问互联网，互联网无法直接访问到这台机器。通过在云服务器、单位内网服务器、源端访问机器上&am…...

编程日记 2025/7/18 1:05:56

Go语言即时通讯系统开发日志day1

Go语言即时通讯系统开发日志day1，主要模拟实现的一个简单的发送消息和接受消息的小demo，因为也才刚学习go语言的语法，对go的json、net/http库了解不多，所以了解了一下go语言的encoding/json库和net/http库，以及websock…...

编程日记 2025/7/20 21:28:57

多线程访问Servlet如何谨慎处理共享资源

1. 避免共享状态（最佳实践） 核心思想：Servlet 本身应设计为无状态（Stateless），不依赖实例变量存储请求相关数据。实现方式： 将变量声明在方法内部（局部变量）&#xff0…...

编程日记 2025/7/20 10:34:27

OpenMCU(六)：STM32F103开发板功能介绍

概述距上一篇关于STM32F103的FreeRTOS博客的发布已经过去很长时间没有更新了。在这段时间内，大家可以看到博主发表了一系列的关于使用qemu 模拟实现STM32F103的博客，博主本来想借助qemu开发stm32F103相关的一些软件功能，博主开发出来并成功运…...

编程日记 2025/7/20 4:04:45

运用数组和矩阵对数据进行存取和运算——NumPy模块之五

目录 NumPy模块介绍 3.5.1 NumPy 操纵数组元素的逻辑 3.5.2 添加数组元素操作 1. append() 函数 2. insert() 函数 3.5.3 删除数组元素的操作 delete() 函数 3.5.4 数组元素缺失情况的处理 isnan() 函数 3.5.5 处理数组中元素重复情况 unique() 函数 3.5.6 拼接数组操作 1. con…...

编程日记 2025/7/15 15:59:30

AI Agent开发第64课-DIFY和企业现有系统结合实现高可配置的智能零售AI Agent

开篇我们之前花了将近10个篇章讲Dify的一些基础应用，包括在讲Dify之前我们讲到了几十个AI Agent的开发例子，我不知道大家发觉了没有，在AI Agent开发过程中我们经常会伴随着这样的一些问题：需要经常改猫娘；需要经常改调用LLM的参数，甚至在一个流程中有3个节点，每个节点…...

编程日记 2025/7/19 14:43:51

日志 Slf4j , Java 中使用

// 示例代码package biz.baijing.controller;import biz.baijing.pojo.Result; import lombok.extern.slf4j.Slf4j; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.w…...

编程日记 2025/7/18 15:24:06

为何使用解构

对象解构

为非同名变量赋值

嵌套赋值

数组解构

嵌套赋值

默认值设置

圆括号的妙用

字符串解构

混合解构

解构实用场景

相关文章：