ECMAScript6-解构
▓▓▓▓▓▓ 大致介绍
解构:就是将声明的一组变量和与相同结构的数组或者对象的元素数值一一对应,并将变量相对应元素进行赋值
▓▓▓▓▓▓ 数组解构
例子:
let [a,b,c] = [1,2,3];
console.log(a); //
console.log([a,b,c]); //[1, 2, 3]
可以看到,数组中的a,b,c分别对应1,2,3
嵌套的数组也可以进行解构
let [a,[b,[c]]] = [1,[2,[3]]];
console.log(c); // let [d,,e] = [1,2,3];
console.log(e); // let [f,...tail] = [1,2,3];
console.log(tail); //[2, 3]
在解构不成功时,变量的值就是undefined
let [a,b] = [1];
console.log(b); //undefined
不完全解构也是可以的
let [a,b,c] = [1,2,3,4];
console.log(c); //
也可以设置默认值
let [a = 1] = [];
console.log(a); // let [b = 1] = [2];
console.log(b); // let [c = 1] = [undefined];
console.log(c); // let [d = 1] = [null];
console.log(d); //null
注意:在ES6中使用严格相等运算符(===)。所以如果默认值不严格相等undefined,默认值就不会生效。例如null
默认值也可以是表达式,但是要注意只有默认值在使用时才会触发函数(惰性求值)
function f(){
alert(1);
} let [a = f()] = [3]; //f()不会执行 let [b = f()] = [undefined]; //会执行
▓▓▓▓▓▓ 对象解构
例子:
let {foo,bar} = {foo:1,bar:2};
console.log(foo); //
注意:与数组不同,对象解构时不是根据位置对变量赋值的,而是通过变量名进行赋值,即变量名和属性名必须相等才可以进行赋值,位置不重要
let {bar,foo} = {foo:1,bar:2};
console.log(foo);//
如果变量名和属性名不相同,则要采取下面的方法
let {first: f,last: l} = {first:1,last:3};
console.log(l); //
意思就是先在对象中查找first属性,如果有就赋值给f,其中first是匹配的模式,而f才是真正的变量
所以对象解构的完整形式是:
let {first: first,last: last} = {first:1,last:3};
对象解构也可以进行嵌套
let obj = {
a:1,
b:[
'hello',
{c:'world'}
]
} let {a: a,b: [h,{c:w}]} = obj; console.log(a); //
console.log(h); //hello
console.log(w); //world
对象解构也可以设置默认值,并且如果解构失败,变量会赋值undefined
let {x: x = 1,y: y=2,z: z=3,w: w} = {x:3,y:null,z:undefined}; console.log(x) //
console.log(y) //null
console.log(z) //
console.log(w) //undefined
▓▓▓▓▓▓ 字符串解构
字符串之所以能够解构是因为此时字符串转换成了一个数组
let [a,b,c] = 'hello';
console.log(a); //h
console.log(b); //e
console.log(c); //l
▓▓▓▓▓▓ 数值和布尔值解构
解构赋值时,如果等号右边是数值和布尔值,则会先转为对象
let {toString: s} = 123;
s === Number.prototype.toString // true let {toString: a} = true;
a === Boolean.prototype.toString // true
上面代码中,数值和布尔值的包装对象都有tostring属性,因此变量s都能取到值。
解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。由于null和undefined无法转为对象,所以对它们进行解构赋值,都会报错。
参考资料:
ECMAScript 6入门-阮一峰
ECMAScript6-解构的更多相关文章
- ECMAscript6新特性之解构赋值
在以前,我们要对变量赋值,只能直接指定值.比如:var a = 1;var b = 2;但是发现这种写法写起来有点麻烦,一点都不简洁,而在ECMAScript6中引入了一种新的概念,那就是" ...
- ECMAScript6学习笔记 ——let、const、变量解构赋值
let 不存在变量提升 通过let声明的变量仅在块级作用域内有效 不允许在同一个作用域内重复声明一个变量 防止值公用 var oUl = document.querySelectorAll('ul&g ...
- ECMAScript6 - 2.变量的解构赋值
1.数组解构赋值 1.1.基本用法 // (1)对数组变量赋值 let [foo, [[bar], baz]] = [1, [[2], 3]]; foo; // 1 bar; // 2 baz; // ...
- ECMAScript6 入门教程记录 变量的解构赋值
(1)变量的解构赋值 基本用法:ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). let a = 1; let b = 2; let c = ...
- ES6新特性2:变量的解构赋值
本文摘自ECMAScript6入门,转载请注明出处. ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring).不仅适用于var命令,也适用于let和c ...
- ES6 - 解构(数组和对象)
解构对象 /** * 解构:快捷,方便 * * 对象解构 */ { var expense = { type: "es6", amount: "45" }; / ...
- 豪情-CSS解构系列之-新浪页面解构-01
目录: 一. 新浪的布局特点 二. 内容细节的特点 三. 其中相关的一些基础技术点 1. 常见布局方法 2. 布局要点 3. Debugger误区 4.列表 5.字体颜色 6.CSS选择符 7.CSS ...
- es6之变量的解构赋值
es5中通常我们声明变量都是以下的方式: var a = 10; var b = 20; var c = 30; //或者 var a = 10,b = 20,c = 30; //或者 var arr ...
- ES6之解构赋值
截止到ES6,共有6种声明变量的方法,分别是var .function以及新增的let.const.import和class: 我们通常的赋值方法是: var foo='foo'; function ...
- 用vue.js学习es6(三):数组、对象和函数的解构
一.数组的解构: 以前的方式: var arr = [1,2,3]; console.log(arr[0]); //1 console.log(arr[1]); //2 现在的方式: var [a,b ...
随机推荐
- UINavigationController实现全屏滑动返回功能
说明: UINavigationController默认在push出的控制器中都有边沿滑动返回功能,但是只能从屏幕左边滑才能返回,若从屏幕中间画并没有效果.下面实现全屏滑动功能. 探究: 系统默认能够 ...
- Android 学习笔记1
参考:http://blog.csdn.net/ztp800201/article/details/7265414 为了快速引入后面的内容就直接使用了这种办法来实现功能,后期再改进: /* ***** ...
- 使用rsync+inotify-tools+ssh实现文件实时同步
假设某服务器架构中有两台web服务器(IP为192.168.1.252和192.168.1.254),一台代码更新发布服务器(IP为192.168.1.251),需要同步的目录是/data/www/, ...
- shell基础学习系列(一)
打开文本编辑器,新建一个文件,扩展名为sh(sh代表shell),扩展名并不影响脚本执行. 输入一些代码: #!/bin/bash echo "Hello World !" &qu ...
- devexpress chartcontrol实现非连续点数据的显示
1.先上图: 其中暗红的曲线中数据不连续的,在实际开发中可能也会遇到这种情况,由于断电或其他原因导致部分日期数据无法采集,如果按一般情况来显示可能会显示如下图所示: 图中可以看出非连续曲线中,3月5号 ...
- GDKOI2015滚粗记
又是愉悦的滚粗了hahaha(特别不甘心啊啊啊) 其实去比赛每次都一样啦,就是每次吃饭睡觉补番考试评讲互黑跪烂什么的,这次就不用说了啦,先把老师要求写的东西贴出来再写点别的啦 这次暴露了很多问题,首先 ...
- Spring Mvc + Easyui中根据查询结果导出文件
项目是典型的SpringMvc + Easyui,需求是前台页面根据查询条件导出生成CSV文件. 基本流程是:前台页面通过表单提交的方式,请求后台,后台接受到查询参数,根据查询参数查询到数据集合,最后 ...
- JS高级程序设计学习笔记——继承
我们知道,在OO语言中,继承可分为接口继承和实现继承.而ECMAScript的函数没有签名,不能实现“接口继承”,只能通过原型链实现“实现继承”. 在学习了各种继承模式之后,简单总结一下各种继承模式的 ...
- 最近发现的.net core中的一些bugs
1.使用.net core的过程中发现TypeInfo.GetCustomAttributes()只能写在主线程中,否则如果该自定义特性存在于nuget中就会报错,貌似nuget中的dll仅在主线程使 ...
- 一道面试题引发的对javascript类型转换的思考
最近群里有人发了下面这题:实现一个函数,运算结果可以满足如下预期结果: add(1)(2) // 3 add(1, 2, 3)(10) // 16 add(1)(2)(3)(4)(5) // 15 对 ...