ES6解析赋值

news2025/7/13 22:57:06

ES6中新增了一种数据处理方式,可以将数组和对象的值提取出来对变量进行赋值,这个过程时将一个数据结构分解成更小的部分,称之为解析。

1.对象解析赋值:

在ES5中,要将一个对象的属性提取出来,需要经过一下几个过程。

        const user={
            name:'Zhangsan',
            age:30
        }
        const name=user.name;
        const age=user.age;
        console.log(name+'-'+age);

先定义一个user对象,并为其name属性和age属性赋予初值,然后分别定义name和age两个变量,从user对象中获取对应的属性值给变量赋值,最后将变量name和age的值从控制台中输出。这样做法在ES5中是一种非常普通的做法,但在ES6中,还可以将其进行进一步简化为下面这段代码:

        const user={
            name:'Zhangsan',
            age:30
        }
        //改进
        const {name,age}=user;
        console.log(name+'-'+age);

执行结果:

 将变量声明在大括号中,直接将对象渎职给这个声明变量,ES6会很根据对象的属性名与变量名进行匹配,只有变量和属性同名,才能正确赋值。如果将变量name修改成Name,例如下面这段代码:

const {Name,age}=user;

这样ES6将无法获取到对应的属性name的值,因为属性名与变量名的首字母不同,此时的Name应该是undefined。

2.数组解析赋值

解构另一个常用的地方是数组,利用解构可以非常方便地将数组中地值依次赋值给多个变量。例如下面这段代码:

let fn=()=>["张三",30,'北京'];
let [name,age,address]=fn();
console.log(`${name}-${age}-${address}`);

这段代码首先先声明一个箭头函数,该函数用来返回一个数组,数组中有三个值,然后声明三个变量,并将其放置在一个数组中,用于接收箭头函数地返回值。执行这段代码后,控制台中输出“张三-30-北京”,也就是说,函数返回值依次赋给对应地变量。

数组地解构与对象地解构模式不同,对象解构过程中,只要变量名和属性名相同就可以解构成功,而数组解构过程中,是根据变量地顺序依次解构数组中地值。如果等号左边的数组中变量的个数大于等号右边数组的个数,那么左边多余的变量会被解构成undefined。例如下面这段代码:

 let fn=()=>["张三",30];
 let [name,age,address]=fn();
 console.log(`${name}-${age}-${address}`);

执行结果如下:

 另一种就是,如果等号左边的数组中的变量个数少于右边数组中值的个数,那么所有的变量会依次赋值。例如下面代码:

let fn=()=>["张三",30,'北京'];
let [name,age]=fn();
console.log(`${name}-${age}`);

执行结果如下:

 3.字符串解构赋值

因为字符串是由一个个字符组成类似数组的对象,所以可以对字符串进行解构赋值。例如下面这段代码:

 const [a,b,c,d,e]='hello';
 console.log(`${a}-${b}-${c}-${d}-${e}`);

执行结果如下:

 执行这段代码后,字符串hello被分解成5个单独的字符,并分别赋值给变量a,b,c,d,e。

另外还有一个特殊的解构方式,是对字符串的长度属性进行解构。例如下面这段代码:

let {length:len}="hello";
console.log(len);

控制台输出的结果如下:

 

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

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

相关文章

aws sdk 学习和使用aws-sdk-go

https://www.go-on-aws.com/infrastructure-as-go/cdk-go/sdk example,https://github.com/awsdocs/aws-doc-sdk-examples golang的安装,使用1.15之后默认开启GO15VENDOREXPERIMENT的版本 yum install golang -y go env -w GOPROXYhttps://goproxy.cn,…

智慧教室解决方案-最新全套文件

智慧教室解决方案-最新全套文件一、建设背景1、教育信息化2.0行动计划2、中国教育现代化20353、加快推进教育现代化实施方案二、建设思路互联网时代教学环境定义三、建设方案四、获取 - 智慧教室全套最新解决方案合集一、建设背景 1、教育信息化2.0行动计划 “网络学习空间覆…

【直播】-DRM和TZC400的介绍-2022/11/26

直播背景和内容 最近有两位SOC大佬再和我探讨TZC的设计,以及使用场景。也有几位软件工程师,在深入得学习安全技术,也问到了TZC相关的技术。 然后就搞了本次的直播,共计17人报名。 上线12位同学。(有ASIC大佬、有软件大佬、芯片严…

shell脚本的条件判断3:探究[[]]和[]的区别

前言 实例中除非特别标注,否则都不是在centos中测试的。 一 简述 多数情况下[]和[[]]是可以通用的,两者的主要差异是:test或[]是符合POSIX标准的测试语句,兼容性更强,几乎可以运行在所有Shell解释器中,相…

驱动保护进程 句柄降权 杀软自保 游戏破图标技术原理和实现

文章目录实现效果实现原理代码实现实现效果句柄降权对抗(实现破游戏图标和关闭杀软自保)降权对抗延伸游戏降权对抗杀软自保对抗隐藏Object钩子回调完整代码实现效果 效果如图所示: 无法结束进程: CE无图标: 内存无法读取 可以看到被保护的进…

STC 51单片机41——汇编 串口连续发送数据

; 仿真时,单步运行,记得设置虚拟串口数据 ORG 0000H MOV TMOD ,#20H ;定时器1,工作方式2,8位重装载 MOV TH1,#0FDH ; 波特率9600 MOV TL1,#0FDH SETB TR1 ; 启动T1 MOV SCON ,#40H ; 串口工作方式1 …

[激光原理与应用-20]:《激光原理与技术》-6- 谐振腔的结构、作用、工作原理

目录 第1章 谐振腔简介 1.1 什么是谐振腔 1.2 什么是光学谐振腔 1.3 谐振腔的作用 1.4 什么是镜片镀膜 第2章 谐振腔的结构与工作原理 2.1 谐振腔的结构 2.2 谐振腔的分类 2.3 激活介质与谐振腔的工作原理 第1章 谐振腔简介 1.1 什么是谐振腔 谐振腔,是…

[Java反序列化]—CommonsCollections4

0x01: 这条链子 前半段跟CC3 一样 ,都是动态加载字节码的过程,后边的构造用到了两个类,PriorityQueue和TransformingComparator Gadget chain:ObjectInputStream.readObject()PriorityQueue.readObject()...TransformingComparat…

如何Cisco的学员 摆脱游客登录

Cisco Packet Tracer 是一款强大的网络模拟工具,可用于在虚拟实验环境中练习网络、物联网和网络安全技能。您不需要任何硬件,即可获得实操经验! 相信很多小伙伴在使用cisco packet tracer这个思科数据包跟踪器 - 网络仿真工具时在登录的时候…

云原生k8s的前世今生--Docker

不可修改(immutability)和幂等性(idempotent)是一致依赖困扰软件发布与运维的两个难题。以nodejs等解析执行的应用而言,如何控制发布后的软件不被修改运行,发布后,经常发现因为运行环境差异导致各种水土不服:比如应用程序对底层操…

【C++数据结构】渐近记法

渐近记法 3.1 引言 考察程序的操作计数和执行步数有两个重要的原因: 1)预测程序运行时间如何随着实例特征的变化而变化; 2)对两个功能相同的程序,比较它们的时间复杂度。 存在问题: 在使用操作计数时,我们关注的…

Vue生命周期--Vue实例创建过程详解

每个Vue实例在被创建时都要经过一系列的初始化过程--例如,需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做 生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。 生命周期图示&…

Linux入侵排查

Linux入侵排查 实验内容 当系统被黑客入侵、需短时间查找入侵来源,还原入侵事故过程,同时给出解决方案与防范措施。以下给出一些入侵排查思路 netstat -antpl 查看当前端口状态是LISTEN的端口 针对对外开放的端口,查看日志 先查看ssh爆破的…

OpenGL ES 学习(三) -- 绘制平面图形

上一章中,已经对 OpenGL 的编程语言 GLSL 和渲染模式有了一定的了解,今天,将运用之前的知识,完成一些平面图形的操作。效果如下: 如果你对 OpenGL 的基本概念或者渲染流程不清晰,建议先看 OpenGL ES 学习…

D. Insert a Progression(绝对值的性质)

Problem - 1671D - Codeforces 给你一个n个整数的序列a1,a2,...,an。你还得到了x个整数1,2,...,x。 每个整数可以插入序列的开头,也可以插入序列的结尾,或者插入序列的任何元素之间。 所得序列a′的得分是其中相邻元素的绝对差异之和(∑i1n…

实验跟踪

管理和跟踪机器学习实验。 Intuition 到目前为止,一直在训练和评估不同的基线,但还没有真正跟踪这些实验。将解决这个问题,但定义一个适当的实验跟踪过程,将用于所有未来的实验(包括超参数优化)。实验跟踪是…

【JavaWeb】CookieSession

文章目录一.Cookie❤️1.Cookie的概念2.创建Cookie3.获取Cookie4.修改Cookie的值5.Cookie的生命周期控制6.Cookie有效路径Path的设置7.免输入用户名登录二.Session❤️1.session的概念2.Session的创建和获取3.Session域数据的存取4.Session的生命周期控制5.浏览器和Session之间…

pytorch深度学习实战lesson28

第二十八课 resnet的梯度计算(如何缓解梯度问题) 沐神说:“假设你在卷积神经网络里面,只要了解一个神经网络的话,你就了解 rest net 就行了。 rest net 是一个很简单的也是很好用的一个网络。这也是大家会经常在实际中…

OpenCV-Python小应用(六):车道线检测

OpenCV-Python小应用(六):车道线检测前言前提条件实验环境基于霍夫变换的车道线检测参考文献前言 本文是个人使用OpenCV-Python的应用案例,由于水平有限,难免出现错漏,敬请批评改正。更多精彩内容&#xff…

【成为红帽工程师】第五天 NFS服务器

目录 一、NFS服务器简介 二、NFS的使用 三、客户端使用autofs自动挂载 四、相关实验 一、NFS服务器简介 NFS(网络文件系统),是FreeBSD支持的文件系统中的一种,它允许网络中的计算机(不同的计算机、不同的操作系统&…