ES6系列文章 Destructuring

JiaXinYi 发布于2019-08-21 16:46 / 1767人阅读

摘要：解构是很重要的一个部分。解构代码如下上面的代码表示声明两个变量然后。实际业务中长方形的是不能没有值的。都算正常值的范畴。解构进阶解构时同时使用重命名和设置默认值的语法。若有，若没有属性，那么将赋值为。

Destructuring解构是ES6很重要的一个部分。和箭头函数、let、const 同等地位，解构可能是你日常用到最多的语法之一了。解构是什么意思呢？它是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 } = rect;
console.log(height);//undefined

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

const rect = {
    width: 150
}
const { height = 150, width = 300 } = rect;
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水平已经很好了。下面对上述语句做简单说明：

首先我们声明了一个变量middleName

其次我们查询 person的 middle 属性，看其是否有值。若有，middleName = person.middle

若 person 没有 middle 属性，那么将middleName赋值为"xixi"。

refs

JavaScript’s Destructuring

欢迎访问个人博客 ?xixi小站?

GPU云服务器云服务器 es6-系列 Destructuring ES6 ES6入门

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88695.html

[译] 最深刻而易懂的ES6解构教程

摘要：被解构的数据项位于赋值运算符的右侧，可以是任何数组和对象的组合，允许随意嵌套。数组模式位于赋值运算符的左侧，被结构的数组在其右侧。解构是ES6的新特性，用于从JavaScript对象和数组中提取数据，语法上比ES5所提供的更加简洁、紧凑、清晰。它不仅能减少你的代码量，还能从根本上改变你的编码方式。用的越多，你就会发现越多塑造数据和函数的方式，这些实现方式在过去几乎是不可能的。本文将深...

AlphaGooo 2019-08-22 10:33 评论0 收藏0
ES6: 解构赋值（Destructuring）

摘要：一概念对象是属性的集合，从对象里取值，只能逐个取，而解构赋值表达式可以实现批量取值，赋值。赋值操作符等号两边的解构要一致才能正确赋值解构赋值表达式是赋值表达式的语法糖。三数组解构赋值数组的属性名称叫索引，表示的是位置。一、概念对象是属性的集合，从对象里取值，ES3/5只能逐个取，而解构赋值表达式可以实现批量取值，赋值。 // 数据对象person var person = { ...

CODING 2019-08-21 17:58 评论0 收藏0
ES6引入前需要解决的问题

摘要：的新特性哪些适合使用我们参考使用进行开发的思考文章推荐的新特性，仅使用三星的。另外推荐阅读探秘系列的新特性是否通过转换后还有兼容问题团队中又同学正在验证，我们验证的环境是，我们最终会使用三星特性加上兼容性的。 showImg(https://segmentfault.com/img/bVrjev); 最近项目中的一个模块正式引入的ES6，由于是引入新技术，也遇到了一些问题，下面分享下整...

verano 2019-08-22 10:58 评论0 收藏0
ES6部分方法点评（一）

一直以来，我对ES6都不甚感兴趣，一是因为在生产环境中使用ES5已是处处碰壁，其次则是只当这ES6是语法糖不曾重视。只是最近学习react生态，用起babel来转换jsx之余，也不免碰到诸多用上ES6的教程、案例，因此便稍作学习。这一学习，便觉得这语法糖实在是甜，忍不住尝鲜，于是记录部分自觉对自己有用的方法在此。箭头函数(Arrow Functions) 箭头函数是一个典型的语法糖，即创造了一种...

weakish 2019-08-19 18:14 评论0 收藏0
ES6新特性

摘要：官网官网阮一峰教程简介即是最新版本的标准。是该语言的重大更新。主流的引擎正在对这些新特性提供支持。特性箭头函数箭头函数是函数的简写，使用语法。箭头函数内的与其外部的一致同。 ES6官网 http://www.ecma-international...Babel官网 https://babeljs.io/learn-es2015/GitHub http://es6-features.or...

chaos_G 2019-08-20 17:02 评论0 收藏0