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中出现乱码的处理心得
Dec 24 Javascript
BOM与DOM的区别分析
Oct 26 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
Dec 19 Javascript
JavaScript中的值类型转换介绍
Dec 31 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 Javascript
教你如何在Node.js中使用jQuery
Aug 28 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
浅谈React前后端同构防止重复渲染
Jan 05 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
Nov 01 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 Javascript
让JavaScript代码更加精简的方法技巧
Jun 01 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/07/26 PHP
thinkPHP3.x常量整理(预定义常量/路径常量/系统常量)
2016/05/20 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
深入理解Promise.all
2018/08/08 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
多个python文件调用logging模块报错误
2020/02/12 Python
python中的unittest框架实例详解
2021/02/05 Python
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
汽车检测与维修应届毕业生求职信
2013/10/19 职场文书
毕业生自我鉴定
2013/11/05 职场文书
校园环保标语
2014/06/13 职场文书
单位员工收入证明样本
2014/10/09 职场文书
商务代表岗位职责
2015/02/15 职场文书
社区干部培训心得体会
2016/01/06 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript