解构:使数据访问更便捷!

4,429 阅读10分钟

前言

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

适合人群:前端初级开发,大佬绕道。

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

为何使用解构功能

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

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

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

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

所以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对象扩展了哪些特性?》

不要忘记初始化值

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

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

上面example中,我们可以看到有声明用于解构赋值并不初始化值那么就会抛出错误。如果不用于解构,varlet声明的变量可以不用初始化值,但是const声明的变量必须要初始化值,否则抛出错误。如果不明白的varletconst区别,看我这篇《一看就懂的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中,我们先定义了nameage变量,并初始化值,然后又通过解构的赋值的方法将nameage变量从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对象,并且也将nameage变量重新赋值。

使用解构赋值时,如果指定的变量名称在对象中不存在,那么这个变量就是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,那么这时就不能访问nameage了,因为他俩已经不是变量了。

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

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: "xxxxxx@163.com",
    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: "xxxxxx@163.com",
    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进行交流 联系我