深入理解ES6之解构
变量赋值的痛
- 对象
let o = {a:23,b:34};
let a = o.a;
let b = o.b;
如上文代码,我们经常会遇到在各种场合需要获取对象中的值的场景,舒服一点的是获取单个属性,很多时候,要获取的是接口中的各个对象,在ES5中,我们不得不如上文一样,将同一行代码复制多遍
- 数组
let s = [1,2,3,4];
let a = s[0];
let b = s[2];
如上文,所以ES6提供了处理这些场景的方法:解构赋值
解构
destructuring:百度百科的意思是结构分解,ES6 中允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)
- 作用
这是一种将数据结构分解为更小的部分的过程,从而达到简化提取信息的目的。
对象解构
- 形式
对象解构语法是在赋值对象的左侧使用了对象字面量,如:
同名变量解构赋值
let node = {
type : 'identifier',
name : 'foo'
};
let {type,name} = node;
console.log(type);//'identifier'
console.log(name);//'foo'
不同变量解构赋值
let node = {
type : 'identifier',
name : 'foo'
};
let {type:localType,name:localName} = node;
console.log(localType);//'identifier'
console.log(localName);//'foo'
- 注意点
- 使用var、let、const对对象进行解构时,必须提供初始化器(即等号右边的值)
- 不使用var、let、const赋值时,需要将解构语句使用()进行包裹
({type,name} = node);//{}在js中作为代码块,单独使用加等号会报错会报错
- 默认值
当你使用解构赋值语句时,如果指定的本地变量没有同名属性,那么该变量会被赋值为undefined,可以对其进行指定默认值let node = {
type : 'identifier',
name : 'foo'
};
let {type,name,val} = node;
console.log(val);//undefined
({type,name,val = '234'} = node)
console.log(val);//'234'
- 嵌套的对象解构
使用类似于对象字面量的语法,可以深入到嵌套的对象结构中去提取你想要的数据
let node = {
type: "Identifier",
name: "foo",
loc: {
start: {
line: 1,
column: 1
},
end: {
line: 1,
column: 4
}
}
};
let { loc: { start }} = node;
console.log(start.line); // 1
console.log(start.column); // 1
这种方法使得本地变量start被赋值node中的loc的start对象,值得注意的是这种操作与直接node.loc.start的赋值是一致的,所以要注意值类型与引用类型的区别
- 注意点:此语句中并没有任何变量被绑定
// 没有变量被声明!
let { loc: {} } = node;
数组解构
- 形式
数组解构的语法看起来与对象解构非常相似,只是将对象字面量替换成了数组字面量。数组解构时,解构作用在数组内部的位置上,而不是作用在对象的具名属性上
let colors = [ "red", "green", "blue" ];
let [ firstColor, secondColor ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"
所以,对于数组解构,最主要在于位置的固定,当然,如果不想赋值某些值,可以直接略过,如:
var s = [1,2,3,4,5];
let [,,T] = s;
console,log(T);//3
- 注意点
- 使用var、let、const对对象进行解构时,必须提供初始化器(即等号右边的值)
- 不使用var、let、const赋值时,需要将解构语句使用()进行包裹,因为数组的[],与{}是不同的
- 对互换两个变量的值很有用,如排序算法中使用的,可以直接用
let a = 3;
let b = 4;
[b,a] = [a,b];
console.log(a);//4
console.log(b);//3
- 默认值
数组解构赋值同样允许在数组任意位置指定默认值。当指定位置的项不存在、或其值为undefined ,那么该默认值就会被使用let colors = [ "red" ];
let [ firstColor, secondColor = "green" ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"
- 嵌套的数组结构
与对象类似,只是仍使用的是数组字面量
let colors = [ "red", [ "green", "lightgreen" ], "blue" ];
console.log(secondColor); // "green"
- 剩余项
数组解构有个与函数的剩余参数类似的、名为剩余项( rest items )的概
念,它使用" ..." 语法来将剩余的项目赋值给一个指定的变量
let colors = [ "red", "green", "blue" ];
let [ firstColor, ...restColors ] = colors;
console.log(firstColor); // "red"
console.log(restColors.length); // 2
console.log(restColors[0]); // "green"
console.log(restColors[1]); // "blue"
混合解构
既有函数的解构,也有数组的解构,也只需要对象的创建出字面量来赋值即可,如:
let node = {
type: "Identifier",
loc: {
start: {
line: 1,
column: 1
}
},
range: [0, 3]
};
let {
loc: { start },
range: [ startIndex ]
} = node;
console.log(start.line); // 1
console.log(start.column); // 1
console.log(startIndex); // 0
实际使用- 参数解构
如:
// options 上的属性表示附加参数
function setCookie(name, value, options) {
options = options || {};
let secure = options.secure,
path = options.path,
domain = options.domain,
expires = options.expires;
// 设置 cookie 的代码
}
//可以改写为:对options进行解构并赋予默认值
function setCookie(name, value, { secure, path, domain, expires } = {}) {
// ...
}
总结
以上,便是学到的ES6的解构赋值的内容,主要区分对象解构与数组解构的形式,整体上很好使用,刚开始有点蒙,后面发现其实还是很有规律的对象字面量与数组字面量的使用,当然,注意点是要划重点的,记录到这,各位好梦!
9人点赞
作者:紫陌于微
链接:https://www.jianshu.com/p/ab4e4338047b
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
深入理解ES6之解构的更多相关文章
- 进军es6(2)---解构赋值
本该两周之前就该总结的,但最近一直在忙校招实习的事,耽误了很久.目前依然在等待阿里HR面后的结果中...但愿好事多磨!在阿里的某轮面试中面试官问到了es6的掌握情况,说明es6真的是大势所趋,我们更需 ...
- ES6 的解构赋值前每次都创建一个对象吗?会加重 GC 的负担吗?
本文来源于知乎上的一个提问. 为了程序的易读性,我们会使用 ES6 的解构赋值: function f({a,b}){} f({a:1,b:2}); 这个例子的函数调用中,会真的产生一个对象吗?如果会 ...
- ES6 对象解构
ES6 对象解构 第一眼看到,什么鬼? const { body } = document `` 其实等于: const body = document.body ``` http://es6.rua ...
- es6的解构赋值学习(1)
相对es5的简单的"="赋值来说,es6增加了一种新的赋值模式--解构赋值,按照它的规则,可以从数组和对象中提取值来对变量进行赋值,个人觉得方便了很多,但是这个模式有点恶心人,相比 ...
- Es6 新增解构赋值
1.数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 要想实现解构,就必须是容器,或者具有可遍历的接口. 以前,为 ...
- ES6 之 解构赋值
本博文配合 阮一峰 <ES6 标准入门(第3版)>一书进行简要概述 ES6 中变量的解构赋值. 数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这 ...
- ES6之解构赋值
截止到ES6,共有6种声明变量的方法,分别是var .function以及新增的let.const.import和class: 我们通常的赋值方法是: var foo='foo'; function ...
- 【读书笔记】【深入理解ES6】#5-解构:使数据访问更便捷
ES6为对象和数组都添加了解构功能,将数据解构打散的过程变得更简单,可以从打散后更小的部分中获取所需信息. 对象解构 let node = { type: "Identifier" ...
- ES6多层解构
const info = { person: { name: 'xiaobe', other: { age: 22, } }, song: 'rolling', } // 解构person的内容 co ...
随机推荐
- phpMyAdmin开启IP地址登录
根本没有其他文章说的那么麻烦,又是修改配置文件,又是修改首页文件.在根目录下有个libraries文件夹,进去有个config.default.php文件,修改里面的AllowArbitrarySer ...
- python之os模块(os.path)
我们在做自动化测试的时候,可能会遇到一些需要处理文件一些需求,那么我们可以通过直接写文件的目录进行操作,当然作为一名自动化测试工程师,怎么可能用这种方法?python中自带的有OS,我们可以通过os模 ...
- mysqlbinlog-Note
binlog_format = mixedlog-bin = /data/mysql/mysql-binexpire_logs_days = 7 #binlog过期清理时间max_binlog_siz ...
- JS数组去掉某一个元素
/**数组去掉某一个元素**/ Array.prototype.remove = function(val) { var index = this.indexOf(val); if (index &g ...
- hibernate-positional-parameter-does-not-exist-1-in-query
经过bug的排查,问题出在,scsj字段的赋值上; 通过字符串在数据库端生成即可:
- 2019年跨越速递Java工程师笔试题
1.下面哪个选项可以用于JSP页面之间传递对象(A C) A application B page C session D error E response 评语:这道题考察的是对JSP内置对象的了 ...
- FreeRTOS操作系统教程发布,支持F103,F407和F429,配套145个例子,1200页教程
前言说明:1. 首先感谢大家对我们安富莱电子的支持. 2. FreeRTOS最大的优势就是开源免费,商业使用的话不需要用户公开源代码,也不存在任何版权问题,是当前小型嵌入式操作系统 市场使用率最高 ...
- Mybatis基本类型参数非空判断(异常:There is no getter for property...)
先看一小段代码 <select id="queryByPhone" parameterType="java.lang.String" resultType ...
- fjnu2019第二次友谊赛 B题
### 题目链接 ### 题目大意: 给你一个 n * m 的地图以及小蛇蛇头的初始位置,告诉你它会往 上.下.左.右 四个方向走.若在走的过程中(包括结束时)会使得小蛇越界,则输出 "Ga ...
- Sql 中常用时间处理函数
1.Sql 中常用时间处理函数 GETDATE() 返回当前的日期和时间 DATEPART() 返回日期/时间的单独部分 DATEADD() 返回日期中添加或减去指定的时间间隔 DATEDI ...