前言

在编写代码的时候，我们在给变量赋值的时候可能用到xxx.xxx.xxx;这种形式的赋值，这种赋值用起来是没问题的，但是看起来比较麻烦，所以解构赋值显得更加雅观实用

简单的解构赋值

// 定义一个对象，其中有两个值b和c
const a = {b: 1, c: 2};
// 解构获取
const {b} = a;
console.log(b); // 打印1

const {b, c} = a;
console.log(b, c) // 打印1、2

`

连续解构赋值

// 定义一个多级的对象test
const test = {a: {b: {c: 2}}};
const {a} = test;
console.log(a);//打印 {b:{c:2}}

const {a: {b}} = test;
console.log(a, b); // 打印 a is not defined,

const {a: {b}} = test;
console.log(b);// 打印 {c:2}

注意：连续解构赋值只能取得最后一个值

解构赋值修改其变量

场景：假设我们有一个对象，其中一个key为a，我们想用a的值，但是我们想给他重新变个名字为b，那么接下来就可以取得你想的结果

const test = {a: 1, x: {c: 3}};
const {a: b} = test;
console.log(b);// 打印1
const {x: x2} = test;
console.log(x2);//打印 {c:3}
const {x: {c: data}} = test;
console.log(data);// 打印3

解构赋值与es6的导入导出

我们在做模块化的开发时，会用到数据的解构赋值和导入导出，这个时候会存在一个误区。 有时会误认导出看成解构

import add, {test} from "@/views/test/VUE_test/jiegou";
// 有时候我们会认为test是从jiegou这个文件解构出来的，其实不然，他是由jiegou这个文件导出的。

举个例子，创建一个解构文件，内容如下：

const add = {a: 1, b: 2};

class test {

}
// 添加属性test
add.test = test
export default add;

引入文件：

import add, {test} from "@/views/test/VUE_test/jiegou";
// 运行报错 test 未找到

修改文件：

const add = {a: 1, b: 2};

export class test {

}
// 添加属性test
add.test = test
export default add;
// 这样在引入的时候就不会进行报错了。

结尾

如果对你有用，点个赞吧，你的鼓励就是我前进的动力。