ES6 展开操作符的几个妙用,老板都说好!

Wesley13
• 阅读 576

ES6 展开操作符的几个妙用,老板都说好!   持续进步的同学都关注了“1024译站”

这是1024译站的第 50 篇文章

ES6 新增了...操作符,通常用于在函数中提取剩余参数和展开数组。但其实它的用途不止于此,本文就介绍几个技巧,用它来操作 JavaScript 对象。

1添加属性

复制对象的同时,为其添加新的属性。

例子中复制了user对象到userWithPass,并添加了 password 属性。

const user = { id: 110, name: 'Kayson Li'}const userWithPass = { ...user, password: 'Password!' }user //=> { id: 110, name: 'Kayson Li'}userWithPass //=> {  id: 110, name: 'Kayson Li', password: 'Password!' }

2合并多个对象

利用...可以合并多个对象到一个新的对象。part1 和 part2 合并到 user1

const part1 = {  id: 110, name: 'Kayson Li' }const part2 = { id: 110, password: 'Password!' }const user1 = { ...part1, ...part2 }//=> { id: 110, name: 'Kayson Li', password: 'Password!' }

3移除对象属性

可以结合使用解构和剩余操作符删除对象的属性。例子中 password被解构出来,其他属性保留在 rest对象里并被返回。

const noPassword = ({ password, ...rest }) => restconst user = {  id: 110,  name: 'Kayson Li',  password: 'Password!'}noPassword(user) //=> { id: 110, name: 'Kayson Li' }

4动态移除属性

来看一个例子。removeProperty 函数接受一个参数 prop ,利用动态属性名这个特性,prop 可以动态地从拷贝对象中移除。

const user1 = {  id: 110,  name: 'Kayson Li',  password: 'Password!'}const removeProperty = prop => ({ [prop]: _, ...rest }) => rest//                     ----       ------//                          \   ///                      动态解构const removePassword = removeProperty('password')const removeId = removeProperty('id')removePassword(user1) //=> { id: 110, name: 'Kayson Li' }removeId(user1) //=> { name: 'Kayson Li', password: 'Password!' }

5调整属性顺序

有时候对象的属性并不是我们想要的顺序。利用一些技巧,可以将属性移到最前面或最后面。

为了把id移到最前面,可以把 id: undefined 放在展开 object的前面:

const user3 = {  password: 'Password!',  name: 'Bruce',  id: 300}const organize = object => ({ id: undefined, ...object })//                            -------------//                          ///  移动 id 到第一个属性位置organize(user3)//=> { id: 300, password: 'Password!', name: 'Bruce' }

要把 password 移动到最后位置,先从 object中解构出 password ,然后把 password 放在展开object的后面:

const user3 = {  password: 'Password!',  name: 'Bruce',  id: 300}const organize = ({ password, ...object }) =>  ({ ...object, password })//              --------//             /// 把 password 移动到最后organize(user3)//=> { name: 'Bruce', id: 300, password: 'Password!' }

6设置属性默认值

当对象不存在某个属性时,我们有时候需要给对象添加这个属性,并设置一个默认值。

例如,user2没有 quotes属性,setDefaults 函数的作用是确保所有对象都有 quotes ,并有个默认值[]

执行 setDefaults(user2),返回的对象包含quotes: []

执行 setDefaults(user4),由于user4已经有 quotes了,那它就保持不变。

const user2 = {  id: 200,  name: 'Jack Ma'}const user4 = {  id: 400,  name: '鲁迅',  quotes: ["我没说过这句话……"]}const setDefaults = ({ quotes = [], ...object}) =>  ({ ...object, quotes })setDefaults(user2)//=> { id: 200, name: 'Jack Ma', quotes: [] }setDefaults(user4)//=> {//=>   id: 400,//=>   name: '鲁迅',//=>   quotes: ["我没说过这句话……"]//=> }

如果想让这个属性在最前面,可以这样写:

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

7属性重命名

结合前面的几个技巧,我们可以写一个给属性重命名的函数。

假设某些对象都有大写的 ID属性,我们想让它们都变成小写,该怎么做呢?先从object中解构出ID的值,然后再把这个值合并到新对象里,改成小写的id

const renamed = ({ ID, ...object }) => ({ id: ID, ...object })const user = {  ID: 500,  name: "张全蛋"}renamed(user) //=> { id: 500, name: '张全蛋' }

8还有更秀的操作!

可以根据条件决定是否添加某个属性,这在构造请求参数的时候非常有用。比如,我们只在 password有值的情况才添加该属性:

const user = { id: 110, name: 'Kayson Li' }const password = 'Password!'const userWithPassword = {  ...user,  id: 100,  ...(password && { password })}userWithPassword //=> { id: 110, name: 'Kayson Li', password: 'Password!' }

===

总结

本文介绍了关于剩余参数和扩展操作符...的几个不太常见的技巧,希望对你有所帮助。如果你还知道更多的技巧,欢迎在评论区分享!

顺手点“在看”,今天早下班;转发加关注,共奔小康路~

ES6 展开操作符的几个妙用,老板都说好!

本文分享自微信公众号 - 1024译站(trans1024)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
ES6 箭头函数大起底:熟知这几个特点让你少踩很多坑
!(https://oscimg.oschina.net/oscnet/e3ce59708caa880e627a2fe4a01fa660978.gif)  持续进步的同学都关注了“1024译站”这是1024译站的第90 篇文章我们都知道,在JavaScript里定义函数有多种方式。最常见的是用function关键字://
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这