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 相关文章推荐
jQuery实战之品牌展示列表效果
Apr 10 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 Javascript
jquery幻灯片插件bxslider样式改进实例
Oct 15 Javascript
无刷新上传文件并返回自定义值
Jun 11 Javascript
bootstrap网页框架的使用方法
May 10 Javascript
基于Bootstrap+jQuery.validate实现表单验证
May 30 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
webpack打包单页面如何引用的js
Jun 07 Javascript
jQuery pagination分页示例详解
Oct 23 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
vue+elementUI实现表格关键字筛选高亮
Oct 26 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流量统计功能的实现代码
2012/09/29 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
浅析php工厂模式
2014/11/25 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
PHP获取Exif缩略图的方法
2015/07/13 PHP
Swoole-1.7.22 版本已发布,修复PHP7相关问题
2015/12/31 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
JavaScript 语言的递归编程
2010/05/18 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
jQuery中click事件用法实例
2014/12/26 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
JavaScript实现旋转轮播图
2020/08/18 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
python3.6数独问题的解决
2019/01/21 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
python实现批量文件重命名
2019/10/31 Python
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
优秀实习自我鉴定
2013/12/04 职场文书
财务经理的岗位职责
2013/12/17 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
违纪检讨书
2015/01/27 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
公司保密管理制度
2015/08/04 职场文书
Python+Appium自动化测试的实战
2021/06/30 Python