ES6-5.对象和数组解构

1、对象解构
例如以下代码：直接将对象node解析成type和name变量。

       <script>
            const node ={
                type:"monkey",
                name:"swk"
            };

            const {type, name} = node;

            console.log(type);    //monkey
            console.log(name);    //swk
        </script>

2、解析赋值
例如以下代码：本身已经声明了type和name两个变量并初始化，然后将node对象直接赋值给这两个变量，type和name的值就改变了

     <script>
        let node = {
            type:'monkey',
            name:'swk'
        },
            type = 'pig',
            name = 'zbj';
            
         //一定使用小括号包裹，因为1.Js引擎将开放小括号视为一个代码块，2.而代码块语句不允许在赋值语句左侧。加上一个小括号可以将块语句转换为表达式,在数组的解构赋值则不需要！
        ({type,name} = node);

        console.log(type);      //monkey
        console.log(name);      //swk
     </script>

3、默认值
在解构的过程中，如果局部变量名称不存在，那么这个变量就会被赋值成undefined，代码如下：value这个值在node对象中不存在，所以输出是undefinded。

        <script>
            const node ={
                type:"monkey",
                name:"swk"
            };

            const {type,name,value} = node;

            console.log(type);    //monkey
            console.log(name);    //swk
            console.log(value);   //undefined

        </script>

然而我们可以给他一个默认值，代码如下：value给了一个默认值true，node对象没有value这个属性，所以value就使用了默认值true。

        <script>
            const {type,name,value=true} = node;
            console.log(value);   //true
        </script>

4、为非同名局部变量赋值
上面的示例都是解构成了对象中相应的属性名相同的变量名，如果要使用不同的变量名，如下面代码：node对象就解构成了localType和localName两个变量。

     <script>
        const node = {
            type:"monkey",
            name:"swk"
        };

        const {type: localType, name: localName} = node;

        console.log(localType);    //monkey
        console.log(localName);    //swk
     </script>

5、嵌套对象解构
解析复杂的对象，直接看下面的代码：下面的代码直接找的就是node.loc.start的值，要找到某个对象中的一个节点，就要用 “{属性名}” 去查找。

      <script>
        const node = {
            type:"monkey",
            name:"swk",
            loc:{
                start:{
                    line:1,
                    column:1
                },
                end:{
                    line:1,
                    column:4
                }
            }
        };

        const {loc:{start: localStart}} = node;
        
        console.log(localStart.line);
        console.log(localStart.column);
      </script>

二、数组解构
1、数组解构
看以下代码：这样就可以不用下标去取值，然后赋值给变量

     <script>
        const colors = ['red','green','blue'];

        const [firstColor,secondColor] = colors;
        
        console.log(firstColor);     //red
        console.log(secondColor);    //green
        
        //如果想要取第三个值，可以这样取
        const [,,thirdColor] = colors;
        console.log(thirdColor);    //blue
     </script>

2、解构赋值
这个操作和对象解构差不多，只是不需要小括号，看以下代码：变量firstColor和secondColor就变成数组中的第一个值和第二个值

     <script>
        let colors = ['red','green','blue'],
              firstColor = 'black',
              secondColor = 'purple';
               
              [firstColor,secondColor] = colors;

              console.log(firstColor);
              console.log(secondColor);
     </script>

3、交换两个变量的值
在排序算法中，我们经常会将数组中的两个数进行交换，以前的做法是定义一个tmp，然后进行交换，而解构可以很方便的进行交换，看以下代码：

   <script>
    let a = 1,
        b = 2;
        
    [a , b] = [b , a];

     console.log(a);    //2
     console.log(b);    //1
    </script>

4、默认值
和对象解构一样，如果没有想应的值，那么变量则会被定义成undefined。看如下代码：

  <script>
    let colors = ['red'];

    let [firstColor,secondColor = 'green'] = colors;

    console.log(firstColor);     //red
    console.log(secondColor);    //green
  </script>

5、嵌套数组解构
和对象解构相似，插入一个数组模型，就可以解构下一层次，看以下代码：

  <script>
    const colors = ['red',['green','purple'],'blue'];

    let [firstColor,[secondColor]] = colors;

    console.log(firstColor);
    console.log(secondColor);
  </script>

6、不定元素
可以通过"…"将多个元素赋值给一个变量，看以下代码：

  <script>
    const colors = ['red','green','blue'];

    const [firstColor,...restColors] = colors;

    console.log(firstColor);            //red
    console.log(restColors.length);     //2
    console.log(restColors[0]);         //green
    console.log(restColors[1]);         //blue
  </script>

使用这个不定元素的方法，我们就可以用来复制一个数组，看以下代码：

  <script>
    const colors = ['red','green','blue'];

    const [...clonedColors] = colors;

    console.log(clonedColors);   //['red','green','blue']
  </script>

三、混合解构
看以下代码：就是将对象解析和数组解析合并使用

  <script>
    let node = {
        type:'monkey',
        name:'swk',
        loc:{
            start:{
                line:1,
                column:2
            },
            end:{
                line:1,
                column:4
            }
        },
        range:[0,3]
    };

    let {
        loc:{start},
        range:[startIndex]
    } = node;

    console.log(start.line);     //1
    console.log(start.column);   //2
    console.log(startIndex);     //0
  </script>

四、解构参数
当定义一个方法的时候，需要传入一个对象作为一个参数，例如以下的方法：

 <script>
   function setCookie(name,value,options){
        options = options || {};
        let secure = options.secure,
            path = options.path,
            domain = options.domain,
            expires = options.expires;
    };

    setCookie('type','js',{
        secure:true,
        expires:60000
    });
 </script>

对于使用这个方法的人来说，他并不知道options到底要什么样的对象属性，必须要走到源代码看到了，才能知道，所以这个时候就用解构参数来替换这个options，代码如下：

<script>
    function setCookie(name,value, { secure, path, domain, expires}){

    };

    setCookie('type','js',{
        secure:true,
        expires:60000
    })
</script>

这样对于使用这个方法的人来说，他就知道第三个参数是要传一个对象，这个对象具体有哪些属性也就一目了然
解构参数的默认值
对于解构参数，如果要有默认值，可以使用以下代码：

  <script>
    const setCookieDefaults = {
        secure:false,
        path:'/',
        domain:'example.com',
        expires:new Date(Date.now() + 360000000)
    };

    function setCookie(name, value, {
        secure = setCookieDefaults.secure,
        path = setCookieDefaults.path,
        domain = setCookieDefaults.domain,
        expires = setCookieDefaults.expires
     } = setCookieDefaults) {

     }
  </script>

这样第三个参数对象，即使使用者不传入相应的对象值，那么方法也可以使用默认的值