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