ECMAscript新特性 - 对象的解构 Destructuring

70 阅读2分钟

在ECMAscript 2015 当中除了数组可以被解构,对象也可以被解构不同的是对象的结构是通过属性名被提取而不是位置。因为数组中的元素有下标,也就是说它是有顺序规则的而对象里面的成员没有固定的次序,所以说它不能按照位置去提取。例如,下面已经定义好了一个对象 obj 解构它里面的成员就是在以前的变量名位置去使用一个对象字面量的花括号,然后在这个花括号里同样也是提取出来的数据所存放的变量名。不过这里的变量名还有一个很重要的作用,就是去匹配被解构对象中的成员,从而去提取指定成员的值。

// 对象的结构
const obj = {name: 'zce', age: 18};
const {name} = obj;

解构对象的其他特点基本上和解构数组是一样的,例如没有匹配到的成员也会返回 undefined 、也可以设置默认值。在对象当中还有一个特殊的情况,就是因为解构的变量名它同时又是用来匹配我们被解构对象当中的属性名的。所以说当我们当前作用域当中有同名的成员,就会产生冲突。

const name = "tom";
const { name } = obj;
// SyntaxError: Identifier 'name' has already been declared

但如果要提取出来相应属性的属性值就必须要使用这个属性名,这样的话这样的冲突就不可避免。这个时候就可以使用重命名的方式去解决这样的问题,具体的语法就是在结构位置的成员名后面加上(:)然后跟上一个新的名称,此时就会有两个名称,冒号左边的实际上就是用来匹配对象当中的属性名从而提出对应的属性值;右边就是最终提取到的值所放入的变量的名称,这样的话就可以任意取一个变量名称,从而避免冲突的出现。而此时如果还需要为这个变量添加默认值,就可以在变量后面在继续添加一个等号然后去设置对应的默认值。

const name = 'tom'
const { name: objName = 'jack' } = obj 

结构对象的应用场景就更多了,并且大部分场景都是为了简化代码。