详解一下之前的解构赋值

  ①解构赋值中的“...”

let [a,...b]= [1];     
b // [] ...代表变量b去匹配剩余的所有元素返回一个数组 ,匹配不到时返回[]
//注意:"...b"只能放在最后

  ②解构赋值的等号两边的数据类型必须一样

即:

let [] = [] 或者 let {} = {}

但是:Set结构也允许使用数组进行解构赋值 

let [a,b]= new Set([1,2,3,4])
a //
b //

技巧: 如果你不确定该结构是否能够解构赋值,判断其是否有Iterator接口就可以啦!判断方法如下:

function* fibs() {
var x= 0;
var y= 1;
while (true) {
yield x;
[x, y] = [y, x+ y];
}
} var [a, b, c, d, e, f] = fibs();
f//
// fibs是一个Generator函数,原生具有Iterator接口。解构赋值会依次从这个接口获取值。

  ③解构赋值不仅适用于 let / const也适用于var指令

  ④解构赋值允许添加默认值

let [a = 4] = []
a //

  (解构赋值的匹配模式是===)注:如果解构赋值不严格等于 undefined 的话默认值不会生效

let [a = 4]=[undefined]
a //4
let [b = 4]=[null]
b//null

  ⑤我自己犯过的错

let [x = y, y = 1] = [];     //报错  因为x=y时y还没有被声明    不会被提升!!! 牢记
var [a = b, b = 1] = []; // a===undefined b === 1

对象的解构赋值

  ①对象不像数组那样有顺序所以,对象的解构赋值是按照‘键’的方式匹配的

var { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // 'aaa' foo是匹配模式 baz是变量

  ②对象和数组的嵌套    如果看明白一下例子也就差不多了

var obj = {
p: [
'Hello',
{ y: 'World' }
]
}; var { p: [x, { y }] } = obj; //p是匹配模式 [x , { y }]是值 然后再看数组中的每一项
x // "Hello" 
y // "World"

  ③不像数组那样不存在时返回undefined  对象是会报错的

字符串的解构赋值

const [a, b, c, d, e] = 'hello';
a // h
b // e
c // l
let {length : len} = 'hello';
len // 5 匹配的是字符串的length属性

干货:用途

(1)交换变量的值 

[a,b]=[b,a]

(2)从函数返回多个值

function example() {
return [1, 2, 3];
}
var [a, b, c] = example();

(3)函数参数的定义

function f([x, y, z]) { ... }
f([1, 2, 3]);

(4)提取JSON数据

var jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
}; let { id, status, data: number } = jsonData;

(5)函数参数的默认值

function f([x = 1, y = 2 , z]) { ... }

(6)遍历Map结构

var map = new Map();
map.set('first', 'hello');
map.set('second', 'world'); for (let [key, value] of map) {
console.log(key + " is " + value);
}
// first is hello
// second is world
// 获取键名
for (let [key] of map) {
// ...
} // 获取键值
for (let [,value] of map) {
// ...
}
 

(7)输入模块的指定方法

const { SourceMapConsumer, SourceNode } = require("source-map");

  

ES6(二)解构赋值详解的更多相关文章

  1. ES6 解构赋值详解

    解构赋值是对赋值运算符的扩展,可以将属性/值从对象/数组中取出,赋值给其他变量. 一.数组的解构赋值 1.基本用法 只要等号两边的模式相同,左边的变量就会被赋予对应的值. let [a, [[b], ...

  2. ES6解构赋值详解

    文章转载自:http://www.zhufengpeixun.cn/article/167 解构赋值(destructuring assignment)语法是一个 Javascript 表达式,这种语 ...

  3. 【ES6 】ES6 解构赋值--数组解构赋值

    定义 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 数组的解构赋值 以前,为变量赋值,只能直接指定值. let a = 1; let b = 2; let c = 3; ...

  4. 【ES6 】ES6 解构赋值--对象解构赋值

    对象的解构与数组有一个重要的不同. 数组的元素是按次序排列的,变量的取值由它的位置决定 而对象的属性没有次序,变量必须与属性同名,才能取到正确的值. 基本用法 如果解构失败,变量的值等于undefin ...

  5. 001-es6变量声明、解构赋值、解构赋值主要用途

    一.基本语法 1.1.声明变量的六种方法 参看地址:http://es6.ruanyifeng.com/#docs/let let:局部变量,块级作用域,声明前使用报错 var:全局变量,声明前使用 ...

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

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

  7. ES6笔记(3)-- 解构赋值

    系列文章 -- ES6笔记系列 解构赋值,即对某种结构进行解析,然后将解析出来的值赋值给相关的变量,常见的有数组.对象.字符串的解构赋值等 一.数组的解构赋值 function ids() { ret ...

  8. es6入门2--对象解构赋值

    解构赋值:ES6允许按照一定规则从数组或对象中提取值,并对变量进行赋值.说直白点,等号两边的结构相同,右边的值会赋给左边的变量. 一.数组的解构赋值: 1.基本用法 let [a, b, c] = [ ...

  9. 《ES6标准入门》(阮一峰)--3.变量的解构赋值

    1.数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1; l ...

随机推荐

  1. CentOS6.3编译安装Memcached

    要用到如下源码包: /usr/local/src/memcached/libevent-2.0.21-stable.tar.gz /usr/local/src/memcached/memcached- ...

  2. CentOS6.3 编译安装LAMP(2):编译安装 Apache2.4.6

    Apache官方说: 与Apache 2.2.x相比,Apache 2.4.x提供了很多性能方面的提升,包括支持更大流量.更好地支持云计算.利用更少的内存处理更多的并发等.除此之外,还包括性能提升.内 ...

  3. HeapSort 堆排序 基于伪代码实现

    此文原创, http://www.cnblogs.com/baokang/p/4735431.html ,禁止转载 GIF 动态图 伪代码 /* From Wikipedia, the free en ...

  4. TCP/IP四层模型

    转自:http://www.cnblogs.com/BlueTzar/articles/811160.html ISO制定的OSI参考模型的过于庞大.复杂招致了许多批评.与此对照,由技术人员自己开发的 ...

  5. tornado 第二种路由方法(装饰器)

    #!/usr/bin/env python # _*_coding:utf-8 _*_ import tornado.ioloop import tornado.web application = t ...

  6. 最简单的js确认框!

    随便举个栗子~ function bremove() { if (ids == "") {//触发函数,如果值是空弹框 alert("您还没有选择任何数据.") ...

  7. chrome浏览器跨域设置

    1.新建快捷方式,在目标那里的路径后面跟上如下参数 "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" -- ...

  8. java5

    1:final关键字(掌握) (1)是最终的意思,可以修饰类,方法,变量. (2)特点: A:它修饰的类,不能被继承. B:它修饰的方法,不能被重写. C:它修饰的变量,是一个常量. (3)面试相关: ...

  9. unlink和close关系

    今天看到nginx用文件锁实现互斥的实现方案时,发现,unlink文件后还可需用fd,很是纳闷!于是搜索到此文,并自测了下,涨姿势了~分享给大家~ 原理: 每一个文件,都可以通过一个struct st ...

  10. MySql增加字段、删除字段、修改字段名称、修改字段类型

    1.增加一个字段 alter table user add COLUMN new1 VARCHAR(20) DEFAULT NULL; //增加一个字段,默认为空 alter table user a ...