解构赋值

解构赋值是一种快速为变量赋值的简洁语法，本质上仍然是为变量赋值。

数组解构

语法

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法。

基本语法：

1. 赋值运算符 = 左侧的 [] 用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量

2. 变量的顺序对应数组单元值的位置依次进行赋值操作

    const arr = ['西施','王昭君','貂蝉', '杨贵妃']

    const [a, b, c, d] = arr

    console.log(a,b,c,d)//西施 王昭君 貂蝉 杨贵妃

基本语法：典型应用交互2个变量

    let a = 1
    let b = 2

    ;[b, a] = [a, b]
    console.log(a, b)//2 1

注意： js 前面必须加分号情况

1. 立即执行函数/自执行函数

   let uname = '小明'
   ;(function() {})()
   

   或者

   let uname = '小明';
   (function() {})()
   

2. 数组解构

       let a = 1
       let b = 2
   
       // 如果前面有代码，需要添加分号;防粘连
       ;[b, a] = [a, b]
   

   或者

       let a = 1
       let b = 2;
   
       // 如果前面有代码，需要添加分号;防粘连
       [b, a] = [a, b]
   

变量与单元值不一数量致时

1. 变量多 单元值少的情况：

   变量的数量大于单元值数量时，多余的变量将被赋值为 undefined

   const [a, b, c, d, e, f ] = ['西施','王昭君','貂蝉', '杨贵妃']
   console.log(a, b, c, d, e, f)//西施  王昭君   貂蝉   杨贵妃  undefined  undefined
   

2. 变量少 单元值多的情况：

       const [a, b, c, ] = ['西施','王昭君','貂蝉', '杨贵妃']
       console.log(a, b, c)//西施  王昭君   貂蝉
   

3. 利用剩余参数解决变量少 单元值多的情况：

   剩余参数返回的还是一个数组

       const [a, b, ...c] = ['西施','王昭君','貂蝉', '杨贵妃']
       console.log(a, b, c)//西施  王昭君  [ '貂蝉', '杨贵妃']
   

4. 防止有undefined传递单元值的情况，可以设置默认值：

   允许初始化变量的默认值，且只有单元值为 undefined 时默认值才会生效

       const [a, b, c, d, e = '1', f = '2'] = ['西施','王昭君','貂蝉', '杨贵妃']
       console.log(a, b, c, d, e, f)//西施  王昭君   貂蝉   杨贵妃  1  2
   

5. 按需导入，忽略某些返回值：

       const [,,,a,,b] = ['西施','王昭君','貂蝉', '杨贵妃', '1', '3', '6']
       console.log(a,b)// 杨贵妃  6
   

6. 支持多维数组的结构：

       const [, a, , , [, , b]] = ['西施','王昭君','貂蝉', '杨贵妃', ['1', '3', '6']]
       console.log(a, b)//王昭君  6
   

对象解构

对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法

基本语法

1. 赋值运算符 = 左侧的 {} 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量
2. 对象属性的值将被赋值给与属性名相同的变量
3. 注意解构的变量名不要和外面的变量名冲突否则报错
4. 对象中找不到与变量名一致的属性时变量值为 undefined

    // 如果对象中不存在这个属性，默认为undefined
    // 剩余值：包含剩余属性的对象
    // 冒号修改变量名
    const {name, gender, year,...arr} = {
      name : '张三丰',
      gender : 'man',
      age : 18,
      address : '武当山',
    }

    console.log(name, gender, year,arr)//张三丰 man undefined  {age: 18,address: "武当山"}

给新的变量名赋值

可以从一个对象中提取变量并同时修改新的变量名

    const {name , dog : {name : dogName, age}, cat : {name : catName}} = {
      name : '张三丰',
      gender : 'man',
      age : 18,
      address : '武当山',
      dog : {
        name : '小黑',
        age : 1,
      },
      cat : {
        name : '小白',
        age : 2,
      }
    }

    console.log(name, dogName,catName)

数组对象解构

    const arr =[{
      name : '张三丰',
      gender : 'man',
      age : 18,
      address : '武当山',
    }]
    const [{name, gender}] = arr
    console.log(name,gender)

多级对象解构

    const pig = {
      name: '佩奇',
      family: {
      mother: '猪妈妈',
      father: '猪爸爸',
      sister: '乔治'
      },
      age: 6
      }

      const {name,family : {mother, father, sister}} = pig

      console.log(name, mother, father, sister)