各位小伙伴们大家好，最近在复习前端ES6的相关知识点，主要跟的视频是b站大学的黑马的相关视频，在本篇文章中记录一下相关的知识点，大家可以参考一下，有问题也欢迎大家指出，附上b站链接 黑马ES6 ┗|｀O′|┛

ES6解构赋值

---

• 🎡数组解构
• • 🎢数组和变量一一对应
  • 🎢数组和变量不对应
• 🎡对象解构

  ES6中新增的解构赋值，具体就是对数据结构进行分解，然后将分解之后的数据对变量进行赋值，解构赋值会使我们比较方便的从数组和对象中获取数据，分为对数组进行解构赋值以及对对象进行解构赋值。

🎡数组解构

  主要进行的操作就是把数组里面的值提取出来然后赋值给变量。

  如上述代码所示，等号左边的中括号实际上是对数组进行了解构等号右边的中括号里的内容是数组的值，左边中括号前的let表示，a,b,c都是拿let进行声明的。

🎢数组和变量一一对应

  数组解构允许我们按照一一对应的关系从数组中提取值然后赋值给变量。

<script>
  let [a,b,c] = [1,2,3];
  console.log(a);
  console.log(b);
  console.log(c);
</script>

  可以看到，在上面的代码中我们将数组进行了解构并将其一一对应赋值给了三个变量，我们看一下控制台，可以发现a,b,c对应的值就是数组中对应的值。

🎢数组和变量不对应

  当变量的数量和数组中的值数量不一致的时候，对于解构失败的变量，会赋一个undefined。

<script>
  let [a,b,c,d,e] = [1,2,3];
  console.log(a);
  console.log(b);
  console.log(c);
  console.log(d);
  console.log(e);
</script>

  可以看到，a,b,c这三个变量是有一一对应的值的，但d,e，这两个变量就没有对应的值，这个时候我们看一下控制台。

  可以发现，没有对应的d,e，这两个变量赋了一个undefined。

🎡对象解构

  对象解构也是按照一定的模式，从对象中提取值，然后赋值给变量。对象解构允许我们使用变量的名字匹配变量的属性，匹配成功之后将对象属性的值就可以赋值给变量。

<script>
  let hero = {name:'盖伦',skill:'大宝剑'}
  let {name , skill} = hero
  console.log(name);
  console.log(skill);
</script>

  在代码中，我们定义了一个hero对象，有name 和skill 两个属性，第二行代码，等号左边的大括号代表对象解构，右边的hero便是hero这个对象。大括号内的name变量匹配hero中的name属性，skill变量匹配的是hero中的skill属性。

  查看控制台，看见name和skill这两个变量，匹配hero中的属性成功且成功取到了值。当然还有一种变量名字和对象中的属性名字不一样的写法。

<script>
      let hero = {name:'盖伦',skill:'大宝剑'}
      let {name:myName , skill:mySkill} = hero
      console.log(myName);
      console.log(mySkill);
</script>

  可以看到解构的时候，大括号内的写法和对象写法一样，大括号内冒号左边的属性用于匹配对象中的属性，大括号右边的为变量。

  查看控制台

  myName变量和mySkill变量，分别取到了hero对象中对应的name属性值和skill属性值。