聊聊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 相关文章推荐
利用location.hash实现跨域iframe自适应
May 04 Javascript
jQuery的.live()和.die() 使用介绍
Sep 10 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
基于js disabled="false"不起作用的解决办法
Jun 26 Javascript
js兼容火狐获取图片宽和高的方法
May 21 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
Angular.JS去掉访问路径URL中的#号详解
Mar 30 Javascript
Vue组件全局注册实现警告框的实例详解
Jun 11 Javascript
angularjs请求数据的方法示例
Aug 06 Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 Javascript
关于小程序优化的一些建议(小结)
Dec 10 Javascript
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
详解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
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
jQuery图片特效插件Revealing实现拉伸放大
2015/04/22 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
获取input标签的所有属性的方法
2016/06/28 Javascript
JS创建对象的写法示例
2016/11/04 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
js实现网页随机验证码
2020/10/19 Javascript
Python搭建FTP服务器的方法示例
2018/01/19 Python
python 重命名轴索引的方法
2018/11/10 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
详解用python生成随机数的几种方法
2019/08/04 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
Python基础教程之输入输出和运算符
2020/07/26 Python
Python实现京东抢秒杀功能
2021/01/25 Python
深入浅析css3 中display box使用方法
2015/11/25 HTML / CSS
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
初三物理教学反思
2014/01/21 职场文书
乡镇干部先进事迹材料
2014/02/03 职场文书
工作时间上网检讨书
2014/02/03 职场文书
酒店仓管员岗位职责
2014/04/28 职场文书
销售员岗位职责
2014/06/09 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
同乡会致辞
2015/07/30 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书
MySQL中order by的使用详情
2021/11/17 MySQL