lodash实践之依据规则处理对象

一.要解决的问题

在实际开发中,如果你遇到需要对一个比较复杂的对象删除某些变量,或者替换某些变量的场景,你会怎么处理呢?

比如:

const target = {
    a: 1,
    b: {
        n: 2,
        m: 3
    },
    c: 1,
    d: {
        n: 2,
        m: 3
    }
}

你需要对target对象做以下处理:

  1. 删除a和b.n参数,并且b.m如果小于2的话进行删除
  2. 替换c值和d.n值为9,并且替换d.m的值为(a+c)

你是否采用了下面的方式处理:

target.c = 9
target.d.n = 9
target.d.m = target.a + target.c
delete target.a
delete target.b.n
if (target.b.m < 2) delete target.b.m

如果规则简单,可能用上面的方式就足够了,但如果需要要处理的规则越来越多的话,这样写一是不好维护,别的童鞋可能要看半天,二是写的时候也麻烦。那么,如果把规则定义为一个变量,丢给一个工具函数来执行,这样会不会比较直观和好处理呢?

二.希望的使用方式

希望实现一个executor函数

/***
 * executor 根据匹配规则处理对象的执行器
 * @param targets 处理的对象列表
 * @param rules 处理规则列表
 * @return  规范化的对象列表
 */

const executor = (targets: Partial<object>[], rules: Record<string, Record<string, any>>): any[] => {}

然后书写规则,执行该函数

const rules = {
    delete: {
        '[a,b.n]': true,
        'b.m': (obj) => obj.b.m > 2
    },
    replace: {
        '[c,d.n]': () => [9, 9],
        'd.m': (obj) => obj.a + obj.c
    }
}
const [result] = executor([target], rules)
console.log('处理结果:', result)

规则定义有两种,一种的delete删除,一种是replace替换。

  • delete规则:

    • key表示单变量如'b.m',也可以是用[]中括号括起来的多变量如'[a,b.n]'
    • value值可以是布尔值或者函数(参数为处理的对象),结果是true表示删除,如果是[]中括号括起来的多变量,会批量处理。
  • replace规则:

    • key表示单变量如'd.m',也可以是用[]中括号括起来的多变量如'[c,d.n]'
    • value值可以是某个类型值,或处理函数(参数为处理的对象,如果key为多变量,则需要返回多变量对应的值的数组集合)

三.实现方法

首先,我们要写一个函数,类似如可以将参数路径'd.m'的值为v这个信息,转为一个对象类型{d: {m: v}}

/***
 * converter 将字符串参数路径转为对象
 * @param path 字符串形式的对象参数路径
 * @param val 参数的值
 * @return  对象
 */
const converter = (path: string, val: any) => {
  const keys = path.split(/\.|\[|\]/).filter(i => i)
  const obj: Record<string, any> = {}
  keys.reduce((pre: Record<string, any>, cur: string) => {
    const index = keys.indexOf(cur)
    pre[cur] = index === keys.length - 1 ? val : {}
    if (!Object.keys(obj).length) {
      obj[cur] = pre[cur]
    }
    return pre[cur]
  }, {})
  return obj
}

converter函数主要用reduce实现,converter用法是:

const obj = converter('d.m', 9)
console.log(obj)
// {
//    d: {
//      m: 9
//    }
// }

接下来,重点来了:

import omit from 'lodash/omit'
import merge from 'lodash/merge'

/***
 * executor 根据匹配规则处理对象的执行器
 * @param targets 处理的对象列表
 * @param rules 处理规则列表
 * @return  规范化的对象列表
 */
const executor = (targets: Partial<object>[], rules: Record<string, Record<string, any>>): any[] => {
  const isMultkeys: Function = (k: string): boolean => /^\[.+\,.+\]$/.test(k)
  const isArray: Function = (r: any): boolean => Array.isArray(r)
  const getMultkeys: Function = (k: string): string[] => k.replace(/^\[(.*)\]$/, ($1, $2) => $2).split(',')
  const orders: string[] = ['replace', 'delete'] // 严格控制执行顺序

  return targets.map(target => {
    orders.forEach((method: string) => {
      const params: Record<string, any> = rules[method]
      if (!params) return
      switch (method) {
        case 'delete':
          const keys: string[] = Object.entries(params).reduce((p: string[], [k, v]: any) => {
            v = typeof v === 'function' ? v(target) : v
            if (!v) return p
            if (isMultkeys(k)) {
              let ks = getMultkeys(k)
              ks =
                (isArray(v) &&
                  v.reduce((r: string[], c: boolean, i: number) => {
                    c && r.push(ks[i])
                    return r
                  }, [])) ||
                ks
              p = p.concat(ks)
            } else {
              p.push(k)
            }
            return p
          }, [])
          target = omit(target, keys)
          break
        case 'replace':
          target = Object.entries(params).reduce((p: Record<string, any>, [k, v]: any) => {
            v = typeof v === 'function' ? v(target) : v
            if (isMultkeys(k) && isArray(v)) {
              const ks = getMultkeys(k)
              const o = v.reduce((r: Record<string, any>, c: any, i: number) => {
                r = merge(r, converter(ks[i], c))
                return r
              }, {})
              p = merge(p, o)
            } else {
              p = merge(p, converter(k, v))
            }
            return p
          }, target)
          break
      }
    })

    return target
  })
}

有几个实现注意点:

  • delete和replace都需要对value进行类型判断,如果是函数的话,取函数执行结果。replace还需要额外处理多变量的key-value情况。
  • delete主要是用lodash/omit实现的,比较方便,omit可以这样使用:

    const object = { a: 1, b: {n: 9, m: 9} };
    omit(object, ['a', 'b.n']);
    console.log(object)
    // { b: {m: 9} }
  • replace主要是用lodash/merge实现的,merge好在合并多个对象的时候,如果参数是引用类型的,不会完全被覆盖,如:

    const result = merge({} , {b: {n: 1, m: 2}}, {b: {n: 9}})
    console.log(result)
    // {b: {n: 9, m: 2}}
  • replace处理key值为'd.m'的多路径变量,就是先计算出值,然后使用刚刚实现的converter方法来转化为对象,再将该对象merge到原来的target中。
  • 执行顺序需要控制先replace后delete。

四.总结

  • 在实践中,会发现lodash越来越多这好用的小函数,建议大家有空可以逛逛lodash的文档
  • reduce函数也挺好用的,现在用上瘾了
  • 在处理实际问题的时候,可以多思考怎么处理更好维护,别人一看就明白,定制使用感不错的工具函数,造福大家,哈哈哈哈
1 声望
0 粉丝
0 条评论
推荐阅读
微前端是什么,可以带来什么收益
本文将讲解微前端诞生的背景,详细解说微前端概念的缘由以及其深入理解,读完本文,相信你对微前端有一个比较全面的认知,明白它可以解决您团队以及整个企业什么问题,带来怎么样的收益。

吉古力阅读 2.9k

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青54阅读 7.8k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 5.9k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.1k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木43阅读 7.3k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan43阅读 2.9k评论 14

封面图
1 声望
0 粉丝
宣传栏