一行代码快速更新对象部分字段数据

最近在独立开发一款小程序, 开发过程中遇到了很多问题, 所以打算用文字记录下来.

前言

在自己写代码的时候, 总是喜欢考虑怎么写更优雅/ 简洁, 从而导致拖延开发进度. 但从中也收获了很多. 开发小程序用户登录功能时, 需要考虑很多逻辑. 但只要把流程捋一遍,实现起来也不难, 其中有些细节需要停下来仔细打磨, 比如用户信息更新.

需求

在用户点击登录授权后, 获取到默认的一些基础信息, 但这些数据往往不够, 需要用户自行补充 / 更新.

由于小程序使用的云开发, 操作用户信息以及存储自然也使用的云开发的云数据库, 点击保存将会更新数据库中的这些字段, 如果没有则新创建. 但是, 更新后返回的是更新条数, 而不是更新后的数据, 如果再次去查询数据显得有点多余.

解决

那就在本地处理好了,在确保更新成功后, 对缓存中的用户信息进行更新就好了,反正数据库中该用户的信息已经更新了.先来看看已有的数据:

• 这个是用户本地缓存的数据:

let userInfo = {
    avatarUrl: (...),
    city: (...),
    country: (...),
    gender: (...),
    language: (...),
    nickName: (...),
    province: (...),
    _id: (...),
    _openid: (...)
}
复制代码

• 这个是用户填写的表单数据:

const formData = {
    jk_id: (...),
    wx_id: (...),
    mobile: (...),
    gender: (...)
  }
复制代码

• 更新后的数据:

    avatarUrl: (...)
    city: (...)
    country: (...)
    gender: (updated)
    language: (...)
    nickName: (...)
    province: (...)
    _id: (...)
    _openid: (...)
     jk_id: (new)
    wx_id: (new)
    mobile: (new)
复制代码

可以发现, 用户填写的表单中既有本地已经存在的字段, 又有新的字段, 那么如何处理成更新后的数据呢?

方法 1

userInfo.jk_id = formData.jk_id;
userInfo.wx_id = formData.wx_id;
userInfo.mobile = formData.mobile;
...以此类推
复制代码

这种方法显然不可取,果断舍弃.

方法 2

for (const key in userInfo) {
  if (Object.hasOwnProperty.call(formData, key)) {
    userInfo[key] = formData[key]
  }
}
复制代码

看起来似乎不错, 循环查找匹配, 但还是不够简洁

方法 3

const newUserInfo = Object.assign({},userInfo,formData)
复制代码

一行代码即可解决, 表达式右侧会生成一个新的对象, newUserInfo 会指向一个新的引用地址

Object.assign()

该方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。

⚠ 需要注意的是 该写法仅适用于浅拷贝对象

参考链接

• Object.assign()
• vue 两种 Object.assign 响应式修改对象方式