持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第5天,点击查看活动详情
前言
在es6之前,我们获取对象属性值的方法是比较麻烦的,类似于
let obj={name:"Alan",age:26}
let name=obj.name
let age=obj.age
不止是对象,数组和字符串我们也只能通过循环遍历通过变量名+下标的方式获取。那么有没有一种办法,可以从数组和对象中获取值呢?答案是有,在es6通过解构赋值的方式可以实现,那么我们接下来便来讲讲解构赋值。
数组的解构赋值
数组的解构赋值属于模式匹配。什么叫做模式匹配呢?就跟小时候班级里排座位一样,学生们要根据座位表一个一个匹配坐上去。但座位表不是固定的,所以座位是可以调换的,学生数量也不一定要等于座位数量。下面让我们通过几个例子来说明
let [a,b,c]=[1,2,3]
console.log(a,b,c) //1 2 3
let [d,[e],f]=[1,[2],3]
console.log(d,e,f) //1 2 3
let [g, ,h]=[1,2,3]
console.log(g,h) //1 3
let [i,...k]=[1,2,3]
console.log(i,k) //1 [2,3]
而且左右数量是可以不一致的。
- 当左边数量大于右边时,说明多出来的变量是没有解构成功的,值就等于
undefined。 - 当右边数量大于左边,称为
不完全解构,即左边变量只能取得部分右边的值(按照模式匹配)
但是,注意右边的值不是可遍历的iterator接口结构(array、set、map等),将会报错。例如number、boolean类型
对象的解构赋值
如果说数组的解构赋值时按照次序依次取值的话,对象却不用如此。因为对象的属性没有次序,变量必须与属性同名,才能取到正确值。下面我们来看几个例子
let {a,b,c}={a:1,c:3,b:2}
console.log(a,b,c) //1 2 3
let {d,e,f}={d:4,e:5}
console.log(d,e,f) //4 5 undefined
我们可以看到对象是通过变量名与属性名的对应来解构的。要是变量名找不到对应的属性名,说明解构失败就返回undefined。而且因为对象里基本可以存在任何类型,所以通过变量也可以取得对象的方法、里对象、数组等数据解构。
默认值
数组
解构赋值允许对变量指定默认值,规则就是当无法匹配到右边的值时才会取默认值
无法取到值有两种情况是为空或设为undefined,但null不是,因为null的定义是赋值了但为null一般用来表示对象不存在地址值时,而undefined表示未赋值
let [z= 1] = []; //z = 1
let [a, b = 1] = [2]; // a=2, b=1
let [c, d = 'b'] = ['a', undefined]; // c='a', y='b'
对象
对象与数组大致相似,也同样遵循未取到值默认值才会生效
let {a = 1} = {}; //a = 1
let {b, c = 5} = {b: 1};//b=1 c=5
总结
除了以上这些,书中还讲到了例如千万不要已声明的值作为解构赋值左边的变量名、左边甚至可以没有变量等等,感兴趣的朋友建议看看书,学到的会更多。总之,学无止境,持续地学习!