首页手记对象扩展运算符的 7 种技

对象扩展运算符的 7 种技

标签：

Html5

翻译 7 Tricks with Resting and Spreading JavaScript Objects

扩展运算符不仅仅是用来解构参数或者扩展数组。

下面介绍 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' }