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 相关文章推荐
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
Apr 07 Javascript
jquery插件制作 自增长输入框实现代码
Aug 17 jQuery
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
jQuery trigger()方法用法介绍
Jan 13 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
Vue.js系列之项目搭建(1)
Jan 03 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
Aug 31 Javascript
webuploader实现上传图片到服务器功能
Aug 16 Javascript
angularJs中$scope数据序列化的实例
Sep 30 Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 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下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
php获得url参数中具有&的值的方法
2014/03/05 PHP
PHP.ini中配置屏蔽错误信息显示和保存错误日志的例子
2014/05/12 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
javascript 原型模式实现OOP的再研究
2009/04/09 Javascript
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
javascript完美拖拽的实现方法
2013/09/29 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
Python基于回溯法子集树模板解决全排列问题示例
2017/09/07 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
解决python测试opencv时imread导致的错误问题
2019/01/26 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
C语言编程练习
2012/04/02 面试题
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
小学体育教学反思
2014/01/31 职场文书
大班开学家长寄语
2014/04/04 职场文书
党员教师一句话承诺
2014/05/30 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
商业用房租赁协议书
2014/10/13 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python
解决python3安装pandas出错的问题
2021/05/20 Python