JavaScript中的解构赋值应用技巧

数组的解构赋值

• 交换变量值

let a = 'b'
let b = 'a'
[a,b] = [b,a]
console.log(a, b)

• 多个变量值交换

let num1 = 30
let num2 = 10
let num3 = 40
let num4 = 20

[num1, num2, num3, num4] = [num2, num4, num1, num3]
console.log(`第一：${num1},第二：${num2},第三：${num3},第四：${num4}`)

• 取数组中的前三个元素

const arr = ['赵同学', '钱同学','孙同学','李同学','周同学','王同学']
const [num1,num2,num3] = arr
console.log(`第一名:${num1},第二名：${num2},第三名：${num3}`)

//取指定位置元素
const [,,num3,,num5] = arr
console.log(`第三名:${num3},第五名：${num5}`)

• 修改变量

const arr = ['赵同学', '钱同学','孙同学','李同学','周同学','王同学']

let num3 = 'z同学'
let num5 = 'w同学'

[,,num3,,num5] = arr

console.log(`第三名:${num3},第五名：${num5}`)
//第三名：孙同学，第五名：李同学

• 设置默认值

const arr = ['赵同学', '钱同学','孙同学','李同学','周同学','王同学']

let num3 = 'z同学'
let num5 = 'w同学'

[,,num3,,num5,,num7='鹿同学'] = arr

console.log(`第三名:${num3},第五名：${num5},第七名:${num7}`)
//第三名：孙同学，第五名：周同学,第七名：鹿同学

• 使用花括号，以属性的形式来指定元素的编号

const arr = ['赵同学', '钱同学','孙同学','李同学','周同学','王同学']

const {2: num3, 4:num5} = arr

console.log(`第三名：${num3},第五名：${num5}`)
//第三名：孙同学，第五名：周同学

• 数组为空设置默认值

const arr = ['赵同学', '钱同学','孙同学','李同学','周同学','王同学']

const [notExist = '数组为空'] = arr
console.log(notExist)
//赵同学

• 剩余不定元素放到数组中

const arr = ['赵同学', '钱同学','孙同学','李同学','周同学','王同学']

const [num1, num2, num3, ...restNum] = arr
console.log(`前三名是：${num1},${num2},${num3},不及格的是${restNum}`)
//第三名是：赵同学，钱同学，孙同学，不及格的是李同学，周同学，王同学

• 嵌套数组的解构赋值

const arr = ['赵同学', '钱同学',['孙同学','李同学'],['周同学','王同学','吴同学'],'马同学']

const [num1,,[,num2], [,,num3]] = arr
console.log(`第一个数组的第一个元素${num1},第一个数组的第二个元素${num2},第一个数组的第二个元素${num3}`)
//第一个数组的第一个元素赵同学,第一个数组的第二个元素李同学,第一个数组的第二个元素吴同学

对象的解构赋值

• 赋值并重命名

 const obj = {
     id: '1',
     name: '张三',
     age: 18,
     gender: '男',
     email: '888888@qq.com'
 }
 const {name: eggname, email: eggEmail} = obj;
 console.log(eggname, eggEmail)

• 要获取的属性名在数组中

 const obj = {
     id: '1',
     name: '张三',
     age: 18,
     gender: '男',
     email: '888888@qq.com'
 }
 const arr = ['name', 'email']
 const {[arr[0]]:eggName,[arr[1]]:eggEmail} = obj
 console.log(eggName, eggEmail)
//张三 888888@qq.com

• 默认值

 const obj = {
     id: '1',
     name: '张三',
     age: 18,
     gender: '男',
     email: '888888@qq.com'
 }

 const {name:eggName,email:eggEmail,major:eggMajor='计算机'} = obj
 console.log(eggName, eggEmail, eggMajor)
//张三 888888@qq.com 计算机

• 删除不要的属性

 const obj = {
     id: '1',
     name: '张三',
     age: 18,
     gender: '男',
     email: '888888@qq.com'
 }
 
 const { id, age,  ...restObj } = obj
 
 console.log(restObj)
//name: '张三',gender: '男',email: '888888@qq.com'

• 变量赋值

 const obj = {
     id: '1',
     name: '张三',
     age: 18,
     gender: '男',
     email: '888888@qq.com'
 }
let gender = '女'
({gender} = obj)
console.log(gender)

• 嵌套解构赋值

 const obj = {
     name: '张三',
     stills:{
         cook:{
             main:'炒鸡蛋'
         }，
         language:{
         	frontEnd:'javascript',
         	backEnd:'java'
     	}
     }
 }
 let{ skills:{language:{frontEnd}}} = obj
 console.log(frontEnd)
//javascript

• 遍历

const arr = [
    {name: '张老师',age:18},
    {name: '王老师',age:28},
    {name: '李老师',age:38}
]

arr.forEach(({name,age},index)=>{
    console.log(`姓名：${name},年龄:${age}`)
})
//姓名：张老师，年龄：18
//姓名：王老师，年龄：28
//姓名：李老师，年龄：38·

• 函数

function getAPI(data){
    return [data.name,data.age]
}
const [eggName, eggAge] = getAPI({name:'张三'，age:18})
console.log(eggName,eggAge)
//张三 18

• 取出字符串中的某个字符

const str = '张三三'
const [first,second,third] = str
console.log(first,second,third)
// 张 三 三

• 省略键 获取所有的值

let map = new Mapp()
map.set('name1','张三')
map.set('name2','李四')
map.set('name3','王五')

for (let [,value] of map){
    console.log(value)
}
//张三
//李四
//王五

• 正则用到解构赋值中

const str = '再见了886爱你20'
const arrReg = /(\D+)(\d+)(\D+)(\d+)/.exec(str)

const {1:bye,3:loveyou} = arrReg;

console.log(bye, loveyou)