JavaScript解构赋值

目录

数组解构

对象解构

---

数组解构

       概念：数据解构是将数组的单元值快速批量赋值给一系列变量的简洁语法

在一般情况下我们会遇到要把数组里面的某些值提取并存储下来的需求，但若按照原本的语法来写会略显臃肿，这个时候我们就需要应用一种新的书写方式来简化代码

         初始代码：（如我们要存下数组中的最大，最小值等）

const arr=[100,60,80]
const max=arr[0]
const min=arr[1]
const avg=arr[2]
console.log(arr[0])//最大值
console.log(arr[1])//最小值
console.log(arr[2])//平均值

数组解构写法： 

const arr=[100,60,80]
const [max,min,avg]=arr

基本应用

交换两个变量

 优点：无需创建额外变量，代码更加简洁方便

let a=1
let b=2;  //注意这里必须加分号
[b,a]=[a,b]
console.log(a,b)  //结果 2,1

//加分号原因:[....]数组开头的语句，系统习惯将其与前一项拼接
//不加分号代码就会变成：
let a=1
let b=2[b,a]=[a,b]
console.log(a,b)  

 使用细节和注意事项

//变量少，单元值多
const [a,b,c,d]=[1,2,3]
console.(d)//输出undefined

//变量少,单元值多
const [a,b]=[1,2,3,4]
console.log(a)//1
console.log(b)//2

//若需得到多余参数,则可使用剩余参数
const [a,b,...arg]=[1,2,3,4]
console.log(a)//1
console.log(b)//2
console.log(arg)// [3,4]   返回一个真数组


//也可使用默认参数
const [a=0,b=0]=[]
console.log(a)
console.log(b)

//也可按需导入赋值
const[a,b,,d]=[1,2,3,4]
console.log(a)//1
console,log(b)//2
consloe.log(d)//4

//多维数组解构
const [a,b,[c,d]]=[1,2,[3,4]]
//输出a,b,c,d 结果依次为 1,2,3,4

---

对象解构（与数组解构类似）

概念：对象解构是将对象属性和方法批量赋值给一系列变量的简洁语法

const obj={
name:'张三',
age:18
}

const {name,age}={name:'张三',age:18}
//等价于
const name=obj.name;

注意：(要求解构变量名要和属性名相同)

但如果解构变量名与全局变量发生冲突，也可对解构变量改名

const {name：username,age}={name:'张三',age:18}
//新变量名 username

解构数组对象：

const obj=[
   {
    name:'张三',
    age:18
   }
 ]

//解构语法
const[{name,age}]=obj

多级对象解构

const pig={
name:'kk',
family{
father:'a',
mother:'b',
sister:'c'
},
age:15
}


//因为可能包含多个类对象所以这里需要加上对象名进行标注加以区分
const {name,family:{father,mother,sister},age}=pig

在实际应用中可能会出现对象或数组多层混合嵌套的情况，那么就综合前面的解构语法从外到内一层一层解构，这里就不再一 一列举