JavaScript ES6展开运算符对象操作技巧：添加、合并、移除与重命名

1. 添加属性

在复制现有对象的同时，可以为其添加新的属性。

示例中将 user 对象复制到 userWithPass，并额外添加了 password 属性。


const user = { id: 110, name: 'Kayson Li'}
const userWithPass = { ...user, password: 'Password!' }

user //=> { id: 110, name: 'Kayson Li'}
userWithPass //=> {  id: 110, name: 'Kayson Li', password: 'Password!' }

2. 合并多个对象

利用展开运算符可以将多个对象合并为一个新的对象。例如将 part1 和 part2 合并到 user1 中：


const part1 = {  id: 110, name: 'Kayson Li' }
const part2 = { id: 110, password: 'Password!' }

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

3. 移除对象属性

结合解构和剩余操作符可以删除对象的特定属性。示例中将 password 解构出来，其余属性保留在 rest 对象中并返回。


const noPassword = ({ password, ...rest }) => rest
const user = {
  id: 110,
  name: 'Kayson Li',
  password: 'Password!'
}

noPassword(user) //=> { id: 110, name: 'Kayson Li' }

4. 动态移除属性

参考以下示例。removeProperty 函数接收一个参数 prop，利用动态属性名的特性，prop 可以动态地从拷贝对象中移除。


const user1 = {
  id: 110,
  name: 'Kayson Li',
  password: 'Password!'
}
const removeProperty = prop => ({ [prop]: _, ...rest }) => rest
//                     ----       ------
//                          \   /
//                      动态解构

const removePassword = removeProperty('password')
const removeId = removeProperty('id')

removePassword(user1) //=> { id: 110, name: 'Kayson Li' }
removeId(user1) //=> { name: 'Kayson Li', password: 'Password!' }

5. 调整属性顺序

有时对象的属性顺序并非预期结果。通过一些技巧，可以将特定属性移至最前或最后。

若要将 id 移至最前面，可将 id: undefined 置于展开 object 之前：


const user3 = {
  password: 'Password!',
  name: 'Bruce',
  id: 300
}

const organize = object => ({ id: undefined, ...object })
//                            -------------
//                          /
//  移动 id 到第一个属性位置

organize(user3)
//=> { id: 300, password: 'Password!', name: 'Bruce' }

若要将 password 移至最后，需先从 object 中解构出 password，然后将 password 置于展开 object 之后：


const user3 = {
  password: 'Password!',
  name: 'Bruce',
  id: 300
}

const organize = ({ password, ...object }) =>
  ({ ...object, password })
//              --------
//             /
// 把 password 移动到最后

organize(user3)
//=> { name: 'Bruce', id: 300, password: 'Password!' }

6. 设置属性默认值

当对象缺失某个属性时，有时需要为该对象添加该属性并设定默认值。

例如，user2 缺少 quotes 属性，setDefaults 函数的作用是确保所有对象均包含 quotes，并赋予默认值 []。

执行 setDefaults(user2) 后，返回的对象包含 quotes: []。

执行 setDefaults(user4) 时，由于 user4 已存在 quotes 属性，则该属性保持不变。


const user2 = {
  id: 200,
  name: 'Jack Ma'
}

const user4 = {
  id: 400,
  name: '鲁迅',
  quotes: ["我没说过这句话……"]
}

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

setDefaults(user2)
//=> { id: 200, name: 'Jack Ma', quotes: [] }

setDefaults(user4)
//=> {
//=>   id: 400,
//=>   name: '鲁迅',
//=>   quotes: ["我没说过这句话……"]
//=> }

若希望该属性位于最前面，可改写为：


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

7: 属性重命名

结合前述技巧，可以编写一个用于属性重命名的函数。

假设部分对象包含大写的 ID 属性，现需将其转换为小写。具体做法是：先从 object 中解构出 ID 的值，再将该值合并到新对象中，并重命名为小写的 id：


const renamed = ({ ID, ...object }) => ({ id: ID, ...object })

const user = {
  ID: 500,
  name: "张全蛋"
}

renamed(user) //=> { id: 500, name: '张全蛋' }

8. 还有更秀的操作

可根据条件决定是否添加某个属性，这在构造请求参数时非常有用。例如，仅在 password 有值时才添加该属性：


const user = { id: 110, name: 'Kayson Li' }
const password = 'Password!'
const userWithPassword = {
  ...user,
  id: 100,
  ...(password && { password })
}

userWithPassword //=> { id: 110, name: 'Kayson Li', password: 'Password!' }

以上就是JS ES6展开运算符的几个妙用的详细内容，更多关于JS ES6展开运算符的资料请关注本站其它相关文章！

JS ES6展开运算符在对象操作中的8种实用技巧