ES6学习之变量的解构赋值


Posted in Javascript onFebruary 12, 2017

变量的解构赋值

ES6中允许按照一定模式,从数组和对象中提取,对变量进行赋值。

数组的解构赋值

var [a,b,c] = [1,2,3];
a // 1;
b // 2;
c // 3;

上面的代码标示可以从数组中提取值,按照位置的对应关系对变量进行赋值。

本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。

let [foo,[[bar],baz]] = [1,[[2],3]];
foo //1;
bar //2;
baz //3;

let [,,third] = ['foo','bar','baz'];
third //'baz'

let [head,...tail] = [1,2,3,4]
head //1;
tail //[2,3,4]

如果解构不成功,变量的值就等于undefined。

let [x,y,z] = ['a']
x // 'a';
y // undefined
z //[]

不完全解构

如果等号左边的模式只匹配等号右边数组的一部分,解构依然可以成功,这种情况叫做不完全解构。

let [x,y] = [1,2,3]
x //1
y //2

如果等号右边不是数组,那么将会报错。(不具备可遍历的结构)。

只要某种数据结构具有Iterator接口,都可以采用数组形式的解构赋值

function* fibs(){
 var a = 0;
 var b = 1;
 while(true){
  yield a;
  [a,b] = [b,a+b];
 }
}

var [first,second,third,fourth,fifth,sixth] = fibs();
sixth // 5

fibs是一个Generator函数,原生具有Iterator接口,解构赋值会依次从这个接口获取值。

默认值

解构赋值允许指定默认值。

var [foo=true] = [];
foo //true

ES6内部使用严格相等于运算符(===)判断一个位置是否有值。所以,一个数组成员如果不严格等于undefined,默认值便不会生效。

var [x = 1] = [undefined]
x // 1

var [x = 1] = [null]
x // null

表达式也可以作为默认值,如果表达式作为默认值的时候,该表达式是惰性求值的,只有在用到的时候才会求值。

function f(){
 console.log('aaa')
}

let [x = f()] = [1]

在上面的代码中,函数f不会执行,是因为x能取到值。

默认值可以引用解构赋值的其他变量,但该变量必须已经声明。

对象的解构赋值

解构赋值可以应用在数组上,同样也可以用于对象。

var {foo,bar} = {foo:'aaa',bar:'bbb'}
 foo // 'aaa'
 bar // 'bbb'

对象的解构赋值与数组有一个不同点,就是数组的元素是按次序排序的,变量的取值由它的位置决定,而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

var {bar,foo} = {foo:'aaa',bar:'bbb'}
foo //'aaa'
bar //'bbb'


var {baz} = {foo:'aaa',bar:'bbb'}
baz //undefined

如果变量名与属性名不一致,那必须写成这样:

var {foo:baz} = {foo:'aaa'}
baz //'aaa'

实际上对象的解构赋值是以下的形式简写:

var {foo:foo,bar:bar} = {foo:'aaa',bar:'bbb'}

对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量,真正被赋值的是后者,而不是前者。

但是,采取上面的写法时,变量的声明和赋值是一起的,对于let和const而言,变量不能重新声明,所以一旦赋值的变量以前声明过,就会报错。

对象的解构也可以用于嵌套结构的对象。

var obj = {
 p: [
  'hello' ,
  {
   y : 'world'
  }
 ]
}

var {p:[x,{y}]} = obj

x //'hello'
y //'world'

这时p是模式,不是变量,因此不会被赋值。

对象的解构赋值也可以指定默认值,默认值的生效条件是,对象的属性值严格等于undefined。

var {x=3} = {x:undefined}
x //3

var {x=3} = {x:null}
x //null

如果解构模式是嵌套对象,而且子对象所在的父属性不存在,那么将会报错。

var {foo:{bar}} = {baz:'baz'}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用ES6能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
HTML中事件触发列表与解说
Jul 09 Javascript
js判断变量是否未定义的代码
Mar 28 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
js阻止默认右键的下拉菜单方法
Jan 02 Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
微信小程序仿今日头条导航栏滚动解析
Aug 20 Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 Javascript
Angular短信模板校验代码
Sep 23 Javascript
AngularJS实现路由实例
Feb 12 #Javascript
jQuery文字轮播特效
Feb 12 #Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
Feb 12 #Javascript
jQuery、zepto、js常用小技巧
Feb 12 #Javascript
JS中如何实现Laravel的route函数详解
Feb 12 #Javascript
js输入框使用正则表达式校验输入内容的实例
Feb 12 #Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 #Javascript
You might like
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
javascript克隆对象深度介绍
2012/11/20 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
js中split函数的使用方法说明
2013/12/26 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
Angular2 父子组件数据通信实例
2017/06/22 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
[19:26]TNC vs EG (BO3)
2018/06/07 DOTA
Python爬取三国演义的实现方法
2016/09/12 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
Python闭包思想与用法浅析
2018/12/27 Python
Python删除n行后的其他行方法
2019/01/28 Python
很酷的python表白工具 你喜欢我吗
2019/04/11 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
Django 在iframe里跳转顶层url的例子
2019/08/21 Python
python logging日志模块原理及操作解析
2019/10/12 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
基于Python实现粒子滤波效果
2020/12/01 Python
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
Laravel中Kafka的使用详解
2021/03/24 PHP
单位实习证明怎么写
2014/01/17 职场文书
婚礼主持结束词
2014/03/13 职场文书
合作协议书格式
2014/08/19 职场文书
机关干部三严三实心得体会
2014/10/13 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书