解构：使数据访问更便捷！

Posted 2021-09-28 蛙人

前言

初衷：最近在读《深入理解Es6》这本书，之前没好好全面学过Es6语法，也是趁着不忙的阶段重新好好研究一下整理一下笔记分享给大家，不喜勿喷。

适合人群：前端初级开发，大佬绕道。

内容结构：基本语法 -> 语法利弊 -> 应用场景

为何使用解构功能

在Es5中，我们之前要想从对象或数组对象中获取特定的数据，通常都是这么做的。来看下面例子

let person = {
    name: "蛙人",
    age: 24
}

let name = person.name
let age = person.age

上面example中，可以看到我们从person对象中获取到name和age属性并赋值给了新声明的变量name和age，这样声明两个变量那没问题，假如以后多了呢。

所以Es6为对象和数组提供了解构功能，将数据结构打散过程变得更加简单，可以从打散后更小的部分获取所需的信息。下面我们来看看吧

对象解构

let person = {
    name: "蛙人",
    age: 24
}
let { name, age } = person
console.log(name) // 蛙人
console.log(age) // 24

上面example中，person.name的值被赋值给了name变量，person.age的值被赋值给了age变量。只不过这里用的是对象的简写语法，如果不明白对象的新特性，请看我上一篇文章《Es6对象扩展了哪些特性？》

不要忘记初始化值

如果使用var、let、const用于声明解构，就必须初始化值也就是右侧的变量。我们来看个例子

var { name, age }; // 语法抛出错误
let { name, age }; // 语法抛出错误
const { name, age }; // 语法抛出错误

上面example中，我们可以看到有声明用于解构赋值并不初始化值那么就会抛出错误。如果不用于解构，var和let声明的变量可以不用初始化值，但是const声明的变量必须要初始化值，否则抛出错误。如果不明白的var、 let、const区别，看我这篇《一看就懂的var、let、const三者区别》

注意： 如果解构赋值右侧的值为null or undefined则抛出错误，切记。

解构赋值

在上面中，我们已经把解构说完了，那么解构赋值又是啥东西呢。就是，我们同样在给变量赋值时使用解构语法。看下面例子

let name = "小王"
let age = 18
let person = {
    name: "蛙人",
    age: 24
};
// 使用解构赋值为变量赋值
({ name, age } = person);
console.log(name) // 蛙人
console.log(age) // 24

上面example中，我们先定义了name和age变量，并初始化值，然后又通过解构的赋值的方法将name和age变量从person对象中读取重新赋值。注意，一定要用一对小括号包裹解构赋值语句，javascript引擎会把花括号当成一个代码块，而语法规定代码块不能出现在赋值语句的左侧，用小括号包裹后可以将代码块转换成一个表达式，这样可以实现解构赋值啦。

我们接下来，在函数参数使用解构赋值表达式

let name = "小王"
let age = 18
let person = {
    name: "蛙人",
    age: 24
};
function getObj(data) {
    console.log(data == person) // true 这里的data就是person，表达式的值就是 =右侧的的值
}
getObj({ name, age } = person)
console.log(name) // 蛙人
console.log(age) // 24

上面example中，调用getObj函数时传入了一个解构赋值表达式，由于JavaScript表达式的值为右侧的值，所以函数里的参数对象就是person对象，并且也将name和age变量重新赋值。

使用解构赋值时，如果指定的变量名称在对象中不存在，那么这个变量就是undefined的。来看下面例子

let person = {
    name: "蛙人",
    age: 24
}
let { name, age, sex} = person;
console.log(name, age, sex) // 蛙人 24 undefined

上面example中，解构赋值表达式里有个sex变量，但是显然对象里不存在这个sex属性，这时这个sex变量就会被赋值于undefined。

当指定的属性不存在时，我们可以设置一个默认值，跟函数参数默认值一样。来看下面例子

let person = {
    name: "蛙人",
    age: 24
}
let { name, age, sex = "male" } = person;
console.log(name, age, sex) // 蛙人 24 male

上面example中，给sex设置默认值，只有当person对象上没有该属性时或这个属性为undefined时，这个默认值才会生效，这和函数默认值一样，如有不明白可以看我这篇文章《你真的了解ES6中的函数特性么？》。

解构赋值起别名

以上代码中，我们解构表达式都是同变量同属性名，那么有时候我们解构出来的不想和这个属性名称一样，怎么办呢，解构表达式同意支持起别名。来看下面例子

let person = {
    name: "蛙人",
    age: 24
}
let { name: userName, age: userAge } = person
console.log(userName) // 蛙人
console.log(userAge) // 24

上面example中，上面解构表达式中将name属性存储在了userName，将age属性存储在了userAge，那么这时就不能访问name和age了，因为他俩已经不是变量了。

解构赋值起别名也支持默认参数

let person = {
    name: "蛙人",
    age: undefined
}
let { name: userName, age: userAge = 24 } = person
console.log(userName) // 蛙人
console.log(userAge) // 24

这里就不多说了，跟上面说的默认参数是一样的道理。

对象多层嵌套解构

解构赋值也支持多层嵌套，语法跟上面讲的对象字面量也一样，可以更加细化的拆分解构。来看下面例子

let person = {
    name: "蛙人",
    age: 24,
    hobby: {
        name: "写代码"
    }
}
let { hobby: { name: code = "code" } } = person
console.log(code) // 写代码

上面example中，可以看到上面多层解构语法跟普通解构是一样的，只不过在嵌套一层{}花括号而已。上面我们已经解构出来hobby属性，然后继续往里深入解构name属性并且赋予默认值，然后我们又给它起了个别名变量code。

对象解构雷区需注意

在使用多层嵌套解构时需要注意，你很有可能无意间创建了一个无效的表达式，就是解构空花括号但是这个语法也是合法的，也什么都不会做，也不报错。下面我们来看一下。

let person = {
    name: "蛙人",
    age: 24,
    hobby: {
        name: "写代码"
    }
}
let { hobby: {} } = person

在上面语句中，可以看到深层解构hobby属性右侧是一个{}括号，但没有声明任何变量，这个语句也是合理的且不会报错。官方回答：这个语法在将来有可能被废弃掉，咱们只要知道别这样写就行。

---

数组解构

数组解构语法跟对象解构语法差不多，只不过数组解构用[]字面量语法解构，看下面例子。

let colors = ["red", "blue", "green"]
let [ red, blue ] = colors
console.log(red, blue) // red blue

数组解构和对象解构最大的区别，对象解构无序的而数组解构是有序的，我们来看下例子。

let colors = ["red", "blue", "green"];
let [ blue ] = colors
console.log(blue) // red

let ObjColors = {
    red: "red",
    blue: "blue",
    green: "green"
}
let { blue } = objColors
console.log(blue) // blue

上面example中，我们可以看到数组解构的blue变量是red值，所以数组解构是根据位置来的，一个位置对应一个值，不能像对象字面量那样对象里面有值我们就可以直接获取出来，不需要按照顺序。而数组解构是需要的顺序解构的。

如果我们只想获取数组第二个值，我们可以直接忽略第一个值的变量，只写一个占位符就可以。来看下面例子

let colors = ["red", "blue", "green"]
let [ , blue ] = colors
console.log(blue) // blue

上面example中，只获取第二个值，所以把数组解构第一个值只占位不声明变量，然后在写入blue变量，这样就可以只获取第二个值了。

数组解构跟对象解构一样，var、let、const声明的数组解构必须都要初始化值，否则抛出错误。上面将对面解构时已说过，切记。

数组解构默认值

数组解构默认值跟对象解构默认值也是一样的，只要数组里面没有这个值或者这个值被设置为undefined那么默认值就会生效。

let person = ["蛙人", 24]
let [ name, age, sex = "male" ] = person
console.log(name, age, sex) // 蛙人 24 male

数组多层嵌套解构

数组多层嵌套解构跟对象多层嵌套解构也是类似，就是语法不一样，数组使用[]按照顺序解构。我们来看一下例子

let person = ["蛙人", 24, ["写代码", "撩妹", "羽毛球"]]
let [ name, age, [firstHobby] ] = person
console.log(name, age, firstHobby) // 蛙人 24 写代码

上面example中，可以看到多层解构时，使用[]方括号往里一层一层深入，层层抽取我们想要的数据。

数组解构和对象解构语法都差不多类似，只需要注意数组解构使用[]，对象解构使用{}，及他们的雷区也都是一样的，我使用解构那就必须得初始化右侧的值，否则报错。

混合解构

以上讲完了，上面都是说的单一对象解构，那么我们现在可以做一些混合解构，这就要数据解构和对象解构都要用上了。看下面例子

let person = {
    name: "蛙人",
    age: 24,
    sex: "male",
    hobby: ["写代码", "撩妹", "羽毛球"]
}
let { name, sex, hobby: [, , lastHobby] } = person
console.log(name, sex, lastHobby) // 蛙人 male 羽毛球

上面example中，person是一个对象，里面定义了个人信息。然后到下面解构时，里面用到了对象解构和数组解构，然后我们知道数组解构只能根据位置来解构，所以使用数组占位符获取出来最后一个数组的值。

那么上面讲了这么多语法，到底用在哪呢？什么样的场景下使用呢？下面就来看一下这些语法应用场景

应用场景

对象解构

通常在Es5中，比如我们要做一个个人信息信息展现功能，我们先写个函数然后传递一个对象，在这个函数里面我们需要声明赋值一堆变量，而这些值都从传递进来的那个对象里面去取。来看下面例子

function informationFn(data) {
    let name = data.name;
    let age = data.age;
    let sex = data.sex;
    let email = data.email;
    let phone = typeof data.phone != "undefined" ? data.phone : "暂无";
}
let person = {
    name: "蛙人",
    age: 24,
    sex: "男",
    email: "[e-mail]",
    phone: undefined
}
informationFn(person)

上面example中，可以看到代码虽然没有问题，但是这样一来代码太多，造成代码冗余，现在我们在用Es6语法来实现一下上面功能。

function informationFn({ name, age, sex, email, phone = "暂无" }) {
    console.log(name, age, sex, email, phone)
}
let person = {
    name: "蛙人",
    age: 24,
    sex: "男",
    email: "[e-mail]",
    phone: undefined
}
informationFn(person)

上面example中，是我们用Es6语法对象解构和解构默认值又实现了一下，可以看到代码非常简洁。

数组解构及赋值

在Es5中，我们想要实现一个两个变量互相交换值，还得依靠第一个变量来实现。

let a = 1;
let b = 2;
let temp;
temp = a;
a = b;
b = temp;
console.log(a, b) // 2 1

然而在Es6出现数组解构赋值，完全不需要这么做，我们来看下怎么实现。

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

上面example中，解构赋值右侧表达式，是临时组建的数组，它会先计算右侧数组，最后在将右侧数组赋值于前面数组变量。

感谢

谢谢各位在百忙之中点开这篇文章，希望对你们能有所帮助，如有问题欢迎各位大佬指正。

如果觉得写得还行的话，那就点个赞吧。

有兴趣的话大家也可以加我的个人vx进行交流 联系我