引言

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

总结

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