什么是解构赋值

左右一一对应进行赋值。

解构赋值的分类

• 数组解构赋值，左右都是数组
• 对象解构赋值，左右都是对象
• 字符串解构赋值，左边是数组，右边是字符串
• 布尔值解构赋值，对象解构赋值的一种
• 函数参数解构赋值，数组解构赋值在函数参数的应用
• 数值解构赋值，对象解构赋值的一种

数组解构赋值

基本使用方法

{ 
  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]; // 如果没成功配对，默认值 undefined
  console.log(a,b,c); // 1 2 3
}

使用场景

变量交换

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

接收函数返回的数组

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

选择性接收函数返回的数组

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

选择性接收函数返回的未知长度的数组

{ 
  function f(){
    return [1,2,3,4,5]
  }
  let a,b,c;
  [a,,...b]=f();
  console.log(a,b); // 1 [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
}