解构赋值

解构赋值：ES6 允许按照一定模式（一一对应的模式）从数组和对象中提取值，然后对变量进行赋值，这被称为解构
解构：分解数据解构
赋值：为变量赋值

以前为变量赋值是左边这样只能直接指定值，现在如右图可以从数组中提取值，按照对应位置对变量赋值。
本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值
（1）一些具体的例子
数组的解构赋值
要求等号两边的结构格式要相同，才能完全结构。
1.基本用法：
let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3
2.可嵌套：
let [a, [[b], c]] = [1, [[2], 3]];
// a = 1
// b = 2
// c = 3
3.可忽略：
let [a, , b] = [1, 2, 3];
// a = 1
// b = 3
4.含有扩展运算符的解构：
let [a, …b] = [1, 2, 3];
//a = 1
//b = [2, 3]
5.不完全解构：
let [a = 1, b] = []; // a = 1, b = undefined
如果解构不成功，变量的值就等于underfined。
6.自动丢弃右边多了的数值：
let [a, b] = [1, 2, 3]; //a=1,b=2
7.赋值不是数组则会报错，两边结构格式要一致。
let [foo] = 5;
console.log(foo) // TypeError: 5 is not iterable
事实上只有某种接口具有Iterator(迭代器）接口，都可以采用数组形式的解构赋值。
默认值的使用
1.默认值生效必须是右边数组成员===严格等于undefined才能使默认值生效
let [x = 1] = [undefined];
let [y = 1] = [null];
console.log(x, y)// x=1 y=null
当然如果左边变量没有匹配到数值也会是undefined，上面提到过
.不完全解构：
let [a = 1, b] = []; // a = 1, b = undefined
如果解构不成功，变量的值就等于underfined。

2.默认值可以引用解构赋值的其他变量，但该变量必须已经声明，否则会报错。
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
3.解构赋值中允许给左边变量设置默认值，以免右边不能匹配时不至于为undefined
let [m, n = ‘b’] = [‘a’, undefined];
console.log(m, n)// m=a n=b
4.如果默认值是一个表达式，会采用惰性求值，只有在用到时才会求值。
function f() {
console.log(“act”);
return 100;
}
let [x = f()] = [1];
console.log(x) // x=1
对象的解构赋值
对象的解构赋值与数组有一个重要的不同：
数组的元素是按顺序进行排列的，变量的取值是由它的位置决定的，
对象的属性是没有次序的，变量必须与属性同名，而且等号两边的结构和格式是一模一样的，这样才能取到正确的值。
与数组相同点：
　　　1.对象的解构赋值也是可以嵌套的
　　　2.另外对象也可以定义默认值，并且属性的值为undefined，默认值才会有效果
　　　3.解析失败那么值为undefined。
基本用法：
let { bar, foo } = { foo: “aaa”, bar: “bbb” };
foo // “aaa”
bar // “bbb”

let { baz } = { foo: “aaa”, bar: “bbb” };
baz // undefined

let { foo: baz } = { foo: ‘aaa’, bar: ‘bbb’ };
baz // “aaa”

如果变量名与属性名不一致，必须写成下面这样：
let obj = { first: ‘hello’, last: ‘world’ };
let { first: f, last: l } = obj;
f // ‘hello’
l // ‘world’
注意点：注意是模式还是变量，变量采用的是逗号分开，模式后面紧跟的是冒号,我们只对变量赋值,不对模式赋值

上面对象的解构赋值是下面形式的简写

对象解构赋值也可以用于嵌套结构的对象：

由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构:
let arr = [1, 2, 3];
let {0:first, [arr.length - 1] : last} = arr;
first // 1
last // 3
字符串的解构赋值
字符串也可以解构赋值。这是因为此时字符串被转换成了一个类似数组的对象,
类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值
复制代码
const [a, b, c, d, e] = ‘hello’;
a // “h”
b // “e”
c // “l”
d // “l”
e // “o”

let {length : len} = ‘hello’;
len // 5
数值和布尔值解构赋值
解构赋值的原则是，如果等号右边不是对象，则先转换为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错
let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true
函数参数的解构赋值
函数参数的解构赋值的过程就是实参赋值给形参，具体可以看下面例子：
function add([x, y]){
return x + y;
}

add([1, 2]); // 3
//下面例子也能够使用默认值
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]
　注意：:尽量解构赋值不要使用圆括号
(2)解构赋值的用途
1.交换变量的值
以前js交换两个变量的值只能先创建第三个变量，然后通过第三个变量来进行交换。
现在交换两个变量的值使用解构赋值就不用创建第三个变量，如下：
let x = 1;
let y = 2;
[x, y] = [y, x];
2.返回多个值
函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便(重点是取这些值)。


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]