ES6解构之数组解构、对象解构、参数解构

解构

什么是解构

从一个大的对象或数组中提取出个别属性或方法单独使用，解构分为数组解构、对象解构、参数解构。

什么时候需要要用到解构

只想使用一个大的对象或数组中的个别成员时，就应该考虑用解构，因为解构会比较简化。

一、数组解构

从一个大的数组中提取个别元素值单独使用

用法

var [变量1,变量2,...] = 数组

例子

<script>
      var arr = [2020, 4, 30]; //定义数组
      var [y, m, d] = arr; //数组解构
      console.log(`今天是${y}年${m}月${d}日`);
      //打印出来结果是“今天是2020年4月30日”
</script>

二、对象解构

从一个大的对象中，提取出个别成员，单独使用

用法：

var { 属性名:变量1, 属性名: 变量2, ...:... , ... }=对象

注意

1.如果等号左边写的属性名，等号右边的对象中没有，则不会报错，而是返回undefined而已。

2.简写：如果对象中原来的属性名或方法名已经很好了，不需要改名，则解构时，等号左边的{}中每个属性只写一个名字就够了。

var {成员名1, 成员名2, ...}=对象    //简写

例子

<script>
    var user={
      uname:"dingding",
      email:"[e-mail]",
      phone:"18301092802",
      //login:function(){//ES6中可以简写
      logout(){
        console.log(`注销...`)
      }
    }
    var {uname,logout}=user;//ES6简写 对象解构
    console.log(`欢迎:${uname}`);
    logout();//注销
  </script>

输出结果

三、参数解构

其实就是对象解构在函数传参时的应用

什么时候使用参数解构

如果多个形参变量不确定将来有没有值，而且又要求传入的实参值，必须传给指定的形参变量，不能错位。

先来看个例子

<script>
//这里使用的是参数解构，传了一个对象参数过来，在参数列表进行了解构
function order({zhushi="香辣鸡腿堡",xiaochi="薯条",yinliao="可乐"}){
      console.log(`您点的套餐是:
        主食:${zhushi},
        小吃:${xiaochi},
        饮料:${yinliao}
      `)
    }
order({});//只想要套餐默认的搭配，即使什么都不该，也必须传一个空对象
order({
      zhushi:"鳕鱼堡",
      xiaochi:"菠萝派",
      yinliao:"雪碧"
 });//想把套餐中的默认搭配都换掉
 order({
      zhushi:"奥尔良烤腿堡"
 });//只想换第一个主食
 </script>

输出结果

上面的例子可以看出如果传进去是一个空的对象，但是不会报错，为什么呢？还记得在对象解构有一句话叫“如果等号左边写的属性名，等号右边的对象中没有，则不会报错，而是返回undefined而已。”那就说等过去了，对象没有参数解构要的属性名不仅不会报错，就在解构里面赋值了，所以第一个console.log会打印出默认的值

东哥笔记