ES6解构

其实所有纠结选择的人心里早就有了答案，咨询只是想得到内心所倾向的选择。最终所谓的命运，还是自己一步步走出来的

变量的解构赋值

1.数组的解构复制

基本用法

解构(Destructuring):ES6按照一定模式，从数组和对象中提取值，对变量进行赋值

1	let [a, b, c] = [1, 2, 3]

这种写法属于”模式匹配”，只要等号两边的模式相同，变量就能赋上对应的值

1 2 3 4 5

let [foo, [[bar], baz]] = [1, [[2], 3]]; let [ , , third] = ["foo", "bar", "baz"]; let [x, , y] = [1,2,3]; let [head, ...tail] = [1,2,3,4]; let [x, y, ...z] = ['a'];

解构不成功，值就等于undefined
不完全解构，也可以成功
如果等号右边不是数组(或者严格地说，不是可遍历的结构，将会报错)
对于Set结构，也可以使用数组进行解构赋值 let [x, y, z] = new Set([“a”, “b”, “c”]); (只要某种数据解构具有Iterator接口，都可以采用数组形式的解构赋值)
默认值

解构赋值允许指定默认值

1 2 3

let [foo = true] = []; let [x, y = 'b'] = ['a']; let [x, y = 'b'] = ['a', undefined];

es6内部使用严格相等运算符(===)，判断一个位置是否有值，只有挡一个数组成员严格等于undefined,默认值才会生效) (null不等于undefined

1 2 3 4

function () { console.log('aaa') } let [x = f()] = [1]

如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，
才会求值。因为x能取到值，所以函数f根本不会执行

对象的解构赋值

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
对象的解构赋值的内部机制，是先找到同名属性，饭后再赋值给对应的变量，真正赋值的是后者，不是前者，前者只是模式，不是变量

1 2 3 4 5 6 7

let obj = { p: [ 'hello', { y: 'world'} ] } let { p, p: [x, {y}] } = obj;

如果解构模式是嵌套的对象，而且子对象所在的父属性不存在，报错

1	let {foo: {bar}} = {baz: 'baz'};

foo这时等于undefined,再取子属性就会报错

1 2 3 4 5 6

//错误写法 let x; {x} = {x: 1}; //正确写法 let x; ({x} = {x:1})l

错误写法JavaScript引擎会将{x}理解成一个代码块，从而发生语法错误。只有不将大括号放在行首，避免JavaScript将其解释为代码块，才能解决这个问题

字符串的解构赋值

字符串可以解构赋值，此时字符串被转换为一个类似数组的对象

1	const [a, b, c, d, e] = 'hello';

类似数组的对象都有一个length属性，因此还可以对这个属性进行解构赋值

1	let {length: len} = 'hello'

大专栏  ES6解构"#数值和布尔值的解构赋值" class="headerlink" title="数值和布尔值的解构赋值">数值和布尔值的解构赋值

解构赋值时，如果等号右边是数值和布尔值，则会先转为对象

1 2 3 4

let {toString: s} = 123 s === Number.prototype.toString //true let {toString: s} = true s === Boolean.prototype.toString //true

解构规则：只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构会报错

1 2	let { prop: x } = undefined; let { prop: y } = null;

函数参数的解构赋值

函数的参数也可以使用解构赋值

1	[[1,2],[3,4]].map(([a,b]) => a+b)//[3,7]

函数参数的解构也可以使用默认值

1 2 3 4 5 6 7

function move({x = 0, y = 0} = {}) { return [x,y]; } move({x: 3, y: 8}); // [3, 8] move({x: 3}); // [3, 0] move({}); // [0, 0] move(); // [0, 0]

函数move的参数是一个对象，通过对这个对象进行解构，得到变量x和y的值。如果解构失败，x和y等于默认值。

圆括号问题

可以使用圆括号的情况只有一种：赋值语句的非模式部分，可以使用圆括号

1 2 3

[(b)] = [3]; ({ p: (d) } = {}); [(parseInt.prop)] = [3]

上面三行语句都可以正确执行，因为首先它们都是赋值语句，而不是声明语句；其次它们的圆括号都不属于模式的一部分。第一行语句中，模式是取数组的第一个成员，跟圆括号无关；第二行语句中，模式是p，而不是d；第三行语句与第一行语句的性质一致。

1. 交换变量的值
2. 从函数返回多个值
3. 函数参数的定义
4. 提取JSON数据
5. 函数参数的默认值
6. 遍历map结构

任何部署了 Iterator 接口的对象，都可以用for…of循环遍历。Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便。

1 2 3 4 5 6

const map = new Map(); map.set('first', 'hello'); map.set('second', 'world'); for (let [key, value] of map) { console.log(key + "is" + value); }

如果只想获取键名或者只想获取键值

1 2 3 4 5 6 7 8

// 获取键名 for (let [key] of map) { // ... } // 获取键值 for (let [,value] of map) { // ... }

输入模块的指定方法 加载模块时，往往需要指定输入那些方法。解构赋值使得输入语句非常清晰

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