掌握 JavaScript 解构赋值的指南

JavaScript 的解构赋值是一种从数组 or 对象中提取值并将其赋给变量的语法。这种语法让我们从复杂的数据结构中提取数据变得简洁和易读。解构赋值可以用在数组、对象以及嵌套结构中。

解构是:使用 ES6 的一种语法规则,将一个对象或数组的某个属性提取到某个变量中。

解构不会对被解构的目标造成任何影响。

1. 数组解构赋值

数组解构赋值允许我们将数组中的值提取到变量中。基本语法如下:

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

如果数组的某个位置没有值,可以为其设置默认值:

const [x = 1, y = 2] = [10];
console.log(x); // 10
console.log(y); // 2

使用 ... 运算符可以将剩余的元素放入一个数组中:

const [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(rest);  // [2, 3, 4, 5]

2. 对象解构赋值

对象解构赋值允许我们将对象的属性值提取到变量中。基本语法如下:

const { name, age } = { name: 'Alice', age: 18 };
console.log(name); // 'Alice'
console.log(age);  // 18

如果对象中没有指定的属性,可以为其设置默认值:

const { name, age = 30 } = { name: 'Bob' };
console.log(name); // 'Bob'
console.log(age);  // 30

可以给解构出来的属性重新命名:

const { name: fullName, age: years } = { name: 'Charlie', age: 35 };
console.log(fullName); // 'Charlie'
console.log(years);    // 35

可以解构嵌套的对象:

const person = {name: 'Dave',address: {city: 'New York',zip: '10001'}
};const { name, address: { city, zip } } = person;
console.log(name); // 'Dave'
console.log(city); // 'New York'
console.log(zip);  // '10001'

在嵌套解构中设置默认值:

const person = {name: 'Eve',address: {}
};const { name, address: { city = 'Unknown' } } = person;
console.log(name); // 'Eve'
console.log(city); // 'Unknown'

3. 解构赋值在函数参数中的应用

解构赋值可以直接在函数参数中使用,简化函数调用:

function greet({ name, age }) {console.log(`Hello ${name}, you are ${age} years old.`);
}const user = { name: 'Frank', age: 4 };
greet(user); // Hello Frank, you are 4 years old.

4. 解构赋值与变量交换

可以利用解构赋值来交换变量的值: 

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

5. 注意点

5.1 默认值的计算

当使用默认值时,这些默认值是在解构赋值操作时计算的:

const { x = Math.random() } = {};
console.log(x); // 每次运行都可能是不同的值

如果对象中的属性已经有值,则默认值不会被使用,只在目标属性为 undefined 时使用。

const { x = Math.random() } = {x: 10};
console.log(x); // 10
5.2 解构赋值中的 undefined 和 null 

解构赋值仅对 undefined 提供默认值,不对 null 提供。如果对象的属性是 null,默认值不生效。 

const { a = 1 } = { a: null };
console.log(a); // null
5.3  解构赋值的深度

深度解构需要确保每一层的对象结构都存在。否则会引发错误:

const obj = { a: { b: 1 } };
const { a: { b, c = 2 } } = obj;
console.log(b); // 1
console.log(c); // 2// 如果 obj = {},则会抛出错误
// const { a: { b, c = 2 } } = {};

5.4  解构赋值的计算顺序

在对象解构赋值中,计算顺序可能会影响结果:

const obj = { a: 1 };
const { a, b = a } = obj;
console.log(a); // 1
console.log(b); // 1

此处,a 赋值为 1,b 的默认值是 a,因此 b 的值是 1。

const obj = { a: 1, b: 2 };
const { a = 10, b = a } = obj;
console.log(a); // 1
console.log(b); // 2

此处,a 和 b 各自存在值,均不使用默认值。

5.5 解构赋值与函数参数

在函数参数中使用解构赋值时,要确保传入的参数结构与解构的变量名一致:

function func({ a, b }) {console.log(a, b);
}
func({ a: 1, b: 2 }); // 1 2
func({ a: 1 }); // 1 undefined
func({}); // undefined undefined
5.6 解构赋值与函数默认参数

在函数的参数解构中使用默认值时,需要注意函数参数的默认值的顺序:

function func({ a = 1, b = a } = {}) {console.log(a, b);
}
func(); // 1 1
func({ a: 2 }); // 2 2
func({ b: 3 }); // 1 3
5.7 防止解构赋值错误

确保在解构赋值之前检查对象或数组是否存在。如果对象或数组是 null 或 undefined,尝试解构将会引发错误:

let obj = null;
// const { a } = obj; // 这会抛出错误obj = {};
const { a = 1 } = obj;
console.log(a); // 1
5.8 解构赋值中的计算属性名

如果需要解构具有动态计算属性名的对象,确保正确地使用方括号语法:

const key = 'b';
const obj = { a: 1, [key]: 2 };const { [key]: value } = obj;
console.log(value); // 2

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/414143.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaSE-递归法解决二分查找、快速排序

704. 二分查找https://leetcode.cn/problems/binary-search/ package demo;public class BinarySearch {public static void main(String[] args) {BinarySearch brnew BinarySearch();System.out.println(br.search(new int[]{1, 2, 3, 4, 5, 6, 7, 8, 9}, 8));}public int s…

[Tools: LoRA] Diffusers中Stable Diffusion的实现

实现底层原理 Diffusers中的Attention操作实现在AttnProcessor类(diffusers.models.attention_processor.py),里面定义了单次Attention操作。添加LoRA,本质上是用LoRAAttnProcessor类替换AttnProcessor类。LoRAAttnProcessor中新…

浅谈如何入门微信小程序?

一. 何为微信小程序? 1. 微信小程序是一种全新的连接用户与服务的方式 2. 它可以在微信内被便捷地获取和传播,同时具有出色的使用体验 二. 如何开发小程序 1. 开发小程序的第一步: 你需要拥有一个小程序帐号,通过这个帐号你就…

vue如何引入element-ui

2.x用element-ui 3.x用element-plus https://blog.csdn.net/weixin_41207479/article/details/127066333 引入element-ui的三种方式

opencv之形态学

文章目录 1. 什么是形态学2. 形态学操作2.1 腐蚀2.2 膨胀2.3 通用形态学函数2.4 开运算2.5 闭运算2.6 形态学梯度运算2.7 礼帽运算2.8 黑帽运算 1. 什么是形态学 在图像处理领域,形态学是一种基于形状的图像分析技术,用于提取和处理图像的形态特征。这包…

前端与后端的身份认证

这里写目录标题 前端与后端的身份认证Web开发模式服务端渲染的Web开发模式前后端分离的Web开发模式根据场景选择开发模式 身份认证为什么需要身份认证不同开发模式下的身份认证 Session认证机制HTTP协议下的无状态性如何突破HTTP无状态的限制CookieCookie的几大特性&#xff1a…

Cadence高速板设计技巧(全志H3)[四]

HDMI常用的ESD器件: 可以看到一个器件可以做两路差分线的TVS防护: 按W键移动会把导线直接移走,这样显然是不行的: cadence中导线调节用的是快捷键e: 因此,虽然在某些场合下 eMMC 被称为 ROM,但…

Unity(2022.3.41LTS) - 地形

目录 一、地形的创建 二.页面详解 1.创建相邻的 Terrain 瓦片。 2.雕刻和绘制地形。 3.添加树。 4.添加细节,如草地、花朵和岩石。 5.更改所选 Terrain 的常规设置 三、地形编辑工具 四、地形的属性设置 五、地形的优化 六、地形的应用场景 一、地形的创…

C++八股文之语言基础篇

🤖个人主页:晚风相伴-CSDN博客 思维导图链接:C语言基础 持续更新中…… 💖如果觉得内容对你有帮助的话,还请给博主一键三连(点赞💜、收藏🧡、关注💚)吧 &…

vscode c++和cuda开发环境配置

文章目录 1. vscode 插件安装2. 开发环境配置2.1 bear 安装2.2 代码的编译2.2.1 编写Makefile文件2.2.2 bear make和make命令2.3 debug环境配置2.1 函数跳转设置2.1.1 ` c_cpp_properties.json` 设置2.1.2 settings.json设置2.2 调试环境配置2.2.1 tasks.json2.2.2 launch.json…

shell编程之条件语句(if)

目录 一、条件测试 1.1文件测试和整数测试 1.1.1 test命令 1.1.2 文件测试 1.2.3 整数值比较 1.2 字符串测试与逻辑测试 1.2.1 字符串比较 1.2.2 逻辑测试 二、if语句 2.1 if单分支语句 2.2 if双分支语句 2.3 if多分支语句 三、case分支语句 一、条件测试 1.1文件…

微信小程序背景图无法显示

文章目录 不知道有没有人跟我一样,刚接触微信小程序,在写代码的时候,背景图莫名奇妙不显示。 网上有很多解决方法,比如转 base64 ,网络图片地址等等,但我觉得都太麻烦了,这里直接给出我的解决方…

新生在线分班查询,用这个小程序制作仅需一分钟!

今天许多学校已陆续开学,老师们又开始忙碌起来。他们需要将新生的分班信息逐一通知给每位家长,这不仅是一项繁琐的工作,而且效率也不高。传统的方法是通过电话、短信或邮件一一通知,这不仅耗时耗力,还容易出现信息传递…

《大道平渊》· 拾玖 —— 做产品的四大境界

《大道平渊》 【顶级】虚空造物, 无中生有。 【上等】带脑子抄, 模仿, 改进, 超越。 【中等】无脑抄, 一模一样, 疯狂内卷。 【下等】抄都能抄错, 蠢货。 // 题外话:呵呵,很多人照着抄都能抄错,给了模板不会用,项目拆解出来嚼…

React中实现antd自定义图标,鼠标悬浮变色

借助 antd 的 tooltip 组件来实现 hover 时变色的效果 1.新建组件 自定义图标一般在iconfont上面获取,复制下来的svg代码,切记要删除 fill 属性后添加到组件中 import { Tooltip } from "antd"; import React from "react";const …

springboot篇

文章目录 1.题目问答2.配置详情2.1配置文件2.2多环境配置2.3自定义参数2.4命令行参数2.5加载顺序 3.Starter POMs4.监控与管理—actuator4.1. 应用配置类4.1.1./autoconfg4.1.2. /beans4.1.3. /configprops4.1.4 /env4.1.5./mappings4.1.6./info 4.2. 度量指标类4.2.1. /metric…

oceanbase 常用视图查询记录

测试环境:1-1-1 OceanBase 企业版3.2.4.4 查看租户的 Context 和 Modudle 内存 SELECT tenant_id, svr_ip, ctx_id, ctx_name, mod_name, count, round(HOLD / 1024 / 1024, 2) hold_mb, round(used / 1024 / 1024, 2) used_mb FROM oceanbase.__all_virtual_memory…

AI问答:.NET核心组成概要、程序运行步骤和查询SDK版本的方法

.NET三大组成 ①Runtime (运行时): CLR:公共语言运行时,执行程序、内存管理、垃圾回收(GC)、安全性检查、异常处理,是跨平台的关键要素。 JIT:实时编译器,将中间语言…

Java性能优化传奇之旅--Java万亿级性能优化之Java 性能优化传奇:热门技术点亮高效之路

💖💖💖亲爱的朋友们,热烈欢迎你们来到 青云交的博客!能与你们在此邂逅,我满心欢喜,深感无比荣幸。在这个瞬息万变的时代,我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的博客,正是这样一个温暖美好的所在。在这里,你们不仅能够收获既富有趣味又极为实…

持续集成与持续部署(CI/CD)的深入探讨

在现代软件开发中,持续集成(CI)和持续部署(CD)已成为不可或缺的实践。这些方法旨在加快软件交付的速度,同时提高软件的质量和稳定性。通过CI/CD,开发团队可以频繁地将代码更改集成到主分支&…