web前端之ES6的实用深度解构赋值方法、复杂的解构赋值

MENU

• 前言
• 解构对象
• 解构数组
• 解构混用

---

前言

ES6中允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构(Destructuring)。
使用解构赋值可以将复杂的代码整理的更加干净整洁。

---

解构对象

在没有使用解构之前，想要确定对象中的某些属性，那么就需要从对象中获取属性然后赋值给变量，这样会让代码显得非常冗余。

let obj = { name: "张三", age: 22 };
let name = obj.name;
let age = obj.age;

// 张三 22
console.log(name, age);
// 张三 22
console.log(obj.name, obj.age);

---

基本解构格式

如果使用解构的话，保持将变量名和对象属性名同名才可取到值。

let { name, age } = { name: "张三", age: 22 };

// 张三 22
console.log(name, age);

---

变量别名

如果解构的对象中，属性名和外部的变量名重名，将会报错，可以使用别名的方式进行解构。

let name = "王五";
let { name: newName, age } = { name: "张三", age: 22 };

// 张三 22
console.log(newName, age);

---

变量默认值

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

let { name, age, gender = "男" } = { name: "张三", age: 22 };

// 张三 22 男
console.log(name, age, gender);

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

function fn({ name = '李四', age = 30 } = {}) {
    // 李四 30
    console.log(name, age);
}

fn();

---

解构数组

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

---

数组基础解构用法

如果在没有解构之前，需要拿到数组中的前3位字符串，那么只能按照索引值的方式定义变量。

let arr = ["HTML5", "JavaScript", "Vue", "React", "NodeJS"];
let str1 = arr[0];
let str2 = arr[1];
let str3 = arr[2];

// HTML5 JavaScript Vue
console.log(str1, str2, str3);
// HTML5 JavaScript Vue
console.log(arr[0], arr[1], arr[2]);

解构赋值

let [str1, str2, str3] = ["HTML5", "JavaScript", "Vue", "React", "NodeJS"];

// HTML5 JavaScript Vue
console.log(str1, str2, str3);

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

---

选择解构

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

let [, , , value1, value2] = ["HTML5", "JavaScript", "Vue", "React", "NodeJS"];

// React NodeJS
console.log(value1, value2);

---

扩展运算符

在一个数组中解构，可以取得数组第一位，剩下的通过扩展运算符(展开运算符)，统一放置到一个数组中。

let [value, ...other] = ["HTML5", "JavaScript", "Vue", "React", "NodeJS"];

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

---

默认值

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

let [v1, v2, v3 = "Vue"] = ["HTML5", "JavaScript"];

// HTML5 JavaScript Vue
console.log(v1, v2, v3);

---

交换变量值

let name1 = "张三";
let name2 = "李四";

[name2, name1] = [name1, name2];

// 李四 张三
console.log(name1, name2);

---

解构混用

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

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

---

传统型

let result = person.works.music[1];

// 鸡你太美
console.log(result);

---

浅层解构

let { works } = person;

// 鸡你太美
console.log(works.music[1]);

---

连续解构

let { works: { music } } = person;

// 鸡你太美
console.log(music[1]);

---

数组与对象混用

let { works: { music: [, result] } } = person;

// 鸡你太美
console.log(result);

---

解构+别名

let { works: { music: [, result], movies: newMov } } = person;

// 鸡你太美 ["童话二分之一", "鬼畜区常青树"]
console.log(result, newMov);