JS-对象解构

• 可从已知对象中解构所需的成员，与顺序无关，可使用展开语法(必须放最后)解构剩下的成员(仍然是对象)
• 可对解构成员使用别名({name:username}), 使用别名后原变量将失效
• 可对函数(部分)参数进行对象解构，外部传入参数将一一对应(键名一致)
• 可将单值成员组合成对象，键名一致可省略名称({name:name}相当于{name})
• 可对复杂(多层)对象进行解构, 与单层对象解构类似
• 可对已知对象成员做解构，也可对未知成员(不包含在对象中)解构(默认值undefined)并同时指定默认值，也+可用于参数合并

//数组展开语法
const arr=[1,2,3]
//利用展开语法拼接新的数组
console.log([...arr,77,88]) 


//对象展开
const user={name:'夏目',age:16,protecotr:'猫咪老师'}
console.log(JSON.stringify({...user,address:'熊本'}))

function upload(params){
    const config={type:'.jpg',size:2000}
    console.log(JSON.stringify({...config ,...params}))
}
upload()
upload({type:'.png,.gif'})

//对象展开 -将对象数组转化为对象
const users = [{type:'人类', name: '夏目', age: 17 }, {type:'高级妖怪', name: '猫咪老师', age: 100 }]
const obj = users.reduce((preV, currentV, index) => {
    const prop = `${currentV['type']}`
    console.log(prop)
    return {...preV,[prop]:currentV}//???????
},{}) //初始值是空对象
console.log(JSON.stringify(obj,null,2))

//对象解构
const user2={name:'夏目',age:16,protecotr:'猫咪老师',address:'熊本'}
const {name:uName,age:uAge,...rest}=user2
console.log(`${uName}   ${uAge}  ${rest}`)


//函数参数解构
function show(name,{age,address}){
    console.log(`${name} 今年 ${age} 家住 ${address}`)
}
show('xiaoming',{age:18,address:'浦东'})

//将单量值转换为对象
const proName = '资讯推送管理平台', proName2 = '中证资讯舆情'
console.log({ proName, proName2 })

//复杂对象解构
const user = { name: '夏目', age: 18, freinds: { name1: 'cat' } }
const { name, freinds: { name1 } } = user
console.log(name, name1)

//参数合并
function createElement(options = {}) {
    const { width = 300, height = 100, bgColor = 'red' } = options
    const ele = document.createElement('div')
    ele.style.width = `${width}px`
    ele.style.height = `${height}px`
    ele.style.background = `${bgColor}`
    document.body.appendChild(ele)
}
createElement()
createElement({bgColor:'green'})