关于解构你不知道的事

127 阅读2分钟

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

点赞+关注,永远不迷路