聊聊JS ES6中的解构


Posted in Javascript onApril 29, 2021

概述

es6新增了一种从数组或者对象中获取指定元素的方式,这种方式就是我们今天要说的解构。

先来说说数组的解构

在有解构之前呢,我们获取数组中的指定元素通常是根据索引去做的:

const arr = [1, 2, 3]; 
const a = arr[1];

有了解构之后呢,我们便可以使用如下方式快速的去获取数组中的某个元素:

const arr = [1, 2, 3];
const [a, b, c] = arr;

console.log(a);
console.log(b);
console.log(c);

这样打印出a, b, c的值分别是:

1

2

3

如果我们只想获取前两个元素呢,那么我们可以这样写:

const arr = [1, 2, 3];
const [a, b] = arr;

console.log(a);
console.log(b);

我们也可以结合扩展运算符获取数组中指定的多个元素,比如:

const arr = [1, 2, 3];
const [a, ...brr] = arr;

console.log(a);
console.log(brr);

这样brr就是除了1以外的其他元素组成的数组,打印出a, brr的值分别是:

1

[2, 3]

那如果我们只想获取数组中的某一个元素呢?比如我只想获取数组中的2,又该如何去写呢?

const arr = [1, 2, 3];
const [, a] = arr;
console.log(a);

以上我们通过一个逗号占位确保我们解构和数组本身的位置是一致的来获取到特定位置的某个元素。
可以看到,解构的出现方便了我们去获取数组指定位置的一个或多个元素。这也是他在代码中的一个重要的应用。

说完数组的解构,我们再来聊聊

对象的解构

与数组解构不同的是,对象的解构是根据属性名去匹配的,因为对象不像数组下标那样有顺序,因此它不能用下标去提取。
就比如我们定义一个对象obj,我们想获取他的name属性值就可以这样写:

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

const age = 0;
const { age: perAge } = obj;
console.log(perAge);
18

对象的解构应用还是比较广的,比如我们需要频繁的调用对象的某个属性或方法就可以通过解构将其赋值给一个变量,通过一个变量去调用可以在一定程度上减少代码量。

以上就是JS ES6中的解构的详细内容,更多关于JS ES6中的解构的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
Javascript 遍历对象中的子对象
Jul 03 Javascript
JS(JQuery)操作Array的相关方法介绍
Feb 11 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
Nov 29 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
关于react-router的几种配置方式详解
Jul 24 Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 Javascript
vue resource post请求时遇到的坑
Oct 19 Javascript
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
重新认识vue之事件阻止冒泡的实现
Aug 02 Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 Javascript
JS removeAttribute()方法实现删除元素的某个属性
Jan 11 Javascript
JavaScript实现班级抽签小程序
May 19 Javascript
详解TypeScript中的类型保护
Apr 29 #Javascript
7个你应该知道的JS原生错误类型
Apr 29 #Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
如何使用JavaScript策略模式校验表单
Apr 29 #Javascript
react中props 的使用及进行限制的方法
Apr 28 #Javascript
React Hook用法示例详解(6个常见hook)
vue使用v-model进行跨组件绑定的基本实现方法
You might like
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
跟我学Laravel之视图 & Response
2014/10/15 PHP
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
crontab无法执行php的解决方法
2016/01/25 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
图片上传即时显示缩略图的js代码
2009/05/27 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
2015/10/25 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
pandas 读取各种格式文件的方法
2018/06/22 Python
[原创]Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】
2018/10/29 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
Python计算IV值的示例讲解
2020/02/28 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
社会学专业学生职业规划书
2014/02/07 职场文书
中学教师教育感言
2014/02/21 职场文书
给全校老师的建议书
2014/03/13 职场文书
保护环境建议书300字
2014/05/13 职场文书
企业承诺书怎么写
2014/05/24 职场文书
2015中秋节慰问信范文
2015/03/23 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
学校财务管理制度
2015/08/04 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python
基于angular实现树形二级表格
2021/10/16 Javascript