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 相关文章推荐
jQuery EasyUI API 中文文档 - Calendar日历使用
Oct 19 Javascript
javascript间隔刷新的简单实例
Nov 14 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
在AngularJS框架中处理数据建模的方式解析
Mar 05 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
详解VUE的状态控制与延时加载刷新
Mar 27 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
ES6 Generator基本使用方法示例
Jun 06 Javascript
js实现纯前端压缩图片
Nov 16 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
php读取mysql的简单实例
2014/01/15 PHP
php 获取页面中指定内容的实现类
2014/01/23 PHP
php中的路径问题与set_include_path使用介绍
2014/02/11 PHP
php网站被挂木马后的修复方法总结
2014/11/06 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
JQuery在页面中添加和除移DOM示例代码
2013/06/24 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
利用Angularjs中模块ui-route管理状态的方法
2016/12/27 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
2017/03/23 jQuery
JS中mouseup事件丢失的原因与解决办法
2017/06/14 Javascript
Vue数组更新及过滤排序功能
2017/08/10 Javascript
vue实现弹幕功能
2019/10/25 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
2019/11/08 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
详解python的数字类型变量与其方法
2016/11/20 Python
python实现朴素贝叶斯分类器
2018/03/28 Python
Python中文件的读取和写入操作
2018/04/27 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
日本土著品牌,综合型购物网站:Cecile
2016/08/23 全球购物
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
门卫岗位安全职责
2013/12/13 职场文书
三个儿子教学反思
2014/02/03 职场文书
创业计划书之网络外卖
2019/10/31 职场文书
go设置多个GOPATH的方式
2021/05/05 Golang