ES6数组与对象的解构赋值详解


Posted in Javascript onJune 14, 2019

本文实例讲述了ES6数组与对象的解构赋值。分享给大家供大家参考,具体如下:

数组的解构赋值

基本用法

ES6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称之为解构(Destructuring)

// 以前为变量赋值,只能直接指定值
var a = 1;
var b = 2;
var c = 3;
// ES6允许写成这样
var [a,b,c] = [1,2,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]
let [x,y,...z] = ['a'];
x // "a"
y // undefined
z // []

默认值

解构赋值允许制定默认值

var [foo = true] = [];
foo // true
[x,y='b'] = ['a'];
// x='a', y='b'

注意,ES6内部使用严格相等运算符(===),判断一个位置是否有值。

所以,如果一个数组成员不严格等于undefined,默认值是不会生效的。

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

如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到的时候,才会求值:

function f(){
 console.log('aaa');
}
let [x=f()] = [1];

上面的代码中,因为x能取到值,所以函数f()根本不会执行。上面的代码其实等价于下面的代码:

let x;
if([1][0] === undefined){
 x = f();
}else{
 x = [1][0];
}

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

let [x=1,y=x] = [];
// x=1; y=1
let [x=1,y=x] = [2];
// x=2; y=2
let [x=1,y=x] = [1,2];
// x=1; y=2
let [x=y,y=1] = []; // ReferenceError

上面最后一个表达式,因为x用到默认值是y时,y还没有声明。

对象的解构赋值

解构不仅可以用于数组,还可以用于对象

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",bar:"bbb"};
baz // "aaa"
let obj = {first:"hello",last:"world"};
let {first:f,lats:l} = obj;
f // "hello"
l // "world"

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

真正被赋值的是后者,而不是前者。

var {foo:baz} = {foo:"aaa",bar:"bbb"};
baz // "aaa"
foo // error: foo is not defined

上面的代码中, foo是匹配的模式, baz才是变量。真正被赋值的是变量baz,而不是模式foo。

和数组一样,解构也可以用于嵌套解构的对象

var obj = {
 p:["hello",{y:"world"}]
};
var {p:[x,{y}]} = obj;
x // "hello"
y // "world"

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

对象的解构也可以指定默认值:

var {x=3} = {};
x // 3
var {x,y=5} = {x:1};
x // 1
y // 5
var {x: y=3} = {x: 5};
y // 5

如果解构失败,变量的值等于undefined

var {foo} = {bar:"baz"};
foo // undefined

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

// 报错
var {foo: {bar}} = {baz:"baz"};

由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构:

var arr = [1,2,3];
var {0:first, [arr.length-1]:last} = arr;
first // 1
last // 3

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
asm.js使用示例代码
Nov 28 Javascript
js加减乘除丢失精度问题解决方法
May 16 Javascript
原生javascript实现图片弹窗交互效果
Jan 12 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
原生js实现轮播图
Feb 27 Javascript
javascript 封装Date日期类实例详解
May 28 Javascript
vuex state及mapState的基础用法详解
Apr 19 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 Javascript
vue中rem的配置的方法示例
Aug 30 Javascript
解决layer 动态加载select 失效的问题
Sep 18 Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 Javascript
简单了解Ajax表单序列化的实现方法
Jun 14 #Javascript
通过JS深度判断两个对象字段相同
Jun 14 #Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 #Javascript
利用JavaScript将Excel转换为JSON示例代码
Jun 14 #Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
Jun 14 #Javascript
Vue动态创建注册component的实例代码
Jun 14 #Javascript
基于Proxy的小程序状态管理实现
Jun 14 #Javascript
You might like
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
ASP中进行HTML数据及JS数据编码函数
2009/11/11 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
深入理解Javascript中的作用域链和闭包
2017/04/25 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
Python实现二维数组输出为图片
2018/04/03 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
后端开发使用pycharm的技巧(推荐)
2020/03/27 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
详解HTML5中CSS外观属性
2020/09/10 HTML / CSS
财务工作者先进事迹材料
2014/01/17 职场文书
会计专业毕业自荐书范文
2014/02/08 职场文书
公司经理任命书
2014/06/05 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
2014年党务公开工作总结
2014/12/09 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
php双向队列实例讲解
2021/11/17 PHP
讲解Python实例练习逆序输出字符串
2022/05/06 Python
SQL Server中搜索特定的对象
2022/05/25 SQL Server