ES6之对象解构

news2025/7/9 12:15:08

对象和数组字面量是JavaScript中两种最常用的数据结构,由于JSON数据格式的普及,二者已经成为语言中最重要的一部分。在代码中,我们经常定义很多对象和数组,然后从去提取相关的信息片段,ES6为简化这种任务引入了新特性:解构(destructuring assignment)。比如

let a, b, rest;
[a, b] = [10, 20];

console.log(a);
// expected output: 10

console.log(b);
// expected output: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// expected output: Array [30,40,50]

执行结果如下
在这里插入图片描述

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

为何使用解构功能

在ES5以及早起版本中,开发者为了从对象和数组中获取特定数据并赋值给变量,需要编写许多看起来同质化的代码,比如

let options = {
    repeat: true,
    save: false
};
// 从对象中提取数据
let repeat = options.repeat,
    save = options.save;

从options对象中提取repeat和save的值然后将其存储到同名的局部变量,提取的过程极其相似,如果需要提取更多变量,则必须一次编写更多类似的代码来为变量赋值,如果其中还包含嵌套解构,只靠遍历时找不到真实信息的,必须要深入挖掘整个数据结构才能找到所需数据。所以ES6为对象和数组都添加了解构功能,将数据结构打散的过程变得更加简单,可以从打散后更小的部分获取所需信息。

对象解构

对象解构的语法形式是在赋值操作符左边放置一个对象字面量,例如上面的示例修改如下

let options = {
    repeat: true,
    save: false
};
// 从对象中提取数据
let { repeat, save } = options;
// true
console.log(repeat);
// false
console.log(save);

在这段代码中,options.repeat的值被存储在名为repeat的变量中,options.save的值被存储在名为save的变量中。
如果使用var、let或const解构声明变量,则必须提供初始化程序(也就是等号右侧的值),否则会抛出如下异常:Uncaught SyntaxError: Missing initializer in destructuring declaration
在这里插入图片描述

解构赋值

除了可以在定义变量时使用解构语法,也可以在定义变量之后通过解构语法修改值。

let options = {
    repeat: true,
    save: false
}, repeat = false, save = true;
// 从对象中提取数据
({ repeat, save } = options);
// true
console.log(repeat);
// false
console.log(save);

在这里通过解构赋值的方法从options对象中提取值重新为变量赋值。但是要注意,一定要用一对小括号来包裹解构赋值语句。

JavaScript引擎将一对开放的花括号视为一个代码块。而语法规定,代码块语句不允许出现在赋值语句左侧,添加小括号之后可以将块语句转化为一个表达式,从而实现了整个解构赋值的过程。

解构赋值表达式的值与表达式右侧的值相等。如此一来,在任何可以使用值的地方都可以使用解构赋值表达式。想象一下给函数传递参数值的过程:

let options = {
    repeat: true,
    save: false
}, repeat = false, save = true;
function output(value) {
    console.log(value === options);
}
output({ repeat, save } = options)

调用output函数时传入一个解构表达式,由于JavaScript表达式的值为右边的值,因此此处传入的参数等同于options,且变量repeat和save被重新赋值,最终将options传入了output函数。

解构赋值表达式(也就是右侧的表达式)为null或undefined会导致程序抛出错误。也就是说,任何尝试读取null或undefined的属性的行为都会触发运行时错误。
在这里插入图片描述

默认值

使用解构赋值表达式时,如果指定的局部变量名称在对象中不存在,那么这个局部变量会被赋值为undefined,比如

let options = {
    repeat: true,
    save: false
};


let { repeat, save, value } = options;
// true
console.log(repeat);
// false
console.log(save);
// undefined
console.log(value);

这段代码额外定义了一个局部变量value,然后尝试为它赋值,然而在options对象上,没有对应名称的属性值,所以像预期中的那样最终它的值为undefined。

当指定的属性不存在时,可以随意定义一个默认值,在属性名称后添加一个等号和相应的默认值即可。

let options = {
    repeat: true,
    save: false
};


let { repeat, save, value = true } = options;
// true
console.log(repeat);
// false
console.log(save);
// true
console.log(value);

在上面的案例中,为变量value设置的默认值true,只有当options上没有该属性或者该属性位undefined时该值才生效。此处没有options.value属性,所以value使用了预设的默认值。

如果对象中属性值为null,默认值是不会起效的。因为null在这里也是被视为有效值。
在这里插入图片描述

为非同名局部变量赋值

在前面的案例中,解构赋值使用的都是与对象属性同名的局部变量,但如果希望使用不同命名的局部变量来存储对象属性的值。ES6中的扩展语法可以满足需求,这个语法与完整的对象字面量属性初始化程序很像。

let options = {
    repeat: true,
    save: false
};

let { repeat: localRepeat, save: localSave } = options;
// true
console.log(localRepeat);
// false
console.log(localSave);

这段代码使用了解构赋值来声明变量localRepeat和localSave,这两个变量分别包含options.repeat和options.save属性的值。 repeat: localRepeat语法的含义时读取名为repeat的属性并将其值存储在变量localRepeat中。这种语法实际上与传统对象字面量的语法相悖,原来的语法名称在冒号左边,值在右边。现在变量名称在冒号右边,而需要读取的位置在左边。

当时用其他变量名赋值时也可以使用默认值,只需要在变量名后面添加等号和默认值即可。

let options = {
    repeat: true,
    // save: false
};

let { repeat: localRepeat, save: localSave = true } = options;
// true
console.log(localRepeat);
// true
console.log(localSave);

嵌套对象解构

解构嵌套对象仍然与对象字面量的语法相似,可以将对象拆解以获取你想要的信息

let options = {
    repeat: true,
    // save: false
    loc: {
        start: {
            line: 1, column: 1
        },
        end: {
            line: 1, column: 4
        }
    }
};

let { loc: { start } } = options;
// 1
console.log(start.line);
// 1
console.log(start.column);

在这个示例中,我们在解构模式中使用了花括号,其含义时在找到了options对象中的loc属性后,应该深入一层继续查找start属性。在上面的解构示例中,所有冒号前的标识符都代表了对象中的检索位置,其右侧为被赋值的变量名:如果冒号后是花括号,则意味着要赋予的最终值嵌套在对象内部更深的层次中。
也可以使用一个与对象属性名不同的局部变量名,比如

let options = {
    repeat: true,
    // save: false
    loc: {
        start: {
            line: 1, column: 1
        },
        end: {
            line: 1, column: 4
        }
    }
};

let { loc: { start: localStart } } = options;
// 1
console.log(localStart.line);
// 1
console.log(localStart.column);

在这个版本中,options.loc.start被存储在了新的局部变量localStart中,解构模式可以应用于任意层级深度的对象,且每一层都具备同等的功能。比如

let options = {
    repeat: true,
    // save: false
    loc: {
        start: {
            line: 1, column: 1
        },
        end: {
            line: 1, column: 4
        }
    }
};

let { loc: { start: { line: localLine } } } = options;
// 1
console.log(localLine);

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

猿代码浅谈MPI与OpenMP并行程序设计

一、什么是OpenMP? OpenMP是一种用于共享内存并行系统的多线程程序设计的库(Compiler Directive),特别适合于多核CPU上的并行程序开发设计。它支持的语言包括:C语言、C、Fortran;不过,用以上这些语言进行程序开发时,并非需要特别…

一文读懂qt界面设计(分裂器,布局,拉伸,各种属性设置)

可以先看看我这个文章:qt关于界面设计中的一些知识总结_我是标同学的博客-CSDN博客_qt 水平伸展 现在我们来正式开始讲解。 布局种类 qt中能称为布局管理器的有如下6个: 水平布局(QHBoxLayout)垂直布局(QVBoxLayout…

数字电路基础04(查找表LUT)

文章目录 LUT(Look Up Table)为什么要用LUT?示例(3输入LUT)LUT(Look Up Table) 在FPGA中,利用LUT来实现组合逻辑的功能,将组合逻辑的输入输出结果,存储为真值表的形式,来代替传统的由逻辑门组成的组合逻辑电路LUT就是将组合逻辑转换成真值表LUT实际上是将输入数据作…

怎么清理c盘的垃圾文件?有什么好的清理方法推荐?

在使用电脑办公或者娱乐的时候,我们的电脑会产生很多临时文件,如果这些临时文件不被清理掉的话,就会导致电脑的运行速度越来越慢,为了能够让电脑的速度越来越快,很多人都会想要清理C盘,但是在清理C盘的时候…

机器视觉(三):摄像机标定技术

目录: 机器视觉(二):机器视觉硬件技术 机器视觉(三):摄像机标定技术 🌏🧐以下为正文🦄🪐 摄像机标定的目的:三维重建 空间物体表面…

ESP32使用MiroPython编程环境搭建

大家好! 今天和大家聊一聊ESP32使用MrioPython编程的环境搭建过程。 目录 一、在ESP32上使用MiroPython的必要条件 二、安装Thonny 1.安装地址 2.安装过程 三、下载MiroPython 四、下载ESP32驱动 五、烧录MicroPython到ESP32 六、点亮ESP32设备LED灯 一、在…

无人机技术服务应用

无人机技术服务应用 随着无人机的迅速发展,无人机行业应用越来越丰富,如何实现无人机行业内高效的运营一直是我们关注的重点。当今无人机具有的优势很多,例如:携带方便、操作简单、反应迅速、载荷丰富、任务用途广泛、起飞降落对…

计算机网络【HTTP协议】

计算机网络【HTTP协议】🍎一.HTTP协议概述🍒1.什么是HTTP协议🍒1.2 Fiddler(抓包工具)🍎二.HTTP协议格式🍒2.1HTTP请求🍉2.1.1 HTTP请求格式🍉2.1.2 HTTP请求格式URL&…

语句覆盖、条件覆盖、判定覆盖、条件-判定覆盖、路径覆盖

白盒测试的测试用例在大二学习软件工程的时候也是一个重点模块,但是上课没有太多时间做太多的测试用例,然后许久不用会搞乱,所以这里简单复盘一下。 白盒测试是结构测试,主要对代码的逻辑进行验证。 逻辑覆盖率:语句覆…

软件推荐:AList

软件推荐:AList AList是一个开源Web服务,可以添加多种网盘,将你的多个网盘应用集成到一个统一应用中使用,并且还支持通过WebDAV服务映射到操作系统本地目录使用。 GitHub:https://github.com/alist-org/alist 安装 …

双十一买什么比较划算?四款实用性超强不吃灰的数码好物推荐

现如今,越来越多的数码产品逐渐融入我们的生活当中。但是,在众多的数码产品中,很多人买来用过一两次就放着吃灰的产品也不在少数。因此,我来给大家推荐几款实用性强、不吃灰的数码好物,一起来看看吧。 一、南卡小音舱…

面试算法题

文章目录数组中的第K个最大元素快排k个一组反转链表解法一:栈解法二:模拟买卖股票最佳时机买卖股票最佳时机i买卖股票最佳时机ii贪心无重复长度子串最长递增子序列只出现一次的数字 IIIlru缓存合并K个升序链表数组中的第K个最大元素 快排 class Solutio…

第一个程序

第一个程序 1. 常用DOS命令 1.1 打开命令提示符窗口 1. winR2. cmd3. 按下回车键 1.2 常用命令 2. Path 环境变量的配置 2.1 为什么要配置 Path环境变量 开发 Java程序, 需要使用 JDK 提供的开发工具, 而这些工具在 JDK 的 安装目录的 bin目录 下。未来…

【测试代码 基于Pytorch】的卷积神经网络(CNN) || 【基于Pytorch】的深度卷积神经网络(DCNN)

声明:仅学习使用~ 目录 一、卷积神经网络 CNN1、【基于Pytorch】的卷积神经网络(CNN)2、【基于Pytorch】的深度卷积神经网络(DCNN)一、卷积神经网络 CNN CNN,这里以 LeNet 为例。LeNet神经网络由深度学习三巨头之一的Yan LeCun提出,他同时也是卷积神经网络 (CNN,Convo…

RHCE之路配置本地DNS服务器的正反向解析

第十天 SOA格式 ---(序列号,同步时间,重试时间,过期时间,TTL) 正向解析 [roota ~]# mount /dev/sr0 /mnt mount: /mnt: WARNING: device write-protected, mounted read-only. [roota ~]# yum install bin…

Java 8 新特性 ---- Lambda 表达式

Java 8 新特性 ---- Lambda 表达式1. Java7与Java8的区别2. Lambda表达式3. 语法4. Lambda 表达式实例5. 变量作用域1. Java7与Java8的区别 // 使用 java 7 排序private void sortUsingJava7(List<String> names){ Collections.sort(names, new Comparator<String&g…

matplotlib中的pyplot实用详解

matplotlib中的pyplot实用详解示例1&#xff1a;使用axes确定子图的位置相关函数详解1、plt.subplot()2、plt.subplots_adjust() 与 plt.axes()来控制子图的位置示例1&#xff1a;使用axes确定子图的位置 import matplotlib.pyplot as plt import numpy as np# 固定随机种子 np…

Typescript 学习笔记(二)高级类型二

交叉类型 交叉类型&#xff08;&&#xff09;&#xff1a;功能类似于接口继承&#xff08;extends&#xff09;&#xff0c;用于组合多个类型为一个类型&#xff08;常用于对象类型&#xff09; interface Person2 {name: string} interface Contact {phone: number} typ…

有一个是对的,就是坚持去做难的事情。

不要总是想着去找那些让自己赚到的工作&#xff0c;你自己心里清楚&#xff0c;自己有几斤几两&#xff0c;配什么样的公司。不要贪&#xff0c;不然最后原本该得到的都没有得到。你找差点的工作心里也踏实对不对&#xff0c;不会说比较慌&#xff0c;每天都过不安稳。不要幻想…

软件设计师--其他高频考点总结

视频2022软件设计师-提炼高频考点-个人学习过程的总结&#xff0c;仅供参考&#xff01;_哔哩哔哩_bilibili 目录 1&#xff0c;网络攻击 2&#xff0c;网络安全 3,防火墙 4&#xff0c;耦合 --模块之间相对独立性的度量 5&#xff0c;内聚--模块间内部元素彼此紧密的程度…