解构赋值 —— ES6新语法学习心得
## 3.解构赋值 ##
作用：将数组、对象、函数的参数 解构，对变量进行赋值，可以直接调用该变量，大大提高效率
## 例 1： ## 标准模式的解构赋值
var [a,b,c]=[1,2,3]
console.log(a) //1
console.log(b) //2
console.log(c) //3
## 例2 ： ## 嵌套解构赋值，只要"模式匹配"，就能解构赋值，如果没有对应的值，就是undefined
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
let [x, , y] = [1, 2, 3];
x // 1
y // 3
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
.../tail是reset ，将后面超出部分存为数组
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []
## 例 3 ： 解构赋值允许设置默认值，当没有对应值，则启动默认值 ##
let [a,b = 3,c = 5] = [1];
console.log(a) // 1
console.log(b) // 3
console.log(c) // 5
※ 被解构的数组只有1对应a,b和c没有对应项，所以启用默认值 3、5
[x, y = 'b'] = ['a', undefined] // x='a', y='b'
[x, y = 'b'] = ['a', ''] // x='a', y=''
※ ES6内匹配是'==='严格相等模式，空字符串''和undefined 不相等！
function fn(){
console.log(10)
//这个10在需要给b启用默认值时候才会打印，程序执行时不打印
return 1
}
let [a = 3, b = fn()] = [];
console.log(a) // 3
console.log(b) // 1
※ 如果一个默认值是一个表达式，则只会在需要启动默认值的时候才进行运算
对象的结构赋值
对象也可以解构赋值，原则：
1.数组元素要求按顺序一一对应赋值，对象不要求，按无序赋值
2.对象被赋值的变量名必须与对象属性名一致
3.如果不一致，需要采用'模式'对应写法
例1：对象结构赋值形式
var {
b, a，c
} = {
a:100,
b:200
}
console.log(a) // 100
console.log(b) // 200
console.log(c) // undefined
对象结构不要求顺序一一对应，但要求属性名一一对象，如果没有就是undefined
例 2：对象的'模式'匹配
var { a:num1,
b:num2
} = {
a:100,
b:200
}
console.log(num1) //100
console.log(num2) //200
console.log(a) //a is not defined
console.log(b) //b is not defined
注意，对象结构赋值时，a,b是模式，对应被结构对象的a和b，被赋值的变量是num1和num2
var node = {
loc: {
start: {
line: 1,
column: 5
}
}
};
var { loc: { start: { line }} } = node;
line // 1
loc // error: loc is undefined
start // error: start is undefined
只有line是变量，会被赋值
例 3：对象的嵌套解构赋值
var obj = {};
var arr = [];
({
obj:obj.app,
arr:arr[0]} = {
obj:'hello',
arr:0
}) //这里要加括号，我也不知道为什么
console.log(obj.app) //'hello'
console.log(arr[0]) // 0
例 4：对象可以设默认值
var {
a = 100,
b : c = 200,
} = {}
console.log(a) //100
console.log(b) //b is not defined
console.log(c) //200
## 函数参数的解构赋值 ##
是对参数的解构赋值！
例 1：参数是数组
function fn([a,b]){
return a+b //这里对参数解构赋值
}
console.log(fn([1,2])) //3
例 2 ：参数是对象
function fn({a,b}){
return a+b //这里对参数解构赋值
}
console.log(fn({a:1,b:2})) //3
例 3：参数也可以设置默认值
function fn({a = 3,b = 5}={}){
return a+b
}
console.log(fn()) //8
//fn()调用没有传参数，启动默认值{},空对象对前面的{a = 3,b = 5}解构，启动默认值，所以结果为8
## 解构赋值运用场景 ##
（1）交换变量的值
```
var x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y)
```
（2）从函数返回多个值
函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。
```
// 返回一个数组
function example() {
return [1, 2, 3];
}
var [a, b, c] = example();
// 返回一个对象
function example() {
return {
foo: 1,
bar: 2
};
}
var { 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数据
解构赋值对提取JSON对象中的数据，尤其有用。
```
var jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
}
let { id, status, data } = jsonData;
console.log(id, status, data)
```
（5）函数参数的默认值
```
function add([a = 0, b = 0] = []) {
return a + b;
}
console.log(add());
```
（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");
```
