PS： ES6 解构赋值是一种批量赋值的方式（数组赋值），使用的是模式匹配的方式，等号两边的模式相同，左边就会被赋予对应的值。
let [a,b,c] = [1,2,3]
a // 1
b // 2
c // 3
嵌套机构赋值
let [foo, [[bar], baz] = [1,[[2], 3]]
foo // 1
bar // 2
baz // 3
let [head, ...tail] = [1,2,3,4,5]
head // 1
tail // [2,3,4]
let [x,y,...z] = ['a]
x // "a"
y // undefined
z // []
根据上面的例子可以得出结论，如果结构不成功，得到的值就是 undefined
1.解构的默认值
let [foo = true] = []
foo // true
let [x, y = 'b'] = ['a'] // x = 'a', y = 'b'
let [x,y = 'b'] = ['a', undefined] // x = 'a', y = 'b'
备注： 注意 ES6 内部使用严格运算符 (===) ，判断一个位置是否有值，当一个数组成员严格等于 undefined, 默认值才会有效，如果右边是 null 的话，默认值就不就不会生效，因为 null 不严格等于 undefined.
let [x = 1] = [undefined]
x // 1
let [x = 1] = [null]
x // null
2. 函数解构和对象的结构赋值
2.1 函数解构
function f(){
console.log('aaa)
}
let [x = f()] = [1]
注意：如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用的时候，才会求值。上面的代码中，因为 x 能取到值，所以函数 f g根本不会执行。上面的代码等价于下面的的代码：
let = x;
if ([1][0] == undefined) {
x = f()
} else {
x = [1][0]
}
默认值可以引用其它解构赋值的其它变量，但该变量必须已经声明。
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]
let [x = y, y = 1] = [] // ReferenceError: y is not defined
注意：上面最后一个表达式之所有会报错，是因为 x 用 y 做默认值时，y 还没有声明
2.2 对象结构赋值
解构不仅可以用于数组，还可以用于对象。
let {foo, bar} = {foo: 'aaa', bar: 'bbb'}
foo // aaa
bar // bbb
注意：数组和对象解构有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置的决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。如果解构失败，变量的值等于 undefined.
let {foo} = {bar: 'baz'}
foo // undefined
将现有的对象赋值某个变量 console、Math
// 例子1：
let {log, sin, cos} = Math;
// 例子2：
const {log} = console;
log('hello') // hello
备注: 上面代码将 Math 对象的对数、正弦、余弦三个方法，赋值到对应的变量上，使用起来会方便很多。例二将 console.log 赋值到 log 变量。
属性名和变量名不一致，使用方法：
let {foo: baz} = {foo: 'aaa', bar: 'bbb'};
baz // aaa
let obj = {first: 'hello', last: 'world'}
let {first:f , last: 1} = obj
f // 'hello'
l // world'
这实际说明，对象的解构赋值是下面的形式的简写：
let {foo: foo, bar:bar} = {foo: 'aaa', bar: 'bbb'}
根据上面的实例，得到下面的结论，对象的解构赋值的内部机制，是先找到同名属性，然后在赋给对应的变量。真正的赋值是后者，而不是前者。
对象的嵌套结构
let obj = {
p:[
'Hello',
{y: 'world'}
]
let {p: [x, {y}]} = obj
x // "Hello"
y // "world"
另一个例子：三次解构
const node = { loc: { start: { line: 1, column: 5 } } };
let { loc, loc: { start }, loc: { start: { line }} } = node;
line // 1
loc // Object {start: Object}
start // Object {line: 1, column: 5}
对象的默认值：
var {x = 3} = {}
x // 3
var {x, y = 5} = {x: 1}
x // 1
y // 5
默认值生效的条件是，对象的属性值严格等于undefined。
var {x = 3} = {x: undefined}
x // 3
var {x = 3} = {x: null}
x // null
解构的用途：
（1）交换变量的值
let x = 1;
let y = 2;
[x,y] = [y,x]
上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。
(2) 从函数返回多个值
function example()
{
return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一个对象
function example() {
return { foo: 1, bar: 2 };
}
let { foo, bar } = example();
（3）函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来。
// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);
// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});
（4）提取 JSON 数据
let jsonData = { id: 42, status: "OK", data: [867, 5309] };
let { id, status, data: number } = jsonData;
console.log(id, status, number); // 42, "OK", [867, 5309]
（5）函数参数的默认值
jQuery.ajax = function (url, {
async = true,
beforeSend = function () {},
cache = true,
complete = function () {},
crossDomain = false, global = true, // ... more config } = {}) { // ... do stuff };
指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句。
（6）遍历 Map 结构
任何部署了 Iterator 接口的对象，都可以用for...of循环遍历。Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便。
const 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");
总结：解构赋值是把数组和对象中的值，赋值给变量
变量的解构是实际工作做很常用，之前没有深入了解，学习后才明白这种数据结构。学习了，学习网址
网友评论