35.JavaScript对象和数组的解构赋值

对象（Object）和数组（Array）是JavaScript中最常用的两种数据结构   
    
    
  ，二者的共同特点是都可以存储大量的数据   
    
    
  。

问题是


     


     


     
，当我们再参数传递和计算过程中 




 




 




，可能只需要对象和数组中的一部分内容   

   

   

 ，而不是整个对象/数组


     


     


     
。

此时

     

     

     ，就需要使用解构赋值将对象/数组拆包
  




  




  




，获取其内部的一部分数据  


  


  


，下面会使用案例介绍解构赋值在编程中的应用 




 




 




。

数组解构

所谓数组解构 
     
     
     ，就是获取数组中一部分对我们有用的数据

   




   




   



，举个栗子：

let arr = [first,second] let [x, y] = arr //解构操作 console.log(x,y)

代码执行结果如下：

代码的内容非常简单 



 



 



，把数组中的内容赋值给了俩个变量                ，然后输出   

   

   

 。

数组解构还可以和split函数配合使用


    




    




    


，优雅又高端：

let [x, y] = hello world.split() console.log(x, y)

代码执行结果如下：

解构不改变原数组

解构也可以叫做“解构赋值    
    
    
”














，其本质就是把数组的元素复制给变量                ，所以原数组没有发生任何的变化

     

     

     。

let [x, y] = arr //{1} let x = arr[0] //{2} let y = arr[1]

以上代码中的{1}和{2}是完全等价的


     



     



     

，只是解构赋值的方式更加简洁而已
  




  




  




。

忽略数组元素

如果我们在使用解构赋值的时候














，希望得到数组的第1   
    
    
  、3个元素   
    
    
  ，但是不要第2个元素


     


     


     
，应该怎么做呢？

举个栗子：

let [x, ,z] = [first,second,third] console.log(x,z)

代码执行结果如下：

这样就使用逗号 




 




 




，规避掉了第二个元素  


  


  


。

可迭代对象使用解构

解构赋值不一定用在数组上   

   

   

 ，在任何可迭代对象上都是可以使用的

     

     

     ，举个例子：

let [x, y, z] = xyz let [a, b, c] = new Set([a,b,c]) console.log(x,y,z) console.log(a,b,c)

代码执行结果：

解构赋值会对右侧的值进行迭代
  




  




  




，然后对左侧的变量进行赋值 
     
     
     。

赋值给任何变量

在解构赋值的=右侧可以是任何和迭代的对象  


  


  


，而左侧则可以是任何可以赋值的变量 
     
     
     ，并不局限于简单的变量

   




   




   



。

举个栗子：

let country = {}; [country.name, country.desc] = China Beautiful.split() console.log(country.name,country.desc)

代码执行结果：

注意：代码第一行的分号必须要加

   




   




   



，否则将遇到错误！详情可以了解《JavaScript语法构成》 



 



 



。

与.entries()方法结合

Object.entries(obj)方法会返回对象obj的属性列表 



 



 



，我们同样可以将解构语法用在这里：

let country = { name:China, desc:a beautiful country } for(let[k, v] of Object.entries(country)){ console.log(k,v) }

代码执行结果：

与Map结合

由于Map对象本身就是可迭代的                ，所以可以直接使用for...of语法结合解构语法：

let map = new Map() map.set(name,China) map.set(desc,Beautiful Country) for(let [k, v] of map){ console.log(k,v) }

代码执行结果：

变量交换

解构赋值有一个著名技巧


    




    




    


，交换两个变量的值：

let a = 1; let b = 2; [a,b]=[b,a] console.log(`a=${a},b=${b}`)

代码执行结果：

多余的元素

在执行解构赋值的过程中














，存在两种情况：

左侧元素多于右侧元素                ，左侧值使用undefined填充； 右侧元素多余左侧元素


     



     



     

，忽略多余项














，也可以使用...收集；

左侧多于右侧：

let [a,b,c] = ab console.log(a,b,c)

代码执行结果：

可见最后一个变量c被赋值undefined                。

我们也可以为多余的左侧变量赋予默认值   
    
    
  ，举个例子：

let[a=0,b=0,c=0] = ab console.log(c)

代码执行结果如下：

右侧多于左侧：

let [a, b] = abcd console.log(a,b)

代码执行结果如下：

这里就没什么可解释的了


    




    




    


。

但是


     


     


     
，如果我们希望获得其他元素应该怎么做呢？

举例如下：

let [a, b, ...others] = abcdefg console.log(others)

代码执行结果：

这里的变量others就将所有剩余选项全部都收集了起来 




 




 




，others可以是任何合法的变量名   

   

   

 ，不局限于others本身














。

对象解构

解构语法同样使用于对象

     

     

     ，只不过语法上稍有不同：

let {var1, var2} = {...}

举个例子：

let country = { name:China, desc:Beautiful }; let {name,desc} = country; console.log(name,desc)

代码执行结果：

**注意：**这里的变量顺序是没有影响的
  




  




  




，我们也可以交换name和desc的位置  


  


  


，如：

let {desc,name}=country;

代码的执行结果并没有什么变化                。

属性变量映射

当然我们也可以指定变量和属性的映射 
     
     
     ，例如：

let country = { name:China, desc:Beautiful } //对应的规则：{对象属性:目标变量} let {name:desc,desc:name} = country; console.log(`name:${name},desc:${desc}`)

代码执行结果：

这样我们就强行交换了变量和属性之间的映射方式

   




   




   



，或许下面的例子更直观：

let obj = { x:xiaoming, y:18 } let {x:name,y:age}=obj; console.log(`name:${name},age:${age}`)

代码执行结果：

默认值

和数组一样 



 



 



，我们也可以使用=为变量指定默认值


     



     



     

。

举例如下：

let obj = { name:xiaoming, age:18 } let {name=xiaohong,age=19,height=180} = obj console.log(height)

代码执行结果：

这样                ，即使对象没有对应的属性


    




    




    


，我们同样可以使用默认值代替














。

我们还可以结合映射和默认值：

let obj = { x:xiaoming, y:18 } let {x:name=xxx,y:age=18,height:height=180}=obj; console.log(`name:${name},age:${age},height:${height}`)

代码执行结果：

多余的属性

和数组一样














，我们可以取对象的一部分属性：

let obj = { x:x, y:y, z:z } let {x:name}=obj console.log(name)

我们还可以使用...将剩余的属性重新打包为一个新对象：

let obj = { x:x, y:y, z:z } let {x,...others}=obj console.log(others)

代码执行结果：

let陷阱

可能有写童鞋已经发现了                ，我们在使用解构操作时


     



     



     

，总是把一个对象赋值给一个使用let新定义的变量














，例如：let {...} = obj   
    
    
  。

如果我们使用已经存在的对象   
    
    
  ，会发生什么事呢？

let a,b,c;//定义三个变量 {a,b,c} = {a:a,b:b,c:c} console.log(a,b,c)

代码执行结果如下：

为什么会出现这种错误呢？

这是因为JavaScript会把主代码流中的{...}作为一个代码块


     


     


     
，代码块是一个独立的代码空间 




 




 




，用于语句的分组


     


     


     
。

案例如下：

{ let a = 1; let b = 2; ... }

上例中的{a,b,c}就被错误的当成了这样的代码块   

   

   

 ，为了告诉引擎这不是一个代码块

     

     

     ，我们可以这样：

let a,b,c;//定义三个变量 ({a,b,c} = {a:a,b:b,c:c})//加括号 console.log(a,b,c)

代码执行结果如下：

多层解析

如果对象出现了嵌套
  




  




  




，相应的我们也可以使用对应的嵌套层次进行解析：

let People = { head:{ leftEye:le, rightEye:re }, hands:[left-hand,right-hand], others:others } let { head:{ leftEye, rightEye }, hands:[left_hand,right_hand], others } = People; console.log(leftEye,right_hand)

代码执行结果：

函数参数解析

有些情况下  


  


  


，一个函数需要非常多的参数 
     
     
     ，这不仅会让程序猿记忆困难

   




   




   



，同时也会让代码变的冗长 




 




 




。

例如：

function createWin(title="Untitled",width=100,height=200,items=[]){ ... }

这种情况下 



 



 



，调用函数会变的非常困难   

   

   

 。更令人苦恼的是                ，通常这些参数只要保持默认就可以了


    




    




    


，而我们还要费尽心机的重写它们

     

     

     。就像这样：

createWin(title="Untitled",width=100,height=200,items=[i,j,k])

解构赋值可以帮助我们解决这些问题














，我们可以把对象传递给函数                ，而函数会自动的把对象解析为参数：

let options = { title:NewWin, width:200, height:100, items:[items1,items2] } //传入的对象会被解构成下面的参数样式 //等价于{title="Untitled",width=100,height=200,items=[]} = options function createWin({title="Untitled",width=100,height=200,items=[]}){ console.log(`title:${title},width:${width},height:${height},items:[${items}]`) } createWin(options)//只需要传递一个对象

总结

解构赋值可以把一个对象/数组拆开赋值给多个变量 数组的解析方式； 对象的解析方式 函数参数的解析方式；