哈Ha!我向您介绍乔尔·汤姆斯(Joel Thoms)撰写的文章“具有休息和传播JavaScript对象的7个技巧”。大家好,前几天,一个工作同事向我扔了一篇英文文章的链接,其中列出了与休息和分散操作员一起工作的不同方法。她对我有用,我决定翻译。所以,让我们开始吧。
Rest和Spread运算符不仅可以用于将参数组合到数组中,还可以用于组合数组。在本文中,您将找到使用Rest和Spread运算符的7个鲜为人知的技巧。1.添加属性
克隆对象,同时将新对象添加到克隆对象中。在下面的示例中,我们克隆用户对象,并将password属性添加到克隆的userWithPass对象。const user = { id: 100, name: 'Howard Moon'}
const userWithPass = { ...user, password: 'Password!' }
user
userWithPass
2.合并对象
分析过程part1和part2 merzhatsya对象user1const part1 = { id: 100, name: 'Howard Moon' }
const part2 = { id: 100, password: 'Password!' }
const user1 = { ...part1, ...part2 }
因此,使用此语法,相同的对象可以是连续的。const partial = { id: 100, name: 'Howard Moon' }
const user = { ...partial, id: 100, password: 'Password!' }
user
3.从对象中删除属性
可以使用解构和rest语句的组合来删除对象的属性。在下面的示例中,我们销毁了其余对象,并从其中删除了password属性。const noPassword = ({ password, ...rest }) => rest
const user = {
id: 100,
name: 'Howard Moon',
password: 'Password!'
}
noPassword(user)
4.动态删除属性
在下面的示例中,removeProperty函数将prop作为参数。使用参数中传递的属性名称,我们可以从克隆对象中动态排除该属性。const user1 = {
id: 100,
name: 'Howard Moon',
password: 'Password!'
}
const removeProperty = prop => ({ [prop]: _, ...rest }) => rest
const removePassword = removeProperty('password')
const removeId = removeProperty('id')
removePassword(user1)
removeId(user1)
5.按名称组织或分类属性
有时,对象中的属性未按我们需要的顺序排列。例如,使用一些技巧,我们可以将属性推到列表的顶部或中间。const user3 = {
password: 'Password!',
name: 'Naboo',
id: 300
}
const organize = object => ({ id: undefined, ...object })
organize(user3)
为了将密码放在最后,您首先需要销毁对象并删除密码,然后使用传播运算符添加它。6.默认属性
默认属性是如果它们不在克隆的对象中将设置的属性。在下面的示例中,user2对象中缺少引号字段。在没有引号字段的情况下,setDefaults函数默认将其设置为[]值。调用setDefaults(user2)函数后,它返回带有引号值的属性:[]调用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)
setDefaults(user4)
如果您想首先显示默认值,也可以这样写:const setDefaults = ({ ...object}) => ({ quotes: [], ...object })
7.重命名属性
使用上面的技巧,我们还可以创建一个函数来将对象的属性重命名为我们。假设我们有一个对象,其属性ID用大写字母书写,我们需要将其重命名为小写字母。我们首先从对象中删除ID属性。然后在克隆对象时将其添加回名称id。const renamed = ({ ID, ...object }) => ({ id: ID, ...object })
const user = {
ID: 500,
name: "Bob Fossil"
}
renamed(user)
8.奖金。根据条件添加属性
感谢@vinialbano展示了这种方法。在此示例中,仅当password == true时才添加密码字段!const user = { id: 100, name: 'Howard Moon' }
const password = 'Password!'
const userWithPassword = {
...user,
id: 100,
...(password && { password })
}
userWithPassword
结论
我试图列举一些使用Rest和Spread运算符的较不知名的方法。如果您知道此列表中未列出的任何其他方法,请在评论中写出它们。如果这篇文章对您有用,请将其重新发布给您的朋友和熟人。