摘要：下面针对对象时使用和时的个鲜为人知的技巧。对属性进行排序有时性质并不按照我们需要的顺序排列。若要将移到最后一个属性，请从对象中解构。默认属性默认属性是仅当它们不包含在原始对象中时才设置的值。
[译]使用 JavaScript 对象 Rest 和 Spread 的7个技巧
原文作者：Joel Thoms
原文标题：7 Tricks with Resting and Spreading JavaScript Objects
原文：https://blog.bitsrc.io/6-tric...
Rest 和 Spread 操作符不仅仅可以用于让参数休息和扩展数组。
下面针对 JavaScript 对象时使用 Rest 和 Spread 时的 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!" }
排除对象属性
可以结合使用解构 rest 运算符删除属性。 在这里，password 被删除 ，其余的属性作为 rest 返回。
const noPassword = ({ password, ...rest }) => rest
const user = {
id: 100,
name: "Howard Moon",
password: "Password!"
}
noPassword(user) //=> { id: 100, name: "Howard moon" }
动态排除属性
函数接受一个 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!" }
对属性进行排序
有时性质并不按照我们需要的顺序排列。 使用一些技巧，我们可以将属性推到列表的顶部，或者将它们移到底部。
若要将 id 移动到第一个位置，在扩展对象之前将 id: undefined 添加到新的 Object 最前面。
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。然后在使用 Rest 操作符后重新设置 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!" }
默认属性
默认属性是仅当它们不包含在原始对象中时才设置的值。
在本例中，user2 不包含 quotes 属性。 setdefaults 函数确保所有对象都设置了 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 然后在对象 Spread 时将其作为 id 添加回去。
const renamed = ({ ID, ...object }) => ({ id: ID, ...object })
const user = {
ID: 500,
name: "Bob Fossil"
}
renamed(user) //=> { id: 500, name: "Bob Fossil" }
附赠：添加条件属性
感谢 @vinialbano 指出你也可以有条件地添加属性。 在这个例子中，只有当 password 是真实的时候才会添加 password！
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!" }
摘要
我试着列出了一些鲜为人知的 Spread 和 Rest 技巧，如果你知道任何我没有列在这里技巧，请在评论区里让每个人都知道！如果你从中学到了新的东西，请在 Twitter 上和你的朋友分享，这真的很有帮助！
请在这里或者推特 @joelnet 关注我！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/102836.html
摘要：变量声明与赋值值传递浅拷贝与深拷贝详解归纳于笔者的现代开发语法基础与实践技巧系列文章。变量声明在中，基本的变量声明可以用方式允许省略，直接对未声明的变量赋值。按值传递中函数的形参是被调用时所传实参的副本。 ES6 变量声明与赋值：值传递、浅拷贝与深拷贝详解归纳于笔者的现代 JavaScript 开发：语法基础与实践技巧系列文章。本文首先介绍 ES6 中常用的三种变量声明方式，然后讨论了...
摘要：如果添加属性不可避免，要使用方法。如果对象的属性名是动态的，可以在创造对象的时候，使用属性表达式定义。 一些稍微优雅的技巧写法，并不是非的是es6,标题党了哈 为class绑定多个值 普通写法 :class={a: true, b: true} 其他 :class=[btn, btn2, {a: true, b: false}] 一个值判断a或者判断b 普通写法 if(flg === ...
摘要：为了使程序员能够一次一个地处理集合中的元素，引入了迭代器接口。迭代器使用该方法获取对象属性名称的数组，然后将其分配给常量。迭代器的缺点是它们不适合表示异步数据源。每次循环时，都会调用迭代器的方法，它返回一个。 前言 原文地址：https://css-tricks.com/new-es2018-features-every-javascript-developer-should-kno...
摘要：前端日报精选三思而后行想提高团队技术，来试试这个套路如何开发一个插件学习笔记块级作用域绑定译文详解带来的个重大变化中文周二放送画图知乎专栏第期新特性译配置译高性能视差滚动行代码构建区块链知乎专栏渲染器修仙之路之拷贝对象已 2017-07-25 前端日报 精选 SSR 三思而后行想提高团队技术，来试试这个套路！如何开发一个 Atom 插件ES6学习笔记：块级作用域绑定【译文】详解VUE2...
阅读 631·2021-11-22 15:32
阅读 2720·2021-11-19 09:40
阅读 2312·2021-11-17 09:33
阅读 1262·2021-11-15 11:36
阅读 1864·2021-10-11 10:59
阅读 1475·2019-08-29 16:41
阅读 1779·2019-08-29 13:45
阅读 2149·2019-08-26 13:36
