38. 对对象与数组的解构的理解？

38. 对对象与数组的解构的理解？

解构是 ES6 提供的一种新地提取数据的模式, 这种模式能够从对象或数组里有针对性地拿到想要的数值。

数组的解构

数组解构赋值, 两种基本写法:

• 分行解构
• 单行解构

let info = ['Mr.Lee', 100, '男']; // 数组赋值
let [name, age, gender] = info;  // 数组解构赋值

let info = ['Mr.Lee', 100, '男'],
    [name, age, gender] = info; // 同上

// 单行解构, 以上均可输出 name 值
let [name, age, gender] = ['Mr.Lee', 100, '男'];
console.log(name);
1
2
3
4
5
6
7
8
9

分行或单行, 都可以确定必须一一完美匹配才可以正确赋值:

// 数组层次也需要匹配
let [name, [age, gender]] = ['Mr.Lee', [100, '男']];

// 用逗号作为占位符不赋值
let [, , gender] = ['Mr.Lee', 100, '男'];
1
2
3
4
5

变量解构时, 可在数组元素中设置一个默认值:

// 当 gender 没有赋值时, 采取默认值
let [name, age, gender = '男'] = ['Mr.Lee', 100];
1
2

还有一种 ...var 语法, 可将没有赋值的内容都赋值给这个变量:

// 不定元素, 将其余都赋值给 other
let [name, ...other] = ['Mr.Lee', 100, '男'];
1
2

对象的解构

对象的解构方法和数组大同小异, 定义一个对象字面量, 解构赋值:

// 定义对象字面量
let obj = {
    name: 'Mr.Lee',
    age: 100,
};
let {name, age} = obj;
console.log(name);
console.log(age);

// 解构对象至变量
let {name, age} = obj; // 或 ({name,age}=obj);

// 直接输出变量
console.log(name);
console.log(age);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

若解构的变量名是已经存在的变量, 会导致:

let obj = {
    name: 'Mr.Lee',
    age: 100,
}, name = 'Mr.wang';  // 被替代

({name, age} = obj);
console.log(name);
1
2
3
4
5
6
7

对象变量解构也可以设置成一个默认值, 在没有赋值时输出默认值:

 let obj = {
    name: 'Mr.Lee',
    age: 100,
};
let {name, age, gerder = '女'} = obj;
console.log(gerder) // 如果没有默认值则 unidentified
1
2
3
4
5
6

如果不想要对象属性名作为解构变量, 可通过键值对的方式更改变量名:

let {name: myName, age: myage} = obj;   // name 将失效
1

在对象字面量里, 还嵌套了对象, 可以在解构出来的变量名右侧, 通过 :{目标属性名} 这种形式, 进一步解构它, 一直解构到拿到目标数据为止:

let obj = {
    name: 'Mr.Lee',
    age: 100,
    info: {
        id: 1,
        gender: '男'
    }
}
let {info: {id, gender}} = obj;
console.log(gender);
1
2
3
4
5
6
7
8
9
10

对象的解构也支持单行的简写模式:

let {name, age} = {name: 'Mr.Lee', age: 100};
console.log(name);
1
2

注意: 对象解构严格以属性名作为定位依据, 所以就算调换了 name 和 age 的位置, 结果也是一样的。