ES2015 数组与对象的解构

不想成熟的大叔

于 2020-07-13 23:38:46 发布

阅读量415

点赞数

分类专栏： # ECMAScript 文章标签： javascript es6 ECMAScript ES6 Javascript ES6

本文链接：https://blog.csdn.net/kingj_fullstack/article/details/107327966

版权

本文介绍了ES2015中的解构赋值特性，详细阐述了如何对数组和对象进行解构，包括按位置解构、获取指定成员、默认值设定、处理多余成员等，并给出了实际应用场景的例子，如简化字符串拆分和对象属性的获取。

摘要由CSDN通过智能技术生成

ECMAScript2015 新增了一种从数组或者对象获取指定元素的快捷方式，这是一种新的语法，这种新语法叫做解构。如下代码所示，定义一个数组：

const arr = [100, 200, 300]

const foo = arr[0]
const bar = arr[1]
const baz = arr[2]
console.log(foo, bar, baz)

在 ECMAScript2015 之前想要获取这个数组中的元素，需要通过索引访问对应的值，然后将访问的结果赋值给一个变量。

而在 ECMAScript2015 之后，可以通过数组的解构这种方式快速获取数组中的指定成员。如下代码所示：

const arr = [100, 200, 300]

const [foo, bar, baz] = arr
console.log(foo, bar, baz)

这时候就可以定义一个方括号，里面就是获取数组成员对应的变量名，这样变量名就会对应数组中的指定成员。如下图所示：

在这里插入图片描述

这里会根据变量的位置进行分配数组中对应位置的成员。如果只要获取某一个位置上的成员，比如上个数组中的最后一个位置的成员，只需要保留前两个占位就可以了。如下代码所示：

const arr = [100, 200, 300

关注

专栏目录