ES6-2-解构赋值

解构赋值

数组的解构赋值

按照一定模式从数组和对象中提取值，然后对变量进行赋值
方式：模式匹配：只要等号两边的模式相同，左边的变量就会被赋予对应的值。

一一对应
let [a,b,c]=[1,2,3];
let [foo,[[bar], baz]]=[1,[[2],3]];
//foo=1 bar=2 baz=3
let [, , third] = ["foo", "bar", "baz"];
//third=3
let [x, , y] = [1, 2, 3];
//x=1 y=3
let [head, ...tail] = [1, 2, 3, 4];
//...tail为剩下的所有值，[2,3,4]
let [x, y, ...z] = ['a'];
//x="a" y=undefined z=[]

//如果解构不成功，变量的值就等于undefined。以下两个例子，foo解构都没有成功
let [foo] = [];
let [bar, foo] = [1];


let [a, [b], d] = [1, [2, 3], 4];
console.log(a,b,d);
1 2 4
//没有变量接收的解构值会被忽略掉。

let [x, y, z] = new Set(['a', 'b', 'c']);
console.log(x,y,z);
a b c

let [foo] = 1;
//如果赋值不是数组则会报错。
右边是Nan,false,undefined,null,(转为对象后无迭代器接口){}(无迭代器接口),都会报错


事实上，只要某种数据接口具有Iterator（迭代器）接口，都可以采用数组形式的解构赋值。
迭代器（iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数
据结构只要部署iertator接口，就可以完成便遍历操作

function* fibs() {  //Generator函数，原生具有Iterator接口。
let a = 0;
let b = 1;
while (true) {
yield a;
[a, b] = [b, a + b];
}
}
let [first, second, third, fourth, fifth, sixth] = fibs();
console.log([first, second, third, fourth, fifth, sixth]);
[0, 1, 1, 2, 3, 5]
//解构赋值依次从接口中获取值

解构赋值允许指定默认值

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

ES6内部使用严格相等运算符（===）判断一个位置是否有值，如果一个数组成员不严格等于undefined，默认值不会生效

let [x = 1] = [undefined];
console.log(x);
undefined
let [y = 1] = [null];
console.log(y);
null
//null不严格等于undefined

如果默认值是一个表达式，会采用惰性求值，只有在用到时才会求值。

function f() {
console.log("act");
return 100;
}
let [x = f()] = [1];
console.log(x);
1
//f()并没有被执行

默认值可以引用解构赋值的其他变量，但改变量必须已经声明，否则会报错。

let [x = 1, y = x] = [];
console.log(x,y);
1 1
let [x = 1, y = x] = [2];
console.log(x,y);
2 2
let [x = 1, y = x] = [1, 2];
console.log(x,y);
1 2
let [x = y, y = 1] = [];
console.log(x,y);
Uncaught ReferenceError: y is not defined
//报错是因为x使用y时，也还没有被声明

对象的解构赋值

数组的元素是按次序排列的，变量的取值是由它的位置决定。
对象的属性没有次序，变量必须与属性同名才能取到正确的值。

变量名与属性名一致时

let { bar, foo } = { foo: "aaa", bar: "bbb" };
console.log(bar,foo);
bbb aaa
let { bar } = { foo: "aaa", bar: "bbb" };
console.log(bar,foo);
Uncaught ReferenceError: foo is not defined

如果变量名与属性名不一致，必须明确对应关系。
对象解构赋值内部机制是先找到同名属性，然后再赋值给对应的变量，真正被赋值的是后者。

let { baz } = { foo: "aaa", bar: "bbb" };
console.log(baz);
undefined

let {foo: baz} = {foo:'aaa', bar:'bbb'};
console.log(foo,baz);
Uncaught ReferenceError: foo is not defined
console.log(baz);
aaa


let { bar, foo } = { foo: "aaa", bar: "bbb" };
完整 => 
let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };
即，foo（前）是匹配模式，foo（后）才是变量。

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

let obj = {
p: [
	'Hello’,
	{ y: 'World' }
]
};
let { p: [x, { y }] } = obj;
x//"hello"
y//"world"
//p是模式不是变量
let { p, p: [x, { y }], p: q } = obj;
//此时p也是变量
x,y不变，p为 ['Hello’,{ y: 'World' }]

let { p, p: [x, { y }], p: q } = obj;

let obj = {};
let arr = [];
({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });
console.log(obj.prop,arr[0]);
123 true

对象解构赋值也指定默认值，且默认值生效条件是对象的属性严格等于undefined。

var { x = 3 } = {};
//x=3
var { x, y = 5 } = { x: 1 };
//x=1   y=5
var { x: y = 5 } = {};
//y=3
var { x: y = 3 } = { x: 5 };
//y=5

如果解构失败，变量的值等于undefined。

let { foo } = { bar: 'bbb' };
//foo undefined

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

let { foo: { bar } } = { baz: 'bbb' };
//foo未定义，取其子属性会报错

js会将{…}理解为一个代码块，发生语法错误。
如果要将一个已经声明的变量用于解构赋值，要将解构赋值视为一个表达式，用括号括起来。

let x;
({ x } = { x: 1 });
console.log(x);
1

对象解构赋值可以很方便地将现有对象的方法赋值给某个变量。

let { log, sin, cos } = Math;

由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。

let arr = [1, 2, 3];
let { 0: first, [arr.length - 1]: last } = arr;
//数组第一位最后一位分别是1，3

字符串的解构赋值，将字符串看作一个类似于数组的对象。

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

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

const [a, b, c, d] = 'hello';
let { length: len } = 'hello';
//len=5

解构赋值的原则是，如果等号右边不是对象，则先转换为对象。

如果等号右边无法转换为对象，则会报错，如null和undefined。

let { toString: s } = 123;
console.log(s.call(100));
//s===Number.prototype.toString为true

函数调用时，会将实参传递给形参，其过程就是实参赋值给形参。因此，也可以使用解构赋值。
其规则与数组、对象的解构赋值一致，关键看参数是采用哪种解构赋值方式。

function add([x, y = 10]) {
	return x + y;
}
let r = add([1]);
let r = add([1]);
console.log(r);
11

function add({ x, y = 10 }) {
	return x + y;
}
let r = add({ x: 20 });
console.log(r);
30

交换变量的值

let x = 1, y = 3;
[x, y] = [y, x];

从函数返回多个值

function func() {
	return [1, 2, 3];
}
let [a, b, c] = func();

function func() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = func();

函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来。

提取JSON数据

function f([x, y, z]) {
	//一组有序参数
}
f([1, 2, 3]);
function f({ x, y, z }) {
	//一组无序参数
}
f({ z: 3, x: 1, y: 2 });
const json = '{"id": 42,"status": "OK","d": [867, 5309]}';
let data = JSON.parse(json);
let { id, status, d: numbers } = data;
console.log(id, status, numbers);

总结：