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,解构

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“ES6中的Javascript解构的实现”

暂无“ES6中的Javascript解构的实现”评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。