聊聊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 相关文章推荐
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
May 20 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
整理关于Bootstrap导航的慕课笔记
Mar 29 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
Aug 29 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
npm qs模块使用详解
Feb 07 Javascript
BootStrap前端框架使用方法详解
Feb 26 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 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数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
一个JavaScript操作元素定位元素的实例
2014/10/29 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
[01:28:24]NAVI vs VG Supermajor 败者组 BO3 第三场 6.5
2018/06/06 DOTA
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
python 使用tkinter+you-get实现视频下载器
2020/11/17 Python
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
编写strcpy函数
2014/06/24 面试题
写给女朋友的道歉信
2014/01/12 职场文书
2014年元旦活动方案
2014/02/15 职场文书
《故乡》教学反思
2014/04/10 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
消防安全标语
2014/06/07 职场文书
保险专业求职信
2014/07/07 职场文书
公民授权委托书
2014/10/15 职场文书
办公室文员岗位职责
2015/02/04 职场文书
班主任高考寄语
2015/02/26 职场文书
校长一岗双责责任书
2015/05/09 职场文书
仓库管理制度范本
2015/08/04 职场文书
如何避免mysql启动时错误及sock文件作用分析
2022/01/22 MySQL