为了账号安全,请及时绑定邮箱和手机立即绑定

ES6解构Destructuring

ES6编码更快速、更优雅。
Destructuring解构是ES6很重要的一个部分。和箭头函数、letconst 同等地位,解构可能是你日常用到最多的语法之一了。解构是什么意思呢?它是js 表达式,允许我们从数组、对象、map、set 中抽取数据同时为多个变量赋值。

解构入门

首先让我们初步了解下解构解决哪些问题。你可能从后台得到 person 的数据如下:

const person = {
    first: 'xi',
    last: 'xi',
    country: 'china',
    city: 'beijing'
};
// 需要单独获得 first和 last 的值
const first = person.first;
const last = person.last;

想从 person 对象中获取到数据不得不写大量重复的代码。此时解构的价值就体现出来了。解构代码如下:

const { first, last } = person;

上面的代码表示声明两个变量 first last,然后 first = person.first, last = person.last。如果你还行获取 person的 city,只需进行如下操作:

const { first, last, city } = person;

以上: 解构可以减少重复的代码

解构之重命名

有时后台返回的命名比较狗血,你不喜欢或者变量名在该作用域中已经被占用了。例如:

const country = 'usa';
const person = {
    first: 'xi',
    last: 'xi',
    country: 'china',
    city: 'beijing'
};
const {first, last, country?} = person;

此时你仍想获取 person 中的 coutry 数据怎么办呢?为此解构重命名功能就闪亮登场。

// personCountry is whart you needs
const {first, last, country: personCountry} = person;
解构之设置默认值

ES6为我们提供了设置默认值的语法。解构也一样。下面大家思考一下,在对一个 object 进行解构时,若对应的对象属性不存在那会怎样呢?

const rect = {
    width: 150
}
const { height, width } = settings;
console.log(height);//undefined

运行代码我们看到 height === undefined。实际业务中长方形的 height 是不能没有值的。为了增强程序的健壮性,我们经常会给 height 一个默认值。height || 150。下面介绍解构设置默认值的语法

const rect = {
    width: 150
}
const { height = 150, width = 300 } = settings;
console.log(height, width);//150, 150

在解构设置默认值的语法中, 我们要特别注意只有当 value 的值严格等于 undefined 时,默认值才会生效。null, false, 0都算正常值的范畴。

解构进阶

解构时同时使用重命名和设置默认值的语法。直接上代码:

const person = { first: 'xi', last: 'yuanyuan' };
const { middle: middleName = 'xixi' } = person;
console.log(middleName); // 'xixi'

若可以理解上面的代码,那你的 es6水平已经很好了。下面对上述语句做简单说明:

  1. 首先我们声明了一个变量middleName
  2. 其次我们查询 person的 middle 属性,看其是否有值。若有,middleName = person.middle
  3. 若 person 没有 middle 属性, 那么将middleName赋值为'xixi'。
refs

JavaScript’s Destructuring

点击查看更多内容
3人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
120
获赞与收藏
651

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消