ES6总结２-解构赋值

ES6学习总结是自己在学习过程中的总结，记笔记就是为了督促自己学习和复习，好记性不如烂笔头。如果有错误，感谢指出。

解构赋值

简单地理解：左边一种结构，右边一种结构，一一对应，进行赋值

解构赋值的分类

1. 数组解构赋值**
2. 对象解构赋值**
3. 字符串解构赋值
4. 布尔值解构赋值
5. 函数参数解构赋值
6. 数值解构赋值

12两边一样为数组或对象，重要

3左边数组，右边字符串

46属于2的一种

5是1的一种应用

数组解构赋值

基本使用方法

{
  let  a,b,rest;
  [a,b]=[1,2];//数组解构赋值
  console.log(a,b)//1 2
}

{
  let  a,b,rest;
  [a,b,...rest]=[1,2,3,4,5,6]//数组解构赋值
  console.log(a,b,rest)//1 2 [3,4,5,6]
}

{
  let a,b,c,rest;
  [a,b,c=3]=[1,2]
  console.log(a,b,c)//1 2 3
}

默认值

//默认值
{
  let a,b,c,rest;
  [a,b,c]=[1,2]
  console.log(a,b,c)//1 2 undefind
}

使用场景1:变量交换

{
  let a=1;
  let b=2;
  [a,b]=[b,a]//变量交换 
}

使用场景2:对函数返回值直接提取

没有解构赋值 需要先取出结果 然后通过索引来进行取出

{
  function f(){
    return [1,2]
  }
  let a,b;
  [a,b]=f();
  console.log(a,b);
}

使用场景3:取出返回结果的某些需要的值

{
  function f(){
    return [1,2,3,4,5]
  }
  let a,b,c;
  [a,,,b]=f();
  console.log(a,b); // 输出1 4
}

使用场景4:未知数组长度赋值

{
  function f(){
    return [1,2,3,4,5]
  }
  let a,b,c;
  [a,...b]=f();
  console.log(a,b);//输出1,[2,3,4,5]
}

对象解构赋值

基本使用方法

{
  let o={p:42,q:true};
  let {p,q}=o;
  console.log(p,q);//42 true
}

默认值

{
  let {a=10,b=5}={a:3};
  console.log(a,b);//输出3 5
}

使用场景:json对象的解构赋值

{
  let metaData={
    title:'abc',
    test:[{
      title:'test',
      desc:'description'
    }]
  }
  let {title:esTitle,test:[{title:cnTitle}]}=metaData;
  console.log(esTitle,cnTitle);//abc test 
}