▓▓▓▓▓▓ 大致介绍

  解构:就是将声明的一组变量和与相同结构的数组或者对象的元素数值一一对应,并将变量相对应元素进行赋值

▓▓▓▓▓▓ 数组解构

  例子:

    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-解构的更多相关文章

  1. ECMAscript6新特性之解构赋值

    在以前,我们要对变量赋值,只能直接指定值.比如:var a = 1;var b = 2;但是发现这种写法写起来有点麻烦,一点都不简洁,而在ECMAScript6中引入了一种新的概念,那就是" ...

  2. ECMAScript6学习笔记 ——let、const、变量解构赋值

    let 不存在变量提升 通过let声明的变量仅在块级作用域内有效 不允许在同一个作用域内重复声明一个变量 防止值公用 var oUl = document.querySelectorAll('ul&g ...

  3. ECMAScript6 - 2.变量的解构赋值

    1.数组解构赋值 1.1.基本用法 // (1)对数组变量赋值 let [foo, [[bar], baz]] = [1, [[2], 3]]; foo; // 1 bar; // 2 baz; // ...

  4. ECMAScript6 入门教程记录 变量的解构赋值

    (1)变量的解构赋值 基本用法:ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). let a = 1; let b = 2; let c = ...

  5. ES6新特性2:变量的解构赋值

    本文摘自ECMAScript6入门,转载请注明出处. ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring).不仅适用于var命令,也适用于let和c ...

  6. ES6 - 解构(数组和对象)

    解构对象 /** * 解构:快捷,方便 * * 对象解构 */ { var expense = { type: "es6", amount: "45" }; / ...

  7. 豪情-CSS解构系列之-新浪页面解构-01

    目录: 一. 新浪的布局特点 二. 内容细节的特点 三. 其中相关的一些基础技术点 1. 常见布局方法 2. 布局要点 3. Debugger误区 4.列表 5.字体颜色 6.CSS选择符 7.CSS ...

  8. es6之变量的解构赋值

    es5中通常我们声明变量都是以下的方式: var a = 10; var b = 20; var c = 30; //或者 var a = 10,b = 20,c = 30; //或者 var arr ...

  9. ES6之解构赋值

    截止到ES6,共有6种声明变量的方法,分别是var .function以及新增的let.const.import和class: 我们通常的赋值方法是: var foo='foo'; function ...

  10. 用vue.js学习es6(三):数组、对象和函数的解构

    一.数组的解构: 以前的方式: var arr = [1,2,3]; console.log(arr[0]); //1 console.log(arr[1]); //2 现在的方式: var [a,b ...

随机推荐

  1. session工作原理简介

    session是什么 首先,我们需要知道session是什么.有比较专业的人将session称之为会话控制.说实在的,如果这么说的话,我也不清楚session到底算是什么. 其实session是一个存 ...

  2. java udp socket(双通信)

    参考博客:http://blog.csdn.net/wintys/article/details/3525643/,非常感谢 实现功能:客户端发送字符串A      ->服务端接收并显示在控制台 ...

  3. mybatis进阶--一对一查询

    所谓的一对一查询,就是说我们在查询一个表的数据的时候,需要关联查询其他表的数据. 需求 首先说一个使用一对一查询的小需求吧:假设我们在查询某一个订单的信息的时候,需要关联查询出创建这个订单对应的用户信 ...

  4. JS批量替换内容中关键词为超链接,避开已存在的链接和alt、title中的关键词

    懂点seo的人都知道要给内容中关键词加上链接,形成站内锚文本链接,这对seo有很大的帮助. 思路就是在数据库中录入若干个关键词和关键词对应的链接,当然链接可以根据关键词的id自动生成,或者直接用关键词 ...

  5. HTTP笔记(一)

    最近在看<图解HTTP>.全书以图解的形式生动形象的讲解了HTTP协议.本文是根据该书整理的笔记,方便以后回顾. HTTP的诞生 HTTP又称超文本传输协议(HTTP,HyperText ...

  6. 每天一个Linux命令(18)--locate命令

    locate让使用者可以很快速的搜寻档案系统内是否有指定的档案.器方法是先建立一个包括系统内所有档案名称及路径的数据库,之后当寻找时就需查询这个数据库,而不必实际深入档案系统之中了.在一般的 ditr ...

  7. iOS视频编辑SDK

    IOS视频编辑SDK接入说明 一.名词解释 分辨率:用于计算机视频处理的图像,以水平和垂直方向上所能显示的像素数来表示分辨率.常见视频分辨率的有1080P即1920x1080,720P即1080x72 ...

  8. 使用jQuery快速高效制作网页特效-----------------------------之jQuery事件与动画

    1.基础事件 分为三个事件 1.1 window事件 所谓window事件,就是当用户执行某些会影响浏览器的操作时,而触发的事件. 1.2 鼠标事件 鼠标事件顾名思义就是当用户在文档上移动或单击鼠标时 ...

  9. 关于TCP/IP协议栈

    1. TCP/IP协议栈 与OSI参考模型不同,TCP/IP协议栈共有4层,其中网络接口层对应OSI中的物理层和数据链路层,应用层对应OSI中的应用层.表示层和会话层. 在网络接口层的主要协议有:AR ...

  10. Oracle 重建控制文件

    前些天在做Oracle数据库恢复测试时,因为一些异常操作导致控制文件出了问题,数据库无法正常使用,这里记录一下重建控制文件的操作 一.使用sysdba用户登入数据库 此时普通用户已无法链接数据库 二. ...