目录
概念: ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构
数组的解构赋值
其实就是模式匹配,将要赋值的变量放在[ ]里,等号右边的值也放在[ ]里,按照对应的顺序给它们赋值
以上是最正常基本的情况了,只有模式匹配。
以下是特殊的情况
...表示数组
可理解为,只要左边有一个[ ],那么就会对右边对应的位置迭代匹配,以下面为例子最外层有[ ],于是 a1->1, [b1]->[2,3], d1->4。而[b1]又有[ ], 于是b1->2。在另一个例子中[a2, [b2, [c2]], d2] = [1, [2, 3], 4]; a2->1, [b2,[c2]]->[2,3], d2->4.对于[b2,[c2]]->[2,3], b2->2, [c2]->3, 但是由于[c2]有一层[ ], 但是3不是可遍历的,因此报错。
事实上,只要某种数据结构具有 Iterator 接口,都可以采用数组形式的解构赋值。
默认值:匹配的值是undefined时,就会使用默认值,比如
当匹配到null时,如果有默认值,默认值不会生效,因为null不算undefined
默认值可以是其他变量,但是在赋值前声明,还可以是表达式,该表达式只有当默认值有效时才会被执行。
对象的结构赋值
左边用{}包裹起来,右边是一个对象(不一定要用{}包裹起来)左边去右边匹配key跟自己变量名相同的key值,与位置无关,左边变量名与右边key相同,则匹配成功。
如果找不到则为undefined
如果变量名和属性名不同应该怎么进行匹配呢?
对象的解构也可以指定默认值。
var {x = 3} = {};
x // 3
var {x, y = 5} = {x: 1};
x // 1
y // 5
var {x: y = 3} = {};
y // 3
var {x: y = 3} = {x: 5};
y // 5
var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"
默认值生效的条件是,对象的属性值严格等于undefined
。
var {x = 3} = {x: undefined};
x // 3
var {x = 3} = {x: null};
x // null
上面代码中,属性x
等于null
,因为null
与undefined
不严格相等,所以是个有效的赋值,导致默认值3
不会生效。
字符串的解构赋值
字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
类似数组的对象都有一个length
属性,因此还可以对这个属性解构赋值。
let {length : len} = 'hello';
len // 5
数值和布尔值的解构赋值
解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。
let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true
上面代码中,数值和布尔值的包装对象都有toString
属性,因此变量s
都能取到值。
解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。由于undefined
和null
无法转为对象,所以对它们进行解构赋值,都会报错。
let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError