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 相关文章推荐
javascript 操作select下拉列表框的一点小经验
Mar 20 Javascript
JavaScript中的16进制字符(改进)
Nov 21 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 Javascript
jQuery中position()方法用法实例
Jan 16 Javascript
JQuery控制Radio选中方法分析
May 29 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
Jan 08 Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 Javascript
对vue.js中this.$emit的深入理解
Feb 23 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
vue动态注册组件实例代码详解
May 30 Javascript
npx create-react-app xxx创建项目报错的解决办法
Feb 17 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 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 文件上传代码(限制jpg文件)
2010/01/05 PHP
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
php中session与cookie的比较
2015/01/27 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
兼容主流浏览器的JS复制内容到剪贴板
2014/12/12 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
javascript常用的方法整理
2015/08/20 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
微信JSAPI Ticket接口签名详解
2020/06/28 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
python实现人人网登录示例分享
2014/01/19 Python
Python中使用wxPython开发的一个简易笔记本程序实例
2015/02/08 Python
Python中subprocess的简单使用示例
2015/07/28 Python
Django返回json数据用法示例
2016/09/18 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
python判断元素是否存在的实例方法
2020/09/24 Python
Python数据可视化常用4大绘图库原理详解
2020/10/23 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
Unix/Linux开发面试题
2016/08/16 面试题
公司授权委托书范文
2014/09/21 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python