1、解构的含义

允许按照一定的模式,从数组和对象中取值,对变量进行赋值,称为解构。

解构赋值时,只要等号右边的值不是对象,就先将其转换成对象。

 本质上,这种写法属于 “模式匹配”,只要两边模式相同,左边的变量就会被赋予对应的值。
let [head,...tail]=[, , , ]; //不完全解构,左边的模式,只匹配一部分的等号右边的数组

解构后: head=1,tail=[2,3,4]。

2、解构的限制。

(1)undefined与null 无法转换成对象,解构赋值就会报错。

let { y } = null;    // Cannot match against 'undefined' or 'null'.

(2)如果等号的右边不是数组,转换对象以后不具备 Iterator接口,或本身就不具备Iterator接口,

  即某种数据结构具有Iterator接口,都可以采用数组形式的解构赋值。
    let [foo]=; //undefined is not a function,报错的行数会指向上一行代码

    let [foo1,foo2]=new Set(['a', 'b', 'c']);

3、解构赋值时, 左边参数允许默认值。

    (1)ES6内部使用严格相对运算符,因此,若defaultValue!==undefined,默认值失效。
    var [x=]=[undefined]; //x=1
var [y=]=[null]; //y=2
    (2)赋予默认值时,左边参数 可以引用解构赋值的其他变量,但该变量必须已经声明.
let [x1=y1,y1=]=[]; //error,因为此时y1还没有值,应该如此写: let[y=1,x=y]=[];

4、对象解构赋值

 对象属性没有次序,变量名必须与属性相同。
    let { fishInstance,dogInstance}={
dogInstance: {
name: 'dog',
moveType: 'run'
},
fishInstance{
name:'fish'
}
}

5、变量名与属性名不一致,必须写成下面这样。

真正被赋值的是后者,而不是前者。

let { oldName:newName}={oldName: '', bar: 'barTest'}

6、

 let tree = {
root: {
leaf: {
left: ,
right:
}
}
}
var { root:{leaf:{left}} }=tree; //此时, root 与 leaf 都是模式,不会被赋值,只有leaf是变量
console.log(root);  /*root is not defined*/

7、对象的解构也可以指定默认值,生效的条件是对象的属性严格等于 undefined

 如果解构模式是嵌套的对象,而且子对象所在的父属性不存在,则error。
 let {x=}={};

 let { foo: { name }}={bar: 'bar'};

 将一个已经申明的变量用于解构赋值,必须非常小心。
 let temp;
{temp}= {x: }; /error ( { temp }={x: } ); //使用圆括号,避免JS引擎将 "{ }" 解释为代码块
8、字符串解构赋值,会将字符串转换成类似数组的对象。
 const [a,b,c,d,e]='hello world';
let { length:strLen }='world';

9、解构 数值和布尔值时,先转换成对象

   let { toString:s1 } =; //s1===Number.prototype.toString

    let { toString: s2}=true; //s2===Boolean.prototype.toString
解构使用场景
  (1)可以很方便的将 现有对象的方法,赋值给某个变量.
let { log: selfLog}=console;
selfLog('test log');
  (2)交换变量.
[x,y]=[y,x];
  (3)从函数返回多个值
    function getPerson() {
return {
name: 'jack',
age:
}
} var {name,age}=getPerson();
  (4) 定义函数参数后,可以不按顺序传入
    function setPerson({name,age,address}) {

    }

    setPerson({age: , address: 'china', name: 'Tom'});
  (5)提取JSON对象中的数据
  let jsonData = {
age: ,
name: 'Tom',
son: [
'little Jack',
'little Tom'
]
}; let { son:child }=jsonData;
  (6)遍历map结构
    var map =new Map();

    for(let [key,value] of map) { }

    for(let [,value] of map ) { }
  (7)获取模块的指定方法

 const { SourceMapConsumer }= require('');

												

ES6(二) Destructuring-变量的解构赋值的更多相关文章

  1. ES6学习之变量的解构赋值

    前言:什么是ES6?ECMAScript 6(简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.其中相比较于ES5新增了诸多的特性,并且ES6可转换为ES5的语法.- ...

  2. ES6学习历程(变量的解构赋值)

    一.数组的解构赋值 1.举几个例子足以理解 let [a, b, c] = [1, 2, 3]; a:1;  b:2;  c:3; let [x, , y] = [1, 2, 3];  x:1   y ...

  3. ES6学习4 变量的解构赋值

    变量的解构赋值 一.数组结构赋值 1.数组结构赋值 let [a, b, c] = [1, 2, 3]; ES6 可以从数组中提取值,按照对应位置,对变量赋值. 1)  本质上,这种写法属于“模式匹配 ...

  4. ES6中的变量的解构赋值, 解放我们的双手,实现变量的批量赋值

    ES6--变量的解构赋值 引言 正文 一.数组的解构赋值 解构失败 不完全解构 默认值 二.对象的解构赋值 三.字符串的解构赋值 结束语 引言 变量的解构赋值, 听起来很复杂, 简单点说可以理解成批量 ...

  5. ECMAScript 6 入门学习笔记(二)——变量的解构赋值

    一.数组的解构赋值 let [foo, [[bar], baz]] = [1, [[2], 3]]; ①可多不可少,等号的右边是数组 let [x, y] = [1, 2, 3]; //可以 let ...

  6. ES6 学习笔记 - 变量的解构赋值

    变量的解构赋值 学习资料:ECMAScript 6 入门 数组的解构赋值 基本用法 可以从数组中提取值,按照对应位置,对变量赋值.这种写法属于"模式匹配". let [a, b, ...

  7. ES6入门之变量的解构赋值(二)

    前言 在上一章 ES6入门之let和const命令中我们对ES6的相关语法已经有了初步了解,上一章中我们主要学习了三大部分的内容,let命令的使用,块级作用域,const命令的使用,那么从本篇博客将进 ...

  8. JavaScript学习笔记 -- ES6学习(三) 变量的解构赋值

    1.解构赋值的定义 在ES6中,允许按照一定模式,从数组和对象中提取值(所谓解构),然后对变量进行赋值. var a = 1; var b = 2; var c = 3; //等价于 var [a, ...

  9. 《ECMAScript 6 入门》【二、变量的解构赋值】(持续更新中……)

    前言: 让我们看下es6的新语法解构,跟模式匹配类似.一.数组的解构赋值 举个例子给多个变量赋值的写法: var a =1;var b =2;var c =3; 需要写多个变量特别麻烦,我们先使用以前 ...

  10. es6基础入门变量的解构赋值

    let [a, b, c] = [1, 2, 3]; let [foo, [[bar], baz]] = [1, [[2], 3]]; foo bar baz let [ , , third] = [ ...

随机推荐

  1. [安全]PHP能引起安全的函数

    php中需要禁用以下函数来提高安全性 打开php.ini  找到 disable_functions .然后禁用以下函数 [C] 纯文本查看 复制代码 ? 1 disable_functions = ...

  2. java把html标签字符转普通字符(反转换成html标签)(摘抄)

    下面是java把html标签字符转换,我用了spring 包中的 org.springframework.web.util.HtmlUtils 了解了源代码并且进步了使用,发现写得真不错...同时也可 ...

  3. 深入理解java虚拟机_第三章(上)----->垃圾收集器与内存分配策略

    1.  前言 这一版块内容比较多,分为两篇文章来做笔记.本文讲述上半部分垃圾收集部分;下一篇文章写内存分配部分. 概述 对象已死吗? 引用技术算法 可达性分析算法 再谈引用 两次标记 回收方法区 2. ...

  4. mongoDB之数据库操作

    mongoDB中的数据库操作 查看数据库名称: db 查看所有数据库: show dbs 切换数据库: use 数据库名称 注意:如果数据库不存在,则指向数据库,但不会创建.直到插入数据或者是创建集合 ...

  5. 剑指Offer_11_旋转数组的最小数字

    题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转.输入一个递增排序的数组的一个旋转,输出一个旋转数组的最小元素. 例如: {3,4,5,1,2} 为 {1,2,3,4,5} ...

  6. 《iOS Human Interface Guidelines》——Multitasking

    多任务处理 多任务处理让人们在屏幕上(以及合适的iPad模式)查看多个app,而且在近期使用的app中高速地切换. 在iOS 9中.人们能够使用多任务处理UI(例如以下所看到的)来选择一个近期使用的a ...

  7. Linux性能及调优指南(翻译)之Linux进程管理

    本文为IBM RedBook的Linux Performanceand Tuning Guidelines的1.1节的翻译原文地址:http://www.redbooks.ibm.com/redpap ...

  8. java多线程编程核心技术——第七章补漏拾遗

    本章主要知识点: 1)线程组的使用 2)如何切换线程状态 3)SimpleDateFormat类与多线程的解决方法 4)如何处理线程异常. 这本书基本来到了终点,其实在第四章来说,核心(基础)的线程知 ...

  9. 浅析node.js

    大家好,今天来给大家讨论node.js这个东西,说起这个东西啊,可能大家已经很熟悉了,因为现在市场上运用的越来越广泛,毕竟它的优点还是有目共睹的! 那么,什么是node.js呢?官方给出了这样的定义: ...

  10. Linux:快速找到占用CPU过高的Thread

    1.通过top命令找到高耗CPU的进程,记下PID 2.使用命令ps -mp PID -o THREAD,tid,time找到高耗CPU的那些线程 3.jstack PID 4.对每个高耗CPU的线程 ...