五分钟带你了解ES6中的解构

157 阅读5分钟

前言:解构是ES6中的一种方便的语法,可以允许我们方便地从数组或者对象中提取数据并将它们赋值给变量,让我们通过这篇文章来快速了解它吧!

1.解构的基础语法

我们通常为变量赋值时应该都是以下操作

let a = 1
let b = 2
let c = 3

但是如果遇到需要批量化定义变量时,仍然用以上方法便变得有些繁琐。所以JS的官方提供了一种新的语法,我们可以这么写

let [a, b, c] = [1, 2, 3]

直接let后面接一个数组符号[ ],然后数组里再放上变量名。这样写就会导致a1b2c3。这样我们就可以一行实现以前多行的效果。这种方式就被称之为解构赋值,是一种可以一一对应赋值定义变量的方法。

我们再来看一个例子

let [foo, [bar, [baz]]] = [1, [2, [3]]]

我们定义了一个多维数组,并且希望用变量来承接数组里面的值。传统的方法需要进行多层的访问才能拿到数组里的值。但是如果利用解构的方法,直接定义一个和原本数组长得一样的结构。就可以很方便地访问到多维数组里的值。所以,通俗的说解构就是将原本数据的数据结构提取出来并仿造原本的数据结构定义变量,通过新定义的变量我们就可以拿到原本数据结构里的值

2.数组解构

基本语法

假设我们有一个数组let arr = [1, 2, 3];我们可以使用以下方式解构这个数组:

let [a, b, c] = arr;

这里,a的值为1b的值为2c的值为3。变量的顺序与数组的顺序相对应。

跳过元素

如果我们想获取数组中的某些元素,可以使用逗号来跳过不需要的元素。例如,对于数组let arr = [1, 2, 3];我们只想获取第一个和第三个元素。我们就可以这样写:

let [a,, c] = arr;

此时a1c3

剩余元素赋值

我们先看一个例子

let [a, b, c] = [1, 2, 3, 4, 5, 6, 7]

我们这样定义a的值为1b的值为2c的值为3。但是,如果我们想获取剩余的其他元素呢?是不是需要多定义几个变量呢?其实不用,ES6中我们可以利用...语法来收集剩余的元素。我们想要获取剩余的元素只需要做以下操作

let [a, b, c, ...d] = [1, 2, 3, 4, 5, 6, 7]

这里,a的值为1b的值为2c的值为3d是一个包含4、5、6、7的数组

image.png

默认值

我们在解构时,可以为变量设置默认值。例如

let [a = "hello", b, c, ...d] = []

我们为a赋了一个初始值为字符串"hello",现在利用解构赋值的语句为a赋一个值,但是原本数组里面没有放值,这时a的值就是字符串"hello"

image.png

但如果此时我们数组里面有值呢?

let [a = "hello", b, c, ...d] = [1]

image.png 可以看到结果为1,因为数组里面原本就有值,如果原本没有值就用默认值。

3.对象解构

基本语法

我们来看一个例子

let obj = {
    name: 'Tom',
    age: 18
}
obj.name = 'Jerry'

我们通常想获取并修改对象里的值使用的语法是对象.属性。如果使用解构的语句就可以像下面这样做

let obj = {
    name: 'Tom',
    age: 18
}

let { name: foo, age: bar } = obj
console.log(foo, bar);

image.png

let { name: foo, age: bar } = obj这行代码相当于在let foo = obj.name,let bar = obj.age原来的对象里有个name,那么解构语句中也要有个name,原来对象name里面放的值是"Tom",解构语句中name里面放的是变量foo

注意解构语句里:前的name不能乱写,因为要与原对象里的name一一对应,但是解构语句:后的变量名我们就可以随意起。我们也可以把:后的变量名取成和原对象里的属性一样的名字比如

let { name: name, age: age } = obj
console.log(name, age)

image.png

可以看到我们得到了和之前一样的结果。特别地,当我们结构语句中keyvalue是同一个值时,我们就可以简写为以下语句

let { name, age } = obj

我们再来看一个例子来感受解构的便捷之处

let obj = {
    name: 'Tom',
    age: 18,
    like: [
        'coding',
        { x: 'eat' }
    ]
}

我们定义了一个obj对象,现在想要拿到eat这个值,按照以往的方法我们是这么写obj.like[1].x用解构我们就可以这么写

let { name, like: [, { x }] } = obj

这样我们直接访问x就可以得到'eat'

4.字符串解构

字符串的解构和数组的解构类似,也是将需要解构的变量放在[]

let str = 'hello'
let [a, b, c, d, e] = str
console.log(a, b, c, d, e);

image.png

5.函数参数解构

函数在传参时其实也用到了解构这个语法。例如在下面的代码块中,我们往一个函数里面传了一个数组,那么我们往这个函数写入一个形参,这个形参就代表是一个数组。

function foo(arr) {

}
foo([1, 2])

当然我们也可以用解构的语法在函数的参数部分进行解构,这样我们就可以直接拿x,y

function foo([x, y]) {

}
foo([1, 2])