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 相关文章推荐
js中的escape及unescape函数的php实现代码
Sep 04 Javascript
Javascript 页面模板化很多人没有使用过的方法
Jun 05 Javascript
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
jquery eval解析JSON中的注意点介绍
Aug 23 Javascript
js中document.write的那点事
Dec 12 Javascript
详解jQuery中的事件
Dec 14 Javascript
JavaScript中立即执行函数实例详解
Nov 04 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 Javascript
JS实现的类似微信聊天效果示例
Jan 29 Javascript
element tree树形组件回显数据问题解决
Aug 14 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 按位与或 (^ 、&)
2013/06/21 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
jQuery中filter()方法用法实例
2015/01/06 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
jquery实现简单实用的轮播器
2017/05/23 jQuery
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
Python实现选择排序
2017/06/04 Python
python使用BeautifulSoup与正则表达式爬取时光网不同地区top100电影并对比
2019/04/15 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
基于Python实现人脸自动戴口罩系统
2020/02/06 Python
linux面试题参考答案(5)
2016/11/05 面试题
医学生自荐信
2013/12/03 职场文书
总经理助理工作职责
2014/02/06 职场文书
给小学生的新年寄语
2014/04/04 职场文书
《窗前的气球》教学反思
2014/04/07 职场文书
学校消防安全责任书
2014/07/23 职场文书
党的生日演讲稿
2014/09/10 职场文书
Python基础之数据结构详解
2021/04/28 Python
Mysql基础知识点汇总
2021/05/26 MySQL
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android