解构赋值1

基本用法

let a = 1;
let b = 2;    //=> let [a,b,c]=[1,2,3]; 
let c = 3;

只要等号两边的模式相同，左边的变量就会被赋予对应的值。

let [foo,[[bar], baz]]=[1,[[2],3]];

• 如果解构不成功，变量的值就等于undefined。
• 没有变量接收的解构值会被忽略掉。
• 如果赋值不是数组则会报错
  • 例如：let [foo] = 1;

只要某种数据接口具有Iterator（迭代器）接口，都可以采用数组形式的解构赋值。

let [x, y, z] = new Set(['a', 'b', 'c']);
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();

默认值

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

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

function f() {
console.log("act");
return 100;
}
let [x = f()] = [1];

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

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

使用严格相等运算符(===)判断一个位置是否有值。所以，如果一个数组成员不严格等于undefined，默认值是不会生效的

对象的解构赋值

对象的解构赋值与数组不同

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

let { bar, foo } = { foo: "aaa", bar: "bbb" };
let { bar } = { foo: "aaa", bar: "bbb" };

//如果变量名与属性名不一致，必须明确对应关系。
let { baz } = { foo: "aaa", bar: "bbb" };
let {foo: baz} = {foo:'aaa', bar:'bbb'};

实际上，对象解构赋值内部机制是先找到同名属性，然后再赋值给对应的变量，真正被赋值的是后者。

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;
let { p, p: [x, { y }], p: q } = obj;
let obj = {};
let arr = [];
({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });

如果要将一个已经声明的变量用于解构赋值，需谨慎。

let x;
{ x } = { x: 1 };

正确的做法是将解构赋值视为一个表达式，用括号括起来。

let x;
({ x } = { x: 1 });

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

let { log, sin, cos } = Math;

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

let arr = [1, 2, 3];
let { 0: first, [arr.length - 1]: last } = arr;

字符串的解构赋值

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

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

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

let { length: len } = 'hello';

数值和布尔值的解构赋值

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

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

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

函数参数的解构赋值

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

function add([x, y = 10]) {
	return x + y;
}
let r = add([1]);
function add({ x, y = 10 }) {
	return x + y;
}
let r = add({ x: 20 });

解构赋值的用途

1. 交换变量的值

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

2. 从函数返回多个值

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

3. 函数参数的定义

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

function f([x, y, z]) {
	//一组有序参数
}
f([1, 2, 3]);

function f({ x, y, z }) {
	//一组无序参数
}
f({ z: 3, x: 1, y: 2 });

4. 提取JSON数据

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);

5.遍历Map结构

var map = new Map();
map.set('first','hello');
map.set('second','world');

for(let [key, value] of map){
    console.log(key+" is "+value);
    //false is hello
    //second is world
}

//获取键名
for (let [key] of map){
}

//获取键值
for(let [,value] of map){
}