原文链接

ES6 新增了...操作符，通常用于在函数中提取剩余参数和展开数组。但其实它的用途不止于此，本文就介绍几个技巧，用它来操作 JavaScript 对象。

1. 添加属性

复制对象的同时，为其添加新的属性。
例子中复制了user对象到userWithPass，并添加了 password 属性。

  1. const user = { id: 110, name: 'Kayson Li'}
  2. const userWithPass = { ...user, password: 'Password!' }
  3. user //=> { id: 110, name: 'Kayson Li'}
  4. userWithPass //=> {  id: 110, name: 'Kayson Li', password: 'Password!' }

2. 合并多个对象

利用...可以合并多个对象到一个新的对象。
part1 和 part2 合并到 user1：

  1. const part1 = {  id: 110, name: 'Kayson Li' }
  2. const part2 = { id: 110, password: 'Password!' }
  3. const user1 = { ...part1, ...part2 }
  4. //=> { id: 110, name: 'Kayson Li', password: 'Password!' }

3. 移除对象属性

可以结合使用解构和剩余操作符删除对象的属性。例子中 password被解构出来，其他属性保留在 rest对象里并被返回。

  1. const noPassword = ({ password, ...rest }) => rest
  2. const user = {
  3.   id: 110,
  4.   name: 'Kayson Li',
  5.   password: 'Password!'
  6. }
  7. noPassword(user) //=> { id: 110, name: 'Kayson Li' }

4. 动态移除属性

来看一个例子。removeProperty 函数接受一个参数 prop ，利用动态属性名这个特性，prop 可以动态地从拷贝对象中移除。

  1. const user1 = {
  2.   id: 110,
  3.   name: 'Kayson Li',
  4.   password: 'Password!'
  5. }
  6. const removeProperty = prop => ({ [prop]: _, ...rest }) => rest
  7. //                     ----       ------
  8. //                          \   /
  9. //                      动态解构
  10. const removePassword = removeProperty('password')
  11. const removeId = removeProperty('id')
  12. removePassword(user1) //=> { id: 110, name: 'Kayson Li' }
  13. removeId(user1) //=> { name: 'Kayson Li', password: 'Password!' }

5. 调整属性顺序

有时候对象的属性并不是我们想要的顺序。利用一些技巧，可以将属性移到最前面或最后面。
为了把id移到最前面，可以把 id: undefined 放在展开 object的前面：

  1. const user3 = {
  2.   password: 'Password!',
  3.   name: 'Bruce',
  4.   id: 300
  5. }
  6. const organize = object => ({ id: undefined, ...object })
  7. //                            -------------
  8. //                          /
  9. //  移动 id 到第一个属性位置
  10. organize(user3)
  11. //=> { id: 300, password: 'Password!', name: 'Bruce' }

要把 password 移动到最后位置，先从 object中解构出 password ，然后把 password 放在展开object的后面：

  1. const user3 = {
  2.   password: 'Password!',
  3.   name: 'Bruce',
  4.   id: 300
  5. }
  6. const organize = ({ password, ...object }) =>
  7.   ({ ...object, password })
  8. //              --------
  9. //             /
  10. // 把 password 移动到最后
  11. organize(user3)
  12. //=> { name: 'Bruce', id: 300, password: 'Password!' }

6. 设置属性默认值

当对象不存在某个属性时，我们有时候需要给对象添加这个属性，并设置一个默认值。
例如，user2没有 quotes属性， setDefaults 函数的作用是确保所有对象都有 quotes ，并有个默认值[]。
执行 setDefaults(user2)，返回的对象包含quotes: []。
执行 setDefaults(user4)，由于user4已经有 quotes了，那它就保持不变。

  1. const user2 = {
  2.   id: 200,
  3.   name: 'Jack Ma'
  4. }
  5. const user4 = {
  6.   id: 400,
  7.   name: '鲁迅',
  8.   quotes: ["我没说过这句话……"]
  9. }
  10. const setDefaults = ({ quotes = [], ...object}) =>
  11.   ({ ...object, quotes })
  12. setDefaults(user2)
  13. //=> { id: 200, name: 'Jack Ma', quotes: [] }
  14. setDefaults(user4)
  15. //=> {
  16. //=>   id: 400,
  17. //=>   name: '鲁迅',
  18. //=>   quotes: ["我没说过这句话……"]
  19. //=> }

如果想让这个属性在最前面，可以这样写：

  1. const setDefaults = ({ ...object}) => ({ quotes: [], ...object })

7: 属性重命名

结合前面的几个技巧，我们可以写一个给属性重命名的函数。
假设某些对象都有大写的 ID属性，我们想让它们都变成小写，该怎么做呢？先从object中解构出ID的值，然后再把这个值合并到新对象里，改成小写的id：

  1. const renamed = ({ ID, ...object }) => ({ id: ID, ...object })
  2. const user = {
  3.   ID: 500,
  4.   name: "张全蛋"
  5. }
  6. renamed(user) //=> { id: 500, name: '张全蛋' }

8. 还有更秀的操作

可以根据条件决定是否添加某个属性，这在构造请求参数的时候非常有用。比如，我们只在 password有值的情况才添加该属性：

  1. const user = { id: 110, name: 'Kayson Li' }
  2. const password = 'Password!'
  3. const userWithPassword = {
  4.   ...user,
  5.   id: 100,
  6.   ...(password && { password })
  7. }
  8. userWithPassword //=> { id: 110, name: 'Kayson Li', password: 'Password!' }

原文链接