ES深度解构赋值的实用方法

前言

ES6 中允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

使用解构赋值可以将复杂的代码整理的更加干净整洁。

一、解构对象

在不使用解构的情况下，想要获取对象中的某些属性，就需要从对象中获取属性然后赋值给变量，如下代码所示：

let obj = {name: "李斯", gender: "保密", age: 18};
let name = obj.name;
let gender = obj.gender;
console.log(name, gender);

// 李斯 保密

1、基本解构格式

如果使用解构的话，只需要如下面格式所写即可，保持将变量名和对象属性名同名才可取到值。

let {name, gender} = {name: "李斯", gender: "保密", age: 18};
console.log(name, gender);

// 李斯 保密

2、变量别名

如果要解构的对象中的属性名和外部定义的名称重名了，将会报错，可以使用别名的方式进行解构，如下所示：

let name = "老秦";
let {name: newName, gender, age} = {name: "李斯", gender: "保密", age: 18};
console.log(newName, gender, age);

// 李斯 保密 18

3、变量默认值

如果目标对象属性中没有要解构的属性，不指定默认值，那么将会undefined，此时可以给解构变量写默认值，如下所示：

let {name, age, gender = "男"} = {name: "李斯", age: 18 };
console.log(name, gender, age);

// 李斯 男 18

此种为变量设置默认值的方法，常应用于函数参数中，加入调用函数时没传递参数，有可能会对函数运行造成错误，那就可以在形参位置进行对象解构，对变量指定默认值，如下代码所示：

function fn({name = '李斯', age = 18} = {}){
	console.log(name, age);
}
fn()

// 李斯 18

二、解构数组

解构数组和对象有些不同，解构对象的时候属性前后位置不影响，但是结构数组，需要按照索引顺序结构。

1、数组基础解构用法

在不使用解构的情况下，要拿到数组中的前3位字符串，那么只能按照下面这种按照索引值的方式定义变量，如下所示：

let arr = ["HTML5","JavaScript", "Vue", "React", "NodeJS"];
let str1 = arr[0];
let str2 = arr[1];
let str3 = arr[2];
console.log(str1, str2, str3);

// HTML5 JavaScript Vue

如果使用解构赋值的话，就可以展现位如下格式：

let [str1, str2, str3] = ["HTML5", "JavaScript", "Vue", "React", "NodeJS"];
console.log(str1, str2, str3);

// HTML5 JavaScript Vue

基于这种特性，如果一次性想要定义多个变量，就可以使用这种解构的方式定义，相当于一次性定义了三个变量并对变量进行了赋值。

2、选择解构

数组的特性是按照索引值顺序执行的，如果只要取得数组最后几位，或者第几位，需要预留出其他值的位置，如下所示：

let [ , , , value1, value2] = ["HTML5", "JavaScript", "Vue", "React", "NodeJS"];
console.log(value1, value2);

// React NodeJS

3、扩展运算符

在一个数组中解构，可以取得数组第一位，剩下的通过扩展运算符（展开运算符），统一放置到一个数组中，如下所示：

let [value, ...other] = ["HTML5", "JavaScript", "Vue", "React", "NodeJS"];
console.log(value, other);

// HTML5 ["JavaScript", "Vue", "React", "NodeJS"]

4、默认值

同上面对象别名方式一致。

let [v1, v2, v3 = "Vue"] = ["HTML5", "JavaScript"];
console.log(v1, v2, v3);

// HTML5 JavaScript Vue

5、交换变量值

let name1 = "老秦";
let name2 = "李斯";
[name2, name1] = [name1, name2];
console.log(name1, name2);

// 李斯 老秦

三、解构混用

在实际开发中基本没有上面那种简单的结构，大多数都是数据结构比较复杂，用好了解构赋值才会让你的代码看起来更加整洁。

通过下面的示例演示一下混用解构的方法，以如下对象为例，想要获取代表作品works字段下面音乐作品music下的“鸡你太美”，应该如何操作：

let person = {
	name: "坤坤",
	age: 25,
	like: ['唱', '跳', 'rap', '篮球'],
	works: {
            music: ['Wait Wait Wait', '鸡你太美'],
            movies: ['童话二分之一', '鬼畜区常青树']
        },
	friend: ['丞丞', '大宝贝', '大黑牛']
}

1、传统型

let result = person.works.music[1]
console.log(result);

// 鸡你太美

2、浅层解构

let {works} = person
console.log(works.music[1]);

// 鸡你太美

3、连续解构

let {works: {music}} = person
console.log(music[1]);

// 鸡你太美

4、数组与对象混用

let {works: {music: [, result]}} = person
console.log(result);

// 鸡你太美

5、解构+别名

let {works: {music: [,result], movies: newMov}} = person
console.log(result, newMov);

// 鸡你太美 ['童话二分之一', '鬼畜区常青树']

四、全局变量作用域内结构赋值

let name, age;
if(true){
    ({name, age} = {name: "小明", age: 18});    
}
console.log(name);

// 小明