ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构
// 之前我们给变量赋值
let a = 1;
let b = 2;
let c = 3;
//解构赋值
let [a,b,c] = [1,2,3] //对应位置值相同解构赋值还可以嵌套赋值
let [a ,[[ b ],c ]] = [1,[[2],3]]
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3
// 如果对应位置没有要赋值的量 用逗号代替
let [, , third] = ['a','b','c']
console.log(third) // c
let [x , ,y ] = [1,2,3]
console.log(x) // 1
console.log(y) // 3
解构不成功就会显示 undefined
let [x,y, ...z] = ['a']
console.log(x) // a
console.log(y) // undefined
console.log(z) // undefined不完全解构,解构依然可以成功
let [x,y] = [1,2,3]
console.log(x) // 1
console.log(y) // 2如果等号的右边不是数组 (严格的说，必须是可以遍历的的解构) 下面的例子都是 undefined
let [foo] = 1;
let [foo] = false;
let [foo] = NaN
let [foo] = undefined
let [foo] = null
let [foo] = {}注意: 解构赋值也允许默认值
let [foo = true ] = []
console.log(foo) //true 因为没有赋值 所以 foo是默认值注意：ES6内部使用严格相等运算符(===)，判断一个位置是否有值。所以只有当一个数组成员严格等于undefined，默认值才会生效
let [x = 1] = [undefined];
console.log(x) // 1
let [x = 1] = [null]
console.log(x) // null特殊情况：
let [x = 1,y = x] = [] // x=1 y=1
let [x = 1,y = x] = [2] // x=2 y=2
let [x = 1,y = x] = [1,2] // x=1 y=2
let [x = y,y = 1] = []; // ReferenceError: y is not defined在最后一个例子当中 [x = y,y = 1] 在这个 [] 数组当中 相当于一个独立的作用域 在第一个赋值操作中 x=y,因为 y 还没有声明就使用了这个 y ,所以根据我之前提到过的 let 当中声明变量的 暂时性死区 所以会报错。
在对象的解构赋值当中 解构的变量 需要与对象当中的key值对应
let {a,b} = {a:'abc',b:'bcd'}
console.log(a) // abc
console.log(b) // bcd
let { c } = {a:'abc',b:'bcd'}
console.log(c) // undefined使用对象的解构赋值，可以方便地将现有对象的方法，赋值到某个变量
let {log , sin, cos} = Math
const {log} = console
log("helo,world") // hello,world在上面的代码当中，将 Math 对象的 对数 、正弦、余弦 三个方法，赋值到对应的变量上，使用起来就方便很多。
第二个例子将 console.log 赋值到 log 变量上。 如果变量名与属性名不一致，必须写成下面这样
如果 变量名与属性名不一致,或者我们不想沿用对象里的属性名时，我们必须写成这样
let obj = {first:'hello',last:'world'}
let {first: f, last: l} = obj
console.log(f) // hello
console.log(l) // world这实际上说明，对象的解构赋值是下面形式的简写 。 对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者
let {foo:foo,bar:bar} = {foo:'aaa',bar:'bbb'}
let { foo:a } = {foo:'aaa',bar:'bbb'}
console.log(a) // aaa
console.log(foo) // error: foo is not defined 上面代码中，foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。
在解构赋值当中，也可以嵌套使用
let obj = {
p:[
'hello',
{ y:'world'}
]
}
let { p, p:[x,{y}]} = obj
console.log(x) // hello
console.log(y) // world
console.log(p) // ["hello",{y: "world"}]let obj = {}
let arr = []
({ foo: obj.prop, bar: arr[0] } = { foo:123, bar:true })
console.log(obj) // obj.prop = 123 {prop:123}
console.log(arr) // arr[0] = true [true]如果解构赋值是嵌套的对象，而且当子对象所在的父属性不存在，那么就会报错
let { foo: {a}} = {a:'123'} // 报错在对象的赋值当中。undefined 才可以使用默认值
特殊情况
如果要将一个已经声明的变量用于解构赋值，必须小心
// 错误的写法
let x ;
{x} = {x:1}
// SynaxError：syntax error
// 正确的写法
let x;
({x} = {x: 1});上面代码的写法会报错，因为 JavaScript 引擎会将{x}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免 JavaScript 将其解释为代码块，才能解决这个问题。
let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3上面代码对数组进行对象解构。数组arr的0键对应的值是1，[arr.length - 1]就是2键，对应的值是3
字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
let {length:len} = 'hello'
len // 5类似数组的对象都有一个 length属性，因此还可以对这个属性解构赋值
解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。
let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true上面代码中，数值和布尔值的包装对象都有toString属性，因此变量s都能取到值。
解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。
let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeErrorfunction add([x,y]) {
return x + y
}
add([1, 2]) // 3
[[1,2], [3,4]].map(([a,b]) => a + b) // [ 3, 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等于默认值。
function move({x, y} = { x: 0, y: 0 }) {
return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]上面代码是为函数move的参数指定默认值，而不是为变量x和y指定默认值，所以会得到与前一种写法不同的结果。
undefined就会触发函数参数的默认值。
解构赋值虽然很方便，但是解析起来并不容易。对于编译器来说，一个式子到底是模式，还是表达式，没有办法从一开始就知道，必须解析到（或解析不到）等号才能知道。
由此带来的问题是，如果模式中出现圆括号怎么处理。ES6 的规则是，只要有可能导致解构的歧义，就不得使用圆括号。
但是，这条规则实际上不那么容易辨别，处理起来相当麻烦。因此，建议只要有可能，就不要在模式中放置圆括号。
原文：https://www.cnblogs.com/Rembang/p/12204264.html