Press "Enter" to skip to content

ES6中的Destructuring assignment解构赋值

通过解构赋值destructuring assignment表达式,你能够将数组中的元素或者对象的属性直接取出来赋值给变量。

一、语法:

二、描述:

对象和数组的字面表达式({}、[])提供了一个临时保存数据集合的简便方法。

解构赋值采用的语法与上述代码相似,只是在赋值语句的左侧来定义需要从数据集合中取哪些值。

诸如Perl、Python这样的编程语言中,也有类似的特性。

三、数组解构

2.1、基本的变量赋值

2.2、变量赋值与声明分开

2.3、默认值

解构赋值可以指定默认值,这个默认值会在取到的值为undefined时生效。

2.4、变量交换

交换变量值的操作可以直接在一个解构赋值语句中实现了,不需要再临时声明一个变量用来存值了。

2.5、解析函数返回的数组

函数直接返回数组的情况是很常见的。借助解构赋值,可以让处理函数的数组返回值的代码更精炼。

在下面这个例子里,f()会返回数组[1, 2],通过解构赋值,只需要一行代码就可以解析这个数组了。

2.6、忽略部分返回值

如果数组中有一些返回值是你不感兴趣的,可以通过类似下面这样的代码予以忽略:

你也可以忽略所有的返回值(不过讲道理,这代码有啥用?):

2.7、将数组中剩余元素赋值给一个变量

注意,如果在上述代码中…b右边加上逗号的话,是会报错的。

2.8、从正则匹配结果中取值

通过正则表达式的exec()方法,你会得到一个这样的数组[正则完整匹配的字符串,  正则中第一个括号内表达式所匹配的字符串,  正则中第二个括号内表达式所匹配的字符串, …, 正则中最后一个括号内表达式所匹配的字符串],通过解构,你能更方便的取你想要的值。

四、对象解构

3.1、基本的变量赋值

3.2、变量声明与赋值分开

说明:

  • 在对对象字面量解构赋值时,若不是同时进行变量声明的话,解构赋值语句两侧的括号是需要的。
  • 从语法上来说,单独{a, b} = {a: 1, b: 2}这样的代码并不是有效的代码,因为等号左侧的{a, b}会被当作块级表达式而非对象字面量。
  • 不过,({a, b} = {a: 1, b: 2})这样的代码就跟var {a, b} = {a: 1, b: 2}一样,都是有效的。
  • 提醒:如果你的解构赋值代码(…)的上一行是一个函数,你可能需要在你的(…)解构赋值代码前加一个分号,不然可能就直接执行调上一行的函数了-_-。

3.3、赋值给新的变量名

3.4、默认值

可以对对象进行解构赋值时指定默认值,当解构出来的值为undefined时,就会使用默认值。

3.5、设定函数入参的默认值

3.6、嵌套对象/数组解构

3.7、for of遍历和解构

3.8、从函数的对象类型入参中取字段

3.9、对象的计算属性与解构

3.10、将对象的剩余属性赋值给一个变量

3.11、无效的JS identifier作为对象属性名

参考:
  • https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Be First to Comment

发表评论

电子邮件地址不会被公开。 必填项已用*标注