1.解构赋值
1.1数组解构
比较简单,只要模式匹配,左边的变量就会被赋值为右边的值
let [a,b,c] = [1,2,3] // a=1 b=2 c=3
let [a,[b,c],d] = [1,[2,3],4] //a=1 b=2 c=3 d=4
let [a,[b],d] = [1,[2,3],4] //a=1 b=2 c=4
let [,,c] = [1,2,3] // c=3
需要注意的
①等号右边如果不是可遍历结构就会报错
②使不使用默认值要看右边的值是不是严格等于undefined
let [a] = 1 //报错
let [a=1] = [undefined] //a=1
let [a=1] = [null] //a=null 因为null不严格等于undefined
1.2对象解构
let {a:b} = {a:10}
// :左边的a是匹配模式,是用来搜索等号右边的属性,找到之后会把值赋值给:右边
let {a} = {a:10} //这种写法实际上是 let {a:a} = {a:10} 所以 a=10
常见的一种错误
let {x:b} = {a:10} //b为undefined
但是!!
let {x:{b}} = {a:10} //报错
为什么?
实际上可以这样想 这相当于两层解构
第一次解构:先找x没找到结果为 {b} = undefined
第二次解构:{b:b} = undefined // 从undefined找b属性报错
就相当于
第一次解构:
let obj = {
a:10
}
console.log(obj.x); //undefined
第二次解构:
let obj = undefined
console.log(obj.b) //报错
1.3字符串解构
这里是这篇文章的重头戏
let [a,b,c] = 'str' //a=s b=t c=r 这个大家都知道
let {length} = 'str' // length=3 这个可能有的人就没了解过
为什么呢?
其实你可以这样理解 字符串在进行解构赋值的时候是会转化为一个类数组的对象,这里分两种情况来看
①当解构左边是[]时 你就可以把这个字符串看成数组 遵循数组解构的规则
②当解构左边时{}时,你就可以把这个字符串看成类数组对象,类数组对象有一个length属性记录属性个数 你就可以把上面转化为
{
0:s,
1:t,
2:r,
length:3
}
这样在进行对象就够你就会了
其实数值也是可以转化为类数组对象去解构的,跟字符串一个道理
let {length} = [1,2,3] // length = 3
1.4数值和布尔值解构
这个就记住解构时,会把等号右边的数值或者布尔值转化为对应的包装对象,然后遵循对象解构就可以
let {toString:a} = 1
console.log(a === Number.prototype.toString) //true
点赞+关注,永远不迷路