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页面刷新与弹出窗口问题的解决方法
Mar 02 Javascript
JavaScript中String和StringBuffer的速度之争
Apr 01 Javascript
JavaScript 拾碎[三] 使用className属性
Oct 16 Javascript
JavaScript获取图片真实大小代码实例
Sep 24 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
Mar 24 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 Javascript
js实现弹幕飞机效果
Aug 27 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
Aug 28 Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 Javascript
如何用JS实现网页瀑布流布局
Apr 24 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 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
PHP从FLV文件获取视频预览图的方法
2015/03/12 PHP
php+curl 发送图片处理代码分享
2015/07/09 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
php生成二维码
2015/08/10 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
Position属性之relative用法
2015/12/14 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
js实现每日签到功能
2018/11/29 Javascript
vue实现数字动态翻牌的效果(开箱即用)
2019/12/08 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
Django中使用locals()函数的技巧
2015/07/16 Python
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
django输出html内容的实例
2018/05/27 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
浅析python redis的连接及相关操作
2019/11/07 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
怎样客观的做好自我评价
2013/12/28 职场文书
宣传工作经验材料
2014/06/02 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
小学生作文批改评语
2014/12/25 职场文书
幼儿园学前班幼儿评语
2014/12/29 职场文书
五一劳动节慰问信
2015/02/14 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers