js 操作對象的小技巧

來源：https://www.w3cplus.com/javascript/javascript-tips.html

1、使用...運算符合並對象或數組中的對象

同樣使用ES的...運算符可以替代人工操作，合並對象或者合並數組中的對象。

// 合並對象 
const obj1 = { name: '大漠', url: 'w3cplus.com' } 
const obj2 = { name: 'airen', age: 30 } 
const mergingObj = {...obj1, ...obj2} 
> Result: {name: "airen", url: "w3cplus.com", age: 30}
 // 合並數組中的對象 
const array = [ 
{ name: '大漠', email: '[e-mail]' },
 { name: 'Airen', email: '[e-mail]' } 
]
 const result = array.reduce((accumulator, item) => { 
return { ...accumulator, [item.name]: item.email } 
}, {}) 
> Result: {大漠: "[e-mail]", Airen: "[e-mail]"}

2、有條件的添加對象屬性

不再需要根據一個條件創建兩個不同的對象，以使它具有特定的屬性。為此，使用...操作符是最簡單的。

const getUser = (emailIncluded) => { 
return { 
name: '大漠', blog: 'w3cplus', ...emailIncluded && {email: '[e-mail]'}
 } 
} 
const user = getUser(true)
 console.log(user) 
> Result: {name: "大漠", blog: "w3cplus", email: "[e-mail]"} 
const userWithoutEmail = getUser(false) 
console.log(userWithoutEmail) 
> Result: {name: "大漠", blog: "w3cplus"}