ECMAscript 2015新增了从数组或对象中获取指定元素的一种快捷方式,这是一种新的语法这种新语法叫做结构 Destructuring 。例如,这里有一个数组数组中有三个元素以前如果想要获取每个元素的值都是通过索引访问对应的值,然后将访问过后的结果放在一个变量当中。
// 数组的解构
const arr = [100, 200, 300];
const foo = arr[0];
const bar = arr[1];
const baz = arr[2];
现在可以使用结构的方式去快速提取数组当中的指定成员,具体的用法就是把以前定义变量名的地方修改为一个数组的方括号。方括号里面就是需要提取出来的数据所存放的变量名,内部就会按照变量名出现的位置分配数组当中所对应位置的数值。
// 数组的解构
const arr = [100, 200, 300];
const [foo, bar, baz] = arr;
如果只是想获取某个位置所对应的成员,例如这里只获取第三个成员,就可以把前两个成员留空保留所对应的逗号,确保结构位置的格式与数组是一致的这样就能提取到指定位置的成员。
// 数组的解构
const arr = [100, 200, 300];
const [, , baz] = arr;
除此之外还可以在结构位置的变量名之前添加扩展运算符 (...),表示从当前位置开始往后的所有成员最终所有的结果会放到一个数组当中,需要注意的是这种扩展运算的用法它只能在我们结构位置的最后一个成员上使用。
// 数组的结构
const arr = [100, 200, 300];
const [foo, ...rest] = arr;
另外如果说结构位置的成员个数小于被结构的数组长度,就会按照从前到后的顺序去提取多出来的成员就不会被提取,反之如果说结构位置的成员大于数组的长度提取到的就是 undefined ,这和访问一个数组中不存在的下标是一样的。
const [foo, bar, baz, more] = arr;
console.log(more) // undefined
如果要个提取到的成员设置默认值这就语法同样也能够支持,只需要在结构位置的变量名后面跟上一个等号然后写上一个默认值,这样的话如果没有提取到数组当中对应的成员这样变量就会得到这里的默认值。
const [foo, bar, baz, more = 'default value'] = arr;
console.log(more) // default value
这种新语法在很多场景下都能给我们带来很大的便捷,例如去拆分一个字符串并获取拆分后的指定位置,传统的做法需要用到临时变量去做一个中间的过渡,
const path = '/foo/bar/baz';
const temp = path.split('/');
const rootdir = temp[1]
通过结构的方式就可以大大简化这样一个过程,使之变得更加简单。
const [, rootdir] = path.split('/');