ES6解析赋值

2023/9/30 17:38:00

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.jnnr.cn/a/154091.html

相关文章

springcloud22:sentinal的使用

sentinal对比(分布式系统的流量防卫) 监控保护微服务 Hystrix 需要自己去手工搭建监控平台,没有一套web界面可以进行细粒度化的配置,流控,速率控制,服务熔断,服务降级… 整合机制:se…

让学前端不再害怕英语单词(四)

|| 欢迎关注csdn前端领域博主: 前端小王hs || email: 337674757qq.com || 前端交流群: 598778642前三章直通车↓↓↓ 让学前端不再害怕英语单词(一) 让学前端不再害怕英语单词(二) 让学前端不再害怕英语单词&#xff0…

2022年 SecXOps 安全智能分析技术白皮书 学习笔记 免费下载地址

核心能力 为了加快安全分析能力更全面、更深入的自动化 ,SecXOps 的目标在于创建一个集成的用于 Security 的 XOps 实践,提升安全分析的场景覆盖率和运营效率。SecXOps 技术并不 015 SecXOps 技术体系 是 Ops 技术在安全领域的简单加和,SecXO…

C语言练习之递归实现n的k次方

文章目录前言一、思路二、代码以及运行截图1.代码2.运行截图总结前言 使用C语言递归计算N的k次方 一、思路 求n的k次方的原理就是: n^k nn……*n(k个n进行相乘) 可以得到一个公式: f(k){1k0n∗f(k)k>0f(k) \left\{\begin{…

详解 InnoDB Cluster 主机名问题

详解 InnoDB Cluster 主机名问题 文章目录详解 InnoDB Cluster 主机名问题导言测试过程结论导言 因在写 【InnoDB Cluster】修改已有集群实例名称及成员实例选项 时发现主机名这块有一些问题,在其中进行了部分测试,但为使其内容精简,故将此部…

JSP学习日记

JSP简述 Java Sever Pages----->Java服务器界面 用于前后端结合 jsp为什么淘汰? 由于JSP的前后端耦合性极高,编写代码非常臃肿。前后端的代码放在一起,所以JSP可以看成是已经被淘汰的技术。 为什么还要学jsp? 由于一些公司…

【机器学习项目实战10例】(三):基于K近邻的葡萄酒质量检测项目

💥 项目专栏:【机器学习项目实战10例】 文章目录 一、基于K近邻的葡萄酒质量检测项目二、数据集介绍三、导包四、读取数据五、绘制空间分布六、划分训练集、测试集七、构建K近邻模型八、绘制聚类效果九、网格搜索一、基于K近邻的葡萄酒质量检测项目 葡萄酒数据集是一个经典…

APP逆向案例之(三)sign 参数破解

说明:某新闻APP sign 参数 抓包发现包含内容: url: https://124.*.*.*/api/categorynews/lists 参数: 其中 sign 参数是需要变化的否则访问失败,其余都是固定的 page: 3, size: 10, category: -2, from: -1, lng: 116.363…

Date对象

文章目录Date日期对象Date对象的创建格式化日期3.获取Date总的毫秒数(时间戳),是距离1970年1月1日过了多少毫秒数。二:常用时间获取方法三:日期设置方法四:时间转字符串菜鸟工具:https://www.runoob.com/jsref/jsref-o…

有监督学习神经网络的回归拟合——基于红外光谱的汽油辛烷值预测(Matlab代码实现)

👨‍🎓个人主页:研学社的博客 💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜…

Java#27(Arrays)

目录 一.Arrays 操作数组的工具类 二.Lambda表达式 1.注意: 2.省略规则 一.Arrays 操作数组的工具类 方法名 作用 public static String toString(数组) 把数组拼接…

代码随想录65——额外题目【二叉树】:129求根节点到叶节点数字之和、1382将二叉搜索树变平衡、100相同的树、116填充每个节点的下一个右侧节点指针

文章目录1.129求根节点到叶节点数字之和1.1.题目1.2.解答2.1382将二叉搜索树变平衡2.1.题目2.2.解答3.100相同的树3.1.题目3.2.解答4.116填充每个节点的下一个右侧节点指针4.1.题目4.2.解答4.2.1.递归解法4.2.2.迭代方法1.129求根节点到叶节点数字之和 参考:代码随…

机器学习笔记之贝叶斯线性回归(一)线性回归背景介绍

机器学习笔记之贝叶斯线性回归——线性回归背景介绍引言回顾:线性回归场景构建从概率密度函数认识最小二乘法回顾:最小二乘估计回顾:线性回归与正则化关于线性回归的简单小结贝叶斯线性回归贝叶斯方法贝叶斯方法在线性回归中的任务贝叶斯线性…

cocos creator实现浏览星球的功能,附源码

预览效果: 技术要点: 主摄像机的视场轴需要设置为水平。在场景下创建一个空节点用于挂载控制器脚本图片已进行各概念的说明 在“collisionNodeArray”属性下,放置需要点击的星球节点,系统会自己绑定碰撞器。 也可自己提前绑定。 布…

现代密码学导论-16-选择明文攻击和CPA安全

目录 PCA不可区分实验 DEFINITION 3.21 PCA安全的加密方案 LR预言机实验 DEFINITION 3.22 多明文PCA安全的加密方案 THEOREM 3.23 定义3.21和定义3.22等价 PCA不可区分实验 通过运行G(1^n)获得密钥k敌手A被给定输入1^n并拥有访问预言机Enck()的权利,敌手A输出一…

Day12--自定义组件-渲染my-search组件的基本结构

1.自定义搜索组件 我的操作: 1》在uni_modules中右键新建uni_modules插件: 2》看看效果图: ************************************************************************************************************** 2.在分类页面的 UI 结构中&…

Linux进程管理【进程的相关介绍片、ps、 kill 、pstree】【详细整理】

目录进程相关介绍显示系统执行的流程 psps 详解![请添加图片描述](https://img-blog.csdnimg.cn/cd9f10bf36684b419f2f94068afb9a03.png)案例终止进程kill 和 killall基本语法常见选型案例查看进程数pstreepstree [选项],可以更加直观的来查看进程信息进程相关介绍 …

[计算机毕业设计]远程监督的跨语言实体关系抽取

前言 📅大四是整个大学期间最忙碌的时光,一边要忙着准备考研,考公,考教资或者实习为毕业后面临的就业升学做准备,一边要为毕业设计耗费大量精力。近几年各个学校要求的毕设项目越来越难,有不少课题是研究生级别难度的,对本科同学来说是充满挑战。为帮助大家顺利通过…

Flutter高仿微信-第52篇-群聊-清空聊天记录

Flutter高仿微信系列共59篇,从Flutter客户端、Kotlin客户端、Web服务器、数据库表结构、Xmpp即时通讯服务器、视频通话服务器、腾讯云服务器全面讲解。 详情请查看 效果图: 实现代码: //清空聊天记录对话框 void _cleanGroupChatDialog(){Lo…

【机器学习项目实战10例】(二):利用LightGBM实现天气变化的时间序列预测

💥 项目专栏:【机器学习项目实战10例】 文章目录 一、利用LightGBM实现天气变化的时间序列预测二、加载数据三、将数据进行标准化四、形成训练数据五、划分训练集、测试集六、定义模型七、模型训练八、训练集、测试集验证九、网络搜索十、绘制结果一、利用LightGBM实现天气变…
最新文章