Web前端高级编程——解构赋值

数组的解构赋值

ES6允许按照一定模式从数组和对象中提取值，然后对变量进行赋值，该操作即为解构。

如果解构不成功，变量的值就等于undefined
没有变量接收的解构值会被忽略掉
如果赋值不是数组则会报错

默认值
如果一个数组成员不严格等于undefined(只声明没赋值)，默认值不会生效(对象同理)
默认值可以引用解构赋值的其他变量，但该变量必须已经声明，否则会报错

对象的解构赋值

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

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

即，foo（前）是匹配模式（属性），foo（后）才是变量。

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

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

字符串的解构赋值

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

解构赋值的用途

交换变量的值

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

从函数返回多个值

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

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

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

选择性地接收想要的变量值

function f(){
                return [1,2,3,4,5];
            }
            let a,b,c;
            [a,,,b]=f();
            console.log(a,b);

不确定数组长度，只想要第一个变量的值

function f(){
                return [1,2,3,4,5];
            }
            let a,b,c;
            [a,...b]=f();
            console.log(a,b);