“解构赋值”是ES6亮点之一,其简化了对数组和对象的部分属性赋值操作。
解构赋值分为两种:数组和对象。
ES中,如果取某个数组部分值进行赋值,必须写成如下方式:
有些啰嗦,不是吗?在ES6中,可以简写成:
从上面例子可以看出,如果做数组的解构赋值,需要将变量也声明为数组,并且,变量的取值由它的位置决定。第一个变量对应数组下标为0的值,第二个变量对应数组下标为1的值...以此类推。
并且,可以用rest参数...
取余值。
解构赋值运行指定默认值(用全等运算符? === undefined
判断一个位置是否有值)。例如:
默认值也可以是变量。
undefined
。和数组不同,对象的解构赋值与对象属性顺序无关,而是根据变量和属性名一一对应,从而取得正确的值。例子如下:
对象解构赋值的内部机制,是先找到同名属性,然后再赋值给相应的变量。也就是说,var {a, b} = {a: 1, b:2};
的完整写法应该是var {a:a, b:b} = {a: 1, b:2};
。
同样,对象的解构赋值也支持rest参数...
(此特性属于ES7范畴,但是babel已经支持此功能)。
对象的解构赋值也可以指定默认值,用法和数组解构类似(用undefined
全等判断空值)。
如果将一个已经声明的变量用于对象解构,那么,需要在解构赋值语句外面加()
。
不加()
之所以会报错,是因为JavaScript引擎会将{x}
解析为一个代码块,所以执行到=
时,无法找到赋值对象,从而报错。为了避免将大括号{}
解析为代码块,我们可以将赋值语句放在小括号()
中。
解构赋值常用应用场景是函数参数赋值。利用解构赋值,可以简化参数取值。
数组和对象解构都支持rest参数...
,要注意,rest参数是浅复制,并且,不能复制继承对象的原型属性。