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函数也挺好用的,现在用上瘾了
  • 在处理实际问题的时候,可以多思考怎么处理更好维护,别人一看就明白,定制使用感不错的工具函数,造福大家,哈哈哈哈
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,163评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,301评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,089评论 0 352
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,093评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,110评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,079评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,005评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,840评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,278评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,497评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,667评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,394评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,980评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,628评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,649评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,548评论 2 352