关于解构赋值

数组解构

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法，如下代码所示：

<script>
  // 普通的数组
  let arr = [1, 2, 3]
  // 批量声明变量 a b c 
  // 同时将数组单元值 1 2 3 依次赋值给变量 a b c
  let [a, b, c] = arr
  console.log(a); // 1
  console.log(b); // 2
  console.log(c); // 3
</script>

数组变化位置--交换两个变量 

let a=1
let b=2;//必须加分号---数组开头的---必须加分号
[b,a]=[a,b]
console.log(b);//1
console.log(a);//2

变量多--单元值少---undefined

const arr = [111,222,333,444]
const [a,b,c,d,e,f]=arr
console.log(a);//111
console.log(b);//222
console.log(c);//333
console.log(d);//444
console.log(e);//undefined
console.log(f);//undefined

变量少--单元值多---得到一个真数组 

const arr = [111,222,333,444,555,666,777]
const [a,b,c,...d]=arr
console.log(a);//111
console.log(b);//222
console.log(c);//333
console.log(d);//[444,555,666,777]

为解构添加默认值----防止undefined传递

const arr = [111,222]
const [a,b,c=0,d=0]=arr
console.log(a);//111
console.log(b);//222
console.log(c);//0
console.log(d);//0

按需导入赋值，忽略某些值 

const arr = [111,222,333,444]
const [a,b,,d]=arr
console.log(a);//111
console.log(b);//222
console.log(d);//444

多维数组解构

const [a,b,c]=[111,222,[333,444]]
console.log(a);//111
console.log(b);//222
console.log(c);//[333,444]

const [a,b,[c,d]]=[111,222,[333,444]]
console.log(a);//111
console.log(b);//222
console.log(c);//333
console.log(d);//444

对象解构

//对象解构
const obj={
    name:"123",
    age:456
}

//变量名字和属性名字必须一样--否则undefined
const {name,age}=obj
console.log(name);//123
console.log(age);456
console.log(sex) // undefined

//给解构的变量重新改名  旧变量名：新变量名
const {name:username,age}=obj
console.log(username);//'123'
console.log(age);//456

数组对象解构

const pig=[{
    name:"pig",
    age:456,
    sex:789
}]
const [{name,age}] = pig
console.log(name);//'pig'
console.log(age);//456

数组对象改名字

const [{name:username,age}] =pig
console.log(username);
console.log(age);

多级对象解构

const pig={
    name:"佩奇",
    family:{
        mother:"猪妈妈",
        father:"猪爸爸",
        sister:"乔治"
    },
    age:18
}

const {name,family:{mother,father,sister},age}=pig
console.log(name);
console.log(mother);
console.log(father);
console.log(sister);
console.log(age);

多级数组对象解构

const pig=[{
    name:"佩奇",
    family:{
        mother:"猪妈妈",
        father:"猪爸爸",
        sister:"乔治"
    },
    age:18
}]

const [{name,family:{mother,father,sister},age}]=pig
console.log(name);
console.log(mother);
console.log(father);
console.log(sister);
console.log(age);

案例

// msg是后台传递的数据，我们需要把data作为参数传递给函数
const msg={
    name:"za",
    age:18,
    data:{
        data_name:"ls",
        data_age:40
    }
}

//方式1--传统方式
function fn(use_data){
    console.log(use_data); //{data_name: 'ls', data_age: 40}  
}
fn(msg.data)

// 方式2--对象解构
const {data} = msg
console.log(data);//{data_name: 'ls', data_age: 40}

function fn({data}){
    //因为const {data} = msg,使用到了对象解构,所以直接可以在参数位置做解构
    console.log(data);
}
fn(msg)

// 方式3--多级对象解构
function fn({data:{data_name,data_age}}){
    console.log(data_name);//ls
    console.log(data_age);//40
}
fn(msg)