小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
- 解构:
也就是从对象或者数组中提取变量进行赋值
- 为什么提出:
提取数据对象需要逐个赋值,可能会为了一个小数据挖掘整个结构,ES6给数组和对象添加了解构可以方便提取数据
对象解构
不严谨但又可以通俗理解的话,可以理解成把对象比喻成高达,分解结构,从而获取机械碎片(属性)
如何获取?通过 {} 获取
let obj = {
name: 'jojo',
sex: 'man',
height: 191
}
let { name, sex, height } = obj
console.log(name, sex, height) // jojo, man, 191
为什么,因为里面相当于是:
let obj = {
name: 'jojo',
sex: 'man',
height: 191
}
let name = obj.name
let sex = obj.sex
let height = obj.height
这样无异于变繁琐了,甚至还可以这样
let obj = {
name: 'jojo',
sex: 'man',
height: 191
}
let { sex } = obj
let newObj = {
name: '龙舌兰姑娘',
sex
}
console.log(newObj.sex) // man
有时候需要自定义key,那么也可以这样
let obj = {
name: 'jojo',
sex: 'man',
height: 191
}
let { name: myName } = obj
console.log(myName) // jojo
难免会碰到嵌套结构,那么自然也考虑进去了
let obj = {
name: 'jojo',
sex: 'man',
height: 191,
child: {
name: 'jojo_2'
}
}
let { name: myName, child: {name: childName} } = obj // 重名会报错
console.log(myName, childName) // jojo, jojo_2
当不确定对象中是否有的时候,可以用 = 给一个默认值
对象中能找到该属性时,对象中的属性会覆盖默认值
let obj = {
name: 'jojo',
sex: 'man',
height: 191
}
let { name, sex, height=200 } = obj
console.log(name, sex, height) // jojo, man, 191
对象中没这个属性时,会使用默认值
let obj = {
name: 'jojo',
sex: 'man'
}
let { name, sex, height=200 } = obj
console.log(name, sex, height) // jojo, man, 200
同时,除了数组、对象,函数中的传参也可以使用解构,或给默认参数
默认值被覆盖:
function fn({name, height=200} = {}){
console.log(name, height) // jojo, 191
}
let obj = {
name: 'jojo',
sex: 'man',
height: 191
}
fn(obj)
使用默认值时:
function fn({name, height=200} = {}){
console.log(name, height) // jojo, 200
}
let obj = {
name: 'jojo',
sex: 'man'
}
fn(obj)