大家都知道 es6 提供了很多方便的语法, 这其中, 解构赋值也是运用得较为广泛的一种. 首先, 让我们来了解一下解构赋值的定义. 认识解构赋值 定义: 解构赋值语法是一个 Javascript 表达式, 这使得可以将值从数组或属性从对象提取到不同的变量中. 首先, es6 是允许按照一定模式从数组和对象中提取值并对等式左边的变量进行赋值. 例如:
- let [a,b,c] = [1,2,3]
- console.log(a,b,c)
可以看出, 上面的代码通过对等式右边的数组进行取值, 再按顺序赋值给等式左边对应的变量, 完成了解构赋值这一步. 模式匹配 初学者可能会对上面这个等式产生疑惑. 可能会问左边的数组跟右边的数组是怎么匹配的呢? 这里强调的是, 上面的写法是属于 "模式匹配", 等式左边不是数组 / 对象, 而是变量的集合, 只要等号两边的模式相同, 左边的变量就会被赋予对应的值. 例如:
- let [a,[[b],c]] = [1,[[2],3]];
- console.log(a,b,c)
如果解析失败, 变量的值会等于 undefined.
- let [a] = []
- let [a, b] = [1]
- console.log(a,b)
上面的代码中因为等式右边并没有跟左边变量 b 匹配的值, 所以 b 并没有被赋予任何值, 所以值为 undefined. 反过来, 等式左边只匹配了部分等式左边的数组, 这种情况下是解构成功的, 这种情况也称为不完全解构. 例如:
- let [a,b] = [1,2,3]
- console.log(a,b)
上面的例子都是数组, 那么对象能不能解构赋值呢? 答案是可以的, 不过跟数组会有点小小的区别.
- let {a,b} = {a: '1', b: '2'}
- let {c} = {a: '1', b: '2'}
- console.log(a,b,c)
可以看出 变量是跟对象的属性同名的, 如果不同名的话, 是取不到值的. 但是我们有时候也会遇到变量名跟对象的属性不同名的情况. 难道就取不到值了吗? 当然也是可以的, 不过需要改变下写法.
- let {a:x,b:y} = {a:'1',b:'2'}
- console.log(x,y)
可能大家会有点不解, 为什么值会赋给 x 而不是赋给 a, 这里是因为 a 是同名属性, 是被匹配的模式, 而 x 才是变量, 所以被赋值的是变量 x. 那 let{a,b}={a: '1', b: '2'} 这段代码又如何理解呢? 其实在 es6 中, 是可以在对象之中直接写变量的, 这样属性名就是变量名, 属性值就是变量值. 所以 let{a,b}={a: '1', b: '2'} 的本质是这样的.
- let{a,b}={a: '1', b: '2'}
- // 等价于
- let{a:a,b:b}={a: '1', b: '2'}
这样, 我们就清楚对象的解构赋值应该如何去做了.
来源: http://www.qdfuns.com/article/36274/ee62b5c53e84b217b0596cb937f57046.html