js解构赋值详解

解构赋值的主要作用就是为了方便取值，尤其是在对象有多层级或者某个深层的值需要多次使用的时候

   // 定义一个对象
      const obj = {
        user:{
          info:{
            name:'狂徒张三'
          }
        }
      }
      // 正常解构赋值一级
      const {user} = obj
      // 先解构出一级，然后再点key值
      console.log(user.info.name,'常用');
      // 解构多级
       const {user:{info}} = obj
       console.log(info,'多级解构');
       // 一步到位
       const {user:{info:{name}}} = obj
       console.log(name,'一步到位');
      //  多级解构并修改key值，将name改成title，冒号后面为新的key值
       const {user:{info:{name:title}}} = obj
       console.log(title,'修改后的值');

依次打印结果

数组的解构赋值练习

  const arr  = ['路飞','索隆','娜美','乌索普','山治']
      //  各个变量依次对应数组的索引顺序
       const [captain,Swordsman,Nami] = arr
       console.log(captain,Swordsman,Nami,'数组解构');
      //  打印结果：'路飞','索隆','娜美',
      const [captain,Swordsman,,,Nami] = arr
      console.log(captain,Swordsman,Nami,'用逗号代表省略item，多少个逗号就省略多少个（有一个逗号是数组自带的隔开符号）');
      //  打印结果：'路飞','索隆','山治',
      // 给予默认值
      const [captain,Swordsman,Nami,sniper,archaeologist,boatman='弗兰奇'] = arr
       console.log(captain,Swordsman,Nami,sniper,archaeologist,boatman,'给予默认值');
       //  打印结果：路飞 索隆 娜美 乌索普 山治 弗兰奇