什么是解構(gòu)賦值
左右一一對(duì)應(yīng)進(jìn)行賦值玛瘸。
解構(gòu)賦值的分類
- 數(shù)組解構(gòu)賦值，左右都是數(shù)組
- 對(duì)象解構(gòu)賦值髓帽，左右都是對(duì)象
- 字符串解構(gòu)賦值碟联，左邊是數(shù)組，右邊是字符串
- 布爾值解構(gòu)賦值坐慰，對(duì)象解構(gòu)賦值的一種
- 函數(shù)參數(shù)解構(gòu)賦值较性，數(shù)組解構(gòu)賦值在函數(shù)參數(shù)的應(yīng)用
- 數(shù)值解構(gòu)賦值，對(duì)象解構(gòu)賦值的一種
數(shù)組解構(gòu)賦值
基本使用方法
{
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]
}
默認(rèn)值
{
let a,b,c,rest;
[a,b,c=3]=[1,2]; // 如果沒成功配對(duì)结胀，默認(rèn)值 undefined
console.log(a,b,c); // 1 2 3
}
使用場(chǎng)景
變量交換
{
let a=1;
let b=2;
[a,b]=[b,a];
console.log(a,b); // 2 1
}
接收函數(shù)返回的數(shù)組
{
function f(){
return [1,2]
}
let a,b;
[a,b]=f();
console.log(a,b); // 1 2
}
選擇性接收函數(shù)返回的數(shù)組
{
function f(){
return [1,2,3,4,5]
}
let a,b,c;
[a,,,b]=f();
console.log(a,b); // 1 4
}
選擇性接收函數(shù)返回的未知長(zhǎng)度的數(shù)組
{
function f(){
return [1,2,3,4,5]
}
let a,b,c;
[a,,...b]=f();
console.log(a,b); // 1 [3,4,5]
}
對(duì)象解構(gòu)賦值
基本使用方法
{
let o={p:42,q:true};
let {p,q}=o;
console.log(p,q); // 42 true
}
默認(rèn)值
{
let {a=10,b=5}={a:3};
console.log(a,b); // 3 5
}
使用場(chǎng)景
解析函數(shù)返回的對(duì)象
前后端通信赞咙，解析JSON對(duì)象
{
let metaData={
title:'abc',
test:[{
title:'test',
desc:'description'
}]
}
let {title:esTitle,test:[{title:cnTitle}]}=metaData;
console.log(esTitle,cnTitle); // abc test
}
