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跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 Javascript
JavaScript开发者必备的10个Sublime Text插件
Feb 27 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
AngularJS实现标签页的两种方式
Sep 05 Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 Javascript
javascript 封装Date日期类实例详解
May 28 Javascript
vue-resource + json-server模拟数据的方法
Nov 02 Javascript
JS实现的DOM插入节点操作示例
Apr 04 Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 Javascript
vue移动端项目缓存问题实践记录
Oct 29 Javascript
Angular7.2.7路由使用初体验
Mar 01 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安装攻略:常见问题解答(三)
2006/10/09 PHP
PHP 多维数组的排序问题 根据二维数组中某个项排序
2011/11/09 PHP
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
PHP制作万年历
2015/01/07 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
JS异常处理的一个想法(sofish)
2013/03/14 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
利用node.js实现反向代理的方法详解
2017/07/24 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
详解Django缓存处理中Vary头部的使用
2015/07/24 Python
详解Swift中属性的声明与作用
2016/06/30 Python
漂亮的Django Markdown富文本app插件的实现
2019/01/02 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
css3图片边框border-image的用法
2017/06/30 HTML / CSS
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
C#面试题
2016/05/06 面试题
临床医学专业毕业生的自我评价
2013/10/17 职场文书
商场父亲节活动方案
2014/08/27 职场文书
导游词之南京夫子庙
2019/12/09 职场文书
python获取对象信息的实例详解
2021/07/07 Python