引言

ES6对Javascript进行了扩展,其中出现了大量的新特性,我们可以有效的利用新特性来提升我们的代码质量和开发效率,本文将介绍如何通过扩展运算符来简化我们的代码。

向对象添加属性

克隆对象，同时向(浅)克隆对象添加附加属性，如下代码：

const user = { id: 10, name: Tom} const userWithPass = { ...user, password: Password! } user //=> { id: 10, name: Tom } userWithPass //=> { id: 10, name: Tom, password: Password! }

在这个例子里面user克隆成userWithPass，并且userWithPass对象添加了password属性，代码简洁高效。

合并对象

我们通过举个例子来说明是如何操作的

const part1 = { id: 10, name: Howard Moon } const part2 = { id: 11, password: Password! } const user1 = { ...part1, ...part2 } //=> { id: 10, name: Howard Moon, password: Password! }

在这个例子里面我们将part1和part2合并成一个对象user1，也可以通过以下方式合并对象

const partial = { id: 100, name: Howard Moon } const user = { ...partial, id: 100, password: Password! } user //=> { id: 100, name: Howard Moon, password: Password! }

删除对象的属性

可以结合REST运算符使用析构来删除属性。

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

动态删除属性

可以利用对象属性名，然后removeProperty传递属性名称将属性删除

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

调整对象属性的位置

有时属性不符合我们所需要的顺序。使用一些技巧，我们可以将属性推到列表的顶部，或者将它们移动到底部，例如：

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 }

在这个例子里面将id已到了第一位，下面的例子是将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! }

默认属性

const user2 = { id: 200, name: Vince Noir } const user4 = { id: 400, name: Bollo, quotes: ["Ive 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: ["Ive got a bad feeling about this..."] //=> }

值得注意的是默认属性值仅在未包含在原始对象中时才会设置，从这个例子的结果来看，我们就知道怎样设置默认值了。或者你也可能需要这样写

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

重命名对象的属性

在有些场景，比如我们可能需要修改对象属性的大小写，那么我们可以通过这样的方式来重命名

const renamed = ({ ID, ...object }) => ({ id: ID, ...object }) const user = { ID: 500, name: "Bob Fossil" } renamed(user) //=> { id: 500, name: Bob Fossil }//将大写ID改成了小写的

条件属性

这个有时候会非常实用，从名字来看，显示是通过条件来控制对象的属性

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

总结

本文通过介绍一些小技巧来操作对象的属性，有时候这些技巧是不为人知的，所以在此分享给大家，内容来源于网络上的技术博客，再次共享，如果对你有帮助，麻烦点赞、转发加关注吧，谢谢！