▓▓▓▓▓▓ 大致介绍

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

▓▓▓▓▓▓ 数组解构

  例子:

    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. Ninject之旅目录

    第一章:理解依赖注入 Ninject之旅之一:理解DI 第二章:开始使用Ninject Ninject之旅之二:开始使用Ninject(附程序下载) Ninject之旅之三:Ninject对象生命周期 ...

  2. python面向对象编程对象和实例的理解

    给你一个眼神,自己体会

  3. C语言总结

    我们用了20天的时间左右的时间来学习简单的C语言,对于C语言,总体来说我是学的不是特别透彻,感觉自己什么都不懂一样.明天就要考试了,希望明天考个好成绩,为明年打下一个良好的基础. 这段时间我们学习了: ...

  4. 【转】解决UpdatePanel 与 jQuery的冲突

    现在越来越多的朋友喜欢将jQuery和ASP.NET AJAX 一起来用,最近,许多印度人在forum里抱怨说UpdatePanel和jQuery不兼容,许多jQuery效果在UpdatePanel更 ...

  5. 在内存充足时malloc函数分配内存失败的原因及解决

    昨天在修改自己的代码的时候,碰到了malloc函数内存分配失败,上网翻了翻,一个很可能的原因是之前的代码出现了越界操作,导致malloc分配函数所涉及的一些信息被破坏.在这个思想的指导下,今天又是郁闷 ...

  6. jQuery源码学习:Deferred Object

    本文所有讨论均基于jQuery版本3.1.1,官网http://jquery.com/. 一.Deferred Object 1. 简介和创建 详见API:http://api.jquery.com/ ...

  7. 强化学习读书笔记 - 02 - 多臂老O虎O机问题

    # 强化学习读书笔记 - 02 - 多臂老O虎O机问题 学习笔记: [Reinforcement Learning: An Introduction, Richard S. Sutton and An ...

  8. Redis 安装与初体验

    一.Redis简介 Redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(s ...

  9. Laravel Migrate

    artisan命令行创建migrate 格式: php artisan make:migration YourFileName 示例: php artisan make:migration creat ...

  10. UI培训就业会很难吗

    众所周知UI是研究人机交互的学科,他是从互联网发展而来的,单从目前它的应用领域来看,主要应用于软件.互联网.移动智能设备.游戏和虚拟现实影音方面.这些都是新兴的热门方向和活跃领域.目前人才缺口和社会需 ...