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

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

技术杂谈小彩虹2021-07-18 16:32:5470A+A-

一.要解决的问题

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

比如:

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函数也挺好用的,现在用上瘾了
  • 在处理实际问题的时候,可以多思考怎么处理更好维护,别人一看就明白,定制使用感不错的工具函数,造福大家,哈哈哈哈


点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们