ES6中的Javascript解构的实现


Posted in Javascript onOctober 30, 2020

ES6中的解构特性能让我们从对象(Object)或者是数组(Array)中取值的时候更方便,同时写出来的代码在可读性方面也更强。之前接触过python语言的小伙伴应该对这个不会陌生,这个特性早已在python中实现了。在python中,我们可以通过下面的代码来取值

lst = [3, 5]
first, second = lst 
print(first, second)

first和second两个变量,分别被赋值上了数组中的3和5,是不是很简单很清晰?
那在有这个特性之前,我们一般怎么从对象或数组中取值呢?来看看下面的代码:

let list = [3, 5]
let first = list[0]
let second = list[1]

在这种方式中,你必须得手动指定个数组下标,才能把对应的值赋给你指定的变量。那如果用ES6的解构特性,代码将会变得更简洁,可读性也更高:

let [first, second] = list;

对象的解构

基础对象解构

首先我们来看看ES6中基本的对象解构应该怎么写:

const family = {
 father: ''
 mother: ''
}
const { father, mother } = family;

我们从family对象中解构出来了它的两个属性father和mother,并赋值给了另外定义的father和mother对象。此后,我们就能直接通过father和mother变量获取到family中相应key的值了。这个例子是解构对象最简单的一种应用,下面来看看更有趣的。

解构没有声明过的对象

在上面的例子中,我们先声明的family对象,然后再通过解构语法获取其中的值。那如果不声明是否可以呢:

const { father, mother } = {father: '',mother: ''}

其实也是可以的,在一些情况下,我们是没有必要特意去声明一个对象或是把对象赋值给一个变量,然后去才解构的。很多时候我们可以直接解构未声明的对象。

解构对象并重命名变量

我们也可以将对象中的属性解构之后,并对其重新命名,比如:

const { father: f, mother:m } = {father: '1',mother: '2'}
console.log(f); // '1'

在上面的代码中,对象中的father被解构出来后,重新赋值给了变量f,与前一个例子相比,相当于重名了了father变量为f。接下来就可以用f继续进行操作。

解构默认值

想象一下一种场景,后台返回了一个family对象,原本family对象约定了有三个属性,分别为father,mother,child。你拿到返回的数据并解构这三个属性:

const { father, mother, child } = {father: '1',mother: '2', child: '3'}

这看上去没有什么问题,但现实情况总是不如人意。后台由于代码有bug,返回的family对象中,只包含了mother和child,漏了father。这时经过上面代码的解构后, father就会变成undefined:

const { father, mother, child } = {father: '1',mother: '2'}
console.log(child) //undefined

很多时候我们会想要在后台漏了某个属性的时候,也能解构出一个默认值。那其实可以这么写:

const { father = '1', mother = '2', child = '3'} = {father: '1',mother: '2'}
console.log(child) //'3'

结合前一个例子,你既可以改变量名又能赋值默认值:

const { father: f = '1', mother: m = '2', child: c = '3'} = {father: '1',mother: '2'}

在函数参数中解构

const family = {
 father: ''
 mother: ''
}
function log({father}){
 console.log(father)
}
log(family)

在函数的参数中,运用解构的方式,可以直接获取出入对象的属性值,不需要像以往使用family.father传入。

解构嵌套对象

在上面的例子中,family的属性都只有1层,如果family的某些属性的值也是一个对象或数组,那怎么将这些嵌套对象的属性值解构出来呢?来看看下面的代码:

const family = {
 father: 'mike'
 mother: [{
 name: 'mary'
 }]
}
const { father, mother: [{
 name:motherName
}]} = family;

console.log(father); //'mike'
console.log(motherName) //'mary'

数组的解构

数组的解构方式其实跟对象的非常相似,在文章开头也略有提及,不过我们还是来看一下数组解构的一些典型场景。

基础对象解构

const car = ['AUDI', 'BMW'];

const [audi, bmw] = car;
console.log(audi); // "AUDI"
console.log(bmw); // "BMW"

只要对应数组的位置,就能正确的解构出相应的值。

解构默认值

同对象解构的默认值场景,很多时候我们也需要在解构数组的时候加上默认值以满足业务需要。

const car = ['AUDI', 'BMW'];

const [audi, bmw, benz = 'BENZ'] = car;
console.log(benz); // "BENZ"

在解构中交换变量

假设我们有如下两个变量:

let car1 = 'bmw';
let car2 = 'audi'

如果我们想交换这两个变量,以往的做法是:

let temp = car1;
car1 = car2;
car2 = temp;

需要借助一个中间变量来实现。那利用数组的解构,就简单很多:

let car1 = 'bmw';
let car2 = 'audi'
[car2, car1] = [car1, car2]
console.log(car1); // 'audi'
console.log(car2); // 'bmw'

如果是想在一个数组内部完成元素位置的交换,比如吧[1,2,3]交换成[1,3,2],那么可以这么实现:

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

从函数的返回解构数组

很多函数会返回数组类型的结果,通过数组解构可以直接拿值:

functin fun(){
 return [1,2,3]
}
let a, b, c; 
[a, b, c] = fun();

当然,如果我们只想要函数返回数组中的其中一些值,那也可以把他们忽略掉

functin fun(){
 return [1,2,3]
}
let a, c; 
[a, , c] = fun();

可以看到,ES6的解构特性在很多场景下是非常有用的。期望大家能更多的将解构运用到项目中,让代码变得更加简单,清晰易懂。

到此这篇关于ES6中的Javascript解构的实现的文章就介绍到这了,更多相关ES6 解构内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
jquerymobile局部渲染的各种刷新方法小结
Mar 05 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
Jun 08 Javascript
Highcharts学习之坐标轴
Aug 02 Javascript
React Router基础使用
Jan 17 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
jquery事件与绑定事件
Mar 16 Javascript
基于jstree使用AJAX请求获取数据形成树
Aug 29 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
JavaScript简单实现的仿微博留言功能示例
Jan 17 Javascript
vue video和vue-video-player实现视频铺满教程
Oct 30 #Javascript
Echarts.js无法引入问题解决方案
Oct 30 #Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
Oct 30 #Javascript
vue 通过 Prop 向子组件传递数据的实现方法
Oct 30 #Javascript
微信小程序:报错(in promise) MiniProgramError
Oct 30 #Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 #Javascript
vuecli项目构建SSR服务端渲染的实现
Oct 30 #Javascript
You might like
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
Python中super的用法实例
2015/05/28 Python
深入了解Python中pop和remove的使用方法
2018/01/09 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
Django 开发环境配置过程详解
2019/07/18 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
python怎么调用自己的函数
2020/07/01 Python
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
党纪处分决定书
2015/06/24 职场文书
2019森林防火宣传标语大全!
2019/07/03 职场文书
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python