五分钟学会ES6系列之解构(使数据更便捷)

2,772 阅读6分钟

一.为何使用解构功能

对象和数组是我们在日常工作中使用最频繁的数据结构,再加上json数据格式的普及,二者已经成为js语言中很重要的一部分,日常工作中我们时不时的需要从后台返回的数据结构中提取我们需要的数据,es6之前是这么写的:

自从有了ES6之后,很大程度方便我们在这部分的操作了,还等什么,学会这一部分的内容,提升自己的工作效率吧!先来看一眼写法上的差别吧:

二.对象解构

对象字面量的语法形式是在一个赋值操作符左边放置一个对象字面量:如上面我们写的let {resultData:{username,addr}} = data ,必须注意的是不能忘记初始化,什么意思呢,就是使用 var, let , const声明结构赋值变量的时候,必须提供初始化程序,也就是说等号右侧必须有值。我们知道,如果不使用结构赋值的时候,let 和var是可以只声明,不赋值的,但是const必须赋值,不然会报错,这点需切记。

解构赋值

上面我们讲到的是解构声明变量的时候必须赋值,但是当我们的变量已经有值了,再次赋值的时候也是可以使用解构赋值的:

注意上面的地方用的是()包裹起来,不然会报错,因为js规定,一对完整的代码块即{}是不可以出现在赋值语句的左侧,这个也注意一下,解构赋值表达式的值与右侧的值相等,由此一来,在任何使用值的地方都可以使用解构赋值表达式。看看函数中是如何使用的吧:

注意,解构赋值表达式,右侧的值如果是null , undefined会导致报错,也就是说,任何尝试读null或undefined的属性的时候,都会报错。

默认值

我们经常使用的一种情况是,当我们从后台拿过来的数据解析的时候,如果不存在就需要给一个默认值,不然可能会导致页面渲染数据的时候会出错,,在es6的解构赋值中也可以直接给赋值默认值:即直接在属性名称后面添加一个 “=” 和默认值就可以,如下面的例子:

为非同名局部变量赋值

上面我们使用的都是为同名变量赋值,但是,如果后台返回的属性名称跟前端使用的名称不同的时候,这时候需要相互赋值也是可以的,而且还可以同时给默认值,看看下面的例子:

嵌套对象解构

嵌套对象可以说是对象解构中最复杂的了,掌握了前面的内容,这一部分也很简单。嵌套对象的使用和对象字面量的使用语法类似,而且我们可以使用解构赋值解构嵌套多层的对象,具体的示例见我们刚开始的第二张图,想不到吧,一上来先放个难度高的,现在回过头去看看是不是还是简单,其实只要掌握了一层的结构,那么嵌套多层也类似,只要左右两侧结构对应上就行,注意,一定要结构对应上才行,当然多层次的结构赋值同样也可以同时使用,默认值,非同名变量赋值等功能。

三.数组解构

上面我们了解了对象的解构,接下来再看看数组的解构,这回更简单了。对象解构使用的是对象字面量,而数组解构使用的是数组字面量。而且数组结构直接在数组内完成。记住,不管如何解构,原始数组不会反生任何变化。

在数组解构语法中,我们通过值在数组中位置进行选取,且可以将其存储在任意的变量中,未显示声明的元素会直接被忽略。看看下面的例子:

解构赋值

跟对象解构赋值不同的是,数组的结构赋值可用于上下文,即不需要使用()也可以。而且数组的结构赋值还有比较独特的用例:交换两个值,在es6之前,我们需要创建一个临时变量,但是现在不需要了。

默认值和嵌套数组解构

默认值的使用的对象一模一样,这里不再解释,在下面的例子中我们可以直接看示例,

嵌套数组解构,跟对象的嵌套解构也差不多,记住一点,就是左右的结构必须对称就行。

不定元素与数组克隆

在函数中我们知道会有不定参数,在数组中其实也有不定元素,可以通过 ... 语法将数组中的其余元素赋值给特定的变量,但是必须记住,在解构赋值数组中,不定元素必须为最后一个条目,如果不定元素后面还有元素的话,则会直接导致错误。

在es5中我们有的时候会使用concat()方法来复制一个数组,虽然不止有这一个方法,但在es6中出现更方便的方法,一起来看看这两个知识点的例子:

混合解构

上面讲了那么多,也展示很多的小示例,那么现在是时候来展示一把复杂结构了,即就是数组和对象同时存在的时候,这里我模拟一个从后台拿到的数据结构,来解析一下:

四. 参数解构

上面我们讲了对象和数组的解构的所有的东西,其实我们在前面的例子中也有写到,解构赋值依然适用于函数的参数中,也就是说我们前面讲的所有的东西,默认值,解构赋值,混合结构等都适用于参数解构,注意一点,当函数的参数中有形参使用了解构,那么函数调用的时候,必须得传值,否则会报错,原因前面我们也讲到了,当一个值尝试读取null或者undefined的时候会报错。

下面我们演示一个例子来看看函数参数的解构,用到的默认值等:

总结

解构语法可以简化我们日常工作中的一些操作,很方便,写起来代码看着也很简介,清爽,只要在使用的时候注意文中的注意点,就放心大胆地去使用吧,如果觉得对自己有帮助,请留下自己的小心心,点个关注鼓励一下,我会持续更新文章的,如果想看更多的内容,欢迎移步笔者的公众号【迈向大前端】,里面有16本前端的相关的电子书和优质文章,为的是分享给在前端路上一直拼搏的小伙伴们,相互鼓励,互相帮张才能走的更长远,前进吧前端er。