4. 解构赋值

前言

解构赋值是一种表达式，允许将可迭代对象的值或者属性分配给变量。解构赋值能让我们用更简短的语法进行多个变量的赋值。解构表达式为：array和object

1. 数组表达式解构赋值

常规用法

将数组赋值给多个变量：

ES6之前这样写

var myArray = [1,2,3];
var a = myArray[0];
var b = myArray[1];

解构赋值这样写：

var myArray = [1,2,3];
let a,b,c;
[a,b,c] = myArray;

// 或者
let [a,b,c] = [1,2,3]  // myArray

若左边的数值长度少于右边，左边的变量的值会和右边的一一对应，多余的忽略

忽略数组中的某些值

若只有俩变量，数组有仨值，想跳过第二个赋值给变量，使用解构赋值：

let array = [1,2,3];
let [a, ,b] = [1,2,3];
console.log(a);    // 1
console.log(b);    // 3

使用展开语法

let [a, , ,...b] = [1,2,3,4,5,6];
console.log(a)    // 1
console.log(b)    // 4,5,6
console.log(Array.isArray(b));  // true

使用默认参数

let [a,b,c=3] = [1,2];
console.log(c);   // 3

嵌套数组

从多维数组中提取值并分配给变量

let [a,b,[c,d]] = [1,2,[3,4]];

作为函数参数

function myFunction([a,b,c=3]){
    console.log(a,b,c);    // 1,2,3
}
myFunction(1,2);

或者

function myFunction([a,b,c=3] = [1,2,3]){
    console.log(a,b,c);    // 1,2,3
}
myFunction(undefined);

2. 使用对象表达式解构赋值

常规用法

将对象的属性值赋给多个变量，ES6之前：

var object = {name: "zhangsan", age: 18};
var name = object.name;
var age = object.age;

解构赋值这样写：

let object = {name: "zhangsan", age: 18};
let name, age;
({name, age} = object);

解构赋值变量名和右边的属性名要保持一致，否则变量赋值为undefined。

若想以其他变量名命名，可以这么写：

let object = {name: "zhang", age: 18}
let x,y;
({name: x, age: y} = object);

// 或者
let {name:x, age:y} = {name:"zhang", age:18}

默认参数值

let {a,b,c = 3} = {a: "1", b: "2"};
console.log(c)    // 3

解构赋值时变量名这个支持表达式计算

let {["first" + "Name"]: x} = {firstName: "Eden"};
console.log(x)    // Eden

嵌套对象

从嵌套对象中提取属性，即对象中的对象

let {name, otherInfo: {age}} = {name: "Eden", otherInfo: {age: 18}};
console.log(name, age)    // Eden, 18

作为函数参数

function myFunction({name:"zhang", age:18, sex:"男"}){
    console.log({name,age,sex};    // li 20 男
}
myFunction({name:"li", age:20})

这里我们传递一个空对象作为默认参数值，如果undefined作为函数参数传递，变量将使用默认值

3. 其他用法

解构对象的方法

let {floor,pow} = Math  // 将Math对象的方法提取出来变成一个变量
let a = 1.1;
console.log(floor(a));    // 1
console.log(pow(2,3));    // 8

获取字符串长度

var {length} = "lsc";  // 只能写成length
console.log(length);   // 3

拆分字符串 ??????????(报错)

var [a,b,c,d] = '我是你爹'；
console.log(a,b,c,d);

交换变量

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

遍历Map结构

var map = new Map();
map.set('first', 'hello');
mao.set('second', 'world');
for (let [key, value] of map){
    console.log(key + "is" + value);
}

4. 使用场景

当我们与后端API接口做数据交互时，需要处理返回的JSON对象，使用解构赋值简化了代码

let jsonData = {
    id: 42,
    status: "OK",
    data: [832, 1231]
};
let {id, status, data: number} = jsonData;
console.log{id, status, number};