对象解构

//数组展开语法
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'})