关于JavaScript对象 rest 和 spread 操作的8个技巧

resting 和 spreading 不仅仅可以用于静态参数和数组的扩展。

下面是使用 JavaScript 对象进行 rest 和 spread 时八个鲜为人知的技巧。

1. 添加属性
 

克隆一个对象，同时向(浅)克隆对象添加额外的属性。

在这个例子中，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!' }

2. 合并对象
 

将两个对象合并成一个新对象。

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!' }

3. 排除对象属性
 

属性可以使用解构和 rest 操作符组合来删除。这里  password  被解构出来(忽略)，属性的  rest  被返回为  rest 。

const noPassword = ({ password, ...rest }) => restconst user = {  id: 100,  name: 'Howard Moon',  password: 'Password!'}​noPassword(user) //=> { id: 100, name: 'Howard moon' }

4. 动态排除属性
 

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!' }

5. 组织属性
 

有时属性并不是按照我们需要的顺序排列的，使用一些技巧，我们可以将属性推到列表的顶部或底部。

要将 id 移动到第一个位置，在展开 object 之前向新对象添加 id: undefined 。

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 移动到最后一个属性，首先从 object 中销毁 password 。然后在展开 object 后设置  password 。

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!' }

6. 默认属性
 

默认属性是只有在原始对象中没有包含时才会设置的值。

在这个例子中，user2 不包含 quotes 。setDefaults 函数确保所有对象都设置了 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 })

7：重命名属性
 

通过结合上述技术，可以创建一个函数来重命名属性。

假设有些对象的 ID 是大写的，但实际上应该是小写的，首先将 ID 从 object 中解构出来，然后在 object 扩展时将其作为 id 添加回来。

const renamed = ({ ID, ...object }) => ({ id: ID, ...object })​const user = {  ID: 500,  name: "Bob Fossil"}​renamed(user) //=> { id: 500, name: 'Bob Fossil' }

8. 额外福利！添加条件属性
 

你也可以有条件地添加属性。在这个例子中，只有当 password 为真时，才会添加 password 。

const user = { id: 100, name: 'Howard Moon' }const password = 'Password!'const userWithPassword = {  ...user,  id: 100,  ...(password && { password })}​userWithPassword //=> { id: 100, name: 'Howard Moon', password: 'Password!' }

总结
 

我试着列出了一些不太为人所知的 spread 和 rest 技巧，如果你知道我这里没有列出的技巧，欢迎给我留言。

也欢迎关注公众号：文本魔术，了解更多