扩展运算符不仅仅是用来解构参数或者扩展数组。
下面介绍 7 种你可能不知道的对象扩展运算符小技巧。
添加属性
在克隆对象的同时可以直接添加额外的属性到克隆后的对象。
下面的侄子，user 是已经被克隆了，然后 password 也被添加到对象 userWithPass。
const user = { id: 100, name: 'Howard Moon'}
const userWithPass = { ...user, password: 'Password!' }
user //=> { id: 100, name: 'Howard Moon' }
userWithPass //=> { id: 100, name: 'Howard Moon', password: 'Password!' }
合并对象
可以将两个对象合并成一个新的对象。
下面侄子中，part1 和 part2 被合并到 user1。
const part1 = { id: 100, name: 'Howard Moon' }
const part2 = { id: 100, password: 'Password!' }
const user1 = { ...part1, ...part2 }
//=> { id: 100, name: 'Howard Moon', password: 'Password!' }
也可以用下面的写法。
const partial = { id: 100, name: 'Howard Moon' }
const user = { ...partial, ...{ id: 100, password: 'Password!' } }
user //=> { id: 100, name: 'Howard Moon', password: 'Password!' }
移除对象属性
可以将解构语法和扩展运算符结合来移除对象中的属性。下面例子中，password 被解构出来 （然后被忽略），rest 属性再以 rest 返回。
const noPassword = ({ password, ...rest }) => rest
const user = {
id: 100,
name: 'Howard Moon',
password: 'Password!'
}
noPassword(user) //=> { id: 100, name: 'Howard moon' }
动态移除对象属性
removeProperty 函数接收 prop 参数，使用计算对象属性名，prop可以从克隆对象被动态地移除。
const user1 = {
id: 100,
name: 'Howard Moon',
password: 'Password!'
}
const removeProperty = prop => ({ [prop]: _, ...rest }) => rest
// ---- ------
// \ /
// dynamic destructuring
const removePassword = removeProperty('password')
const removeId = removeProperty('id')
removePassword(user1) //=> { id: 100, name: 'Howard Moon' }
removeId(user1) //=> { name: 'Howard Moon', password: 'Password!' }
属性排序
有时候对象属性的顺序并不如意，通过下面的小技巧我们可以将属性放到顶部或者底部。
下面例子在展开对象 object 前先添加 id: undefined 到新对象，从而将 id 移到最前面。
const user3 = {
password: 'Password!',
name: 'Naboo',
id: 300
}
const organize = object => ({ id: undefined, ...object })
// -------------
// /
// move id to the first property
organize(user3)
//=> { id: 300, password: 'Password!', name: 'Naboo' }
要将 password 移到最后的位置，首先将 password 从 object 解构出来 ，然后将 password 放在展开的 object 里。
const user3 = {
password: 'Password!',
name: 'Naboo',
id: 300
}
const organize = ({ password, ...object }) =>
({ ...object, password })
// --------
// /
// move password to last property
organize(user3)
//=> { name: 'Naboo', id: 300, password: 'Password!' }
默认属性
默认属性是当对象没有这个属性，会赋值一个默认值给这个属性。
下面例子中，user2 不包含 quotes。setDefault 函数可以确保所有对象都有 quotes 属性，如果没有那么 quotes 为 []。
当调用 setDefaults(user2) 的时候，返回值会包含 quotes:[]。
当调用 setDefaults(user4) 的时候，因为 user4 已经有 quotes，属性值不会被修改。
const user2 = {
id: 200,
name: 'Vince Noir'
}
const user4 = {
id: 400,
name: 'Bollo',
quotes: ["I've got a bad feeling about this..."]
}
const setDefaults = ({ quotes = [], ...object}) =>
({ ...object, quotes })
setDefaults(user2)
//=> { id: 200, name: 'Vince Noir', quotes: [] }
setDefaults(user4)
//=> {
//=> id: 400,
//=> name: 'Bollo',
//=> quotes: ["I've got a bad feeling about this..."]
//=> }
如果你想让默认值放到首位也可以这样写：
const setDefaults = ({ ...object}) => ({ quotes: [], ...object })
重命名属性
结合上面的小技巧，可以定义一个函数来重命名属性。
假想一个场景，对象里有属性 ID，现在我们要把它变成 id。首先要做的是将 ID 从 object 解构出来，然后在 object 展开的时候以 id 添加回对象。
const renamed = ({ ID, ...object }) => ({ id: ID, ...object })
const user = {
ID: 500,
name: "Bob Fossil"
}
renamed(user) //=> { id: 5000, name: 'Bob Fossil' }
网友评论