js对象根据属性名表达式解析成新的对象

如今有一个对象

var obj = {
  "name": "zhansan",
  "age": 21,
  "parent.name": "lisi",
  "parent.age": 44,
  "girlfriend[0].name": "fanbinbin",
  "girlfriend[0].age": "32",
  "girlfriend[1].name": "gaoyuanyuan",
  "girlfriend[1].age": "32"
}

需实现一个函数 magic ，使magic(obj)结果如下，求解

var obj = {
  "name": "zhansan",
  "age": 21,
  parent: {
    name: "lisi",
    age: 44,
  },
  girlfriend: [
    {name: "fanbinbin", age: 32},
    {name: "gaoyuanyuan", age: 32},
  ]
}

问题引入

在使用react  ant-design做项目的过程中

使用getFiledValues()获取表单所用控件的值时

对于相同的id元素只能拿到一个值

<input id="name"/>

<input id="name"/>

通常通过拼接后缀的方式，提交到后台处理

<input id="name1"/>

<input id="name2"/>

上面方式虽然能达到目的，但总觉得不妥，代码冗余，不易维护

或许可以直接写入表达式，通过某种方式来解析后直接提交给后台

<input id="name[0]"/>

<input id="name[1]"/>

贴上代码，后续再补上注释

function magic(obj) {
  const result = {}, reg = /^(\w+)(?:[`'"]?\[(\w+)\][`'"]?|\.)?((?:\w+|[`'"]?\[\w+\][`'"]?|\.)+)?$/;
  const match = function (key) {
    let group = reg.exec(key)
    if (group) {
      return group
    }
    throw new Error("表达式不正确 " + key)
  }
  const isNum = function (n) {
    return /^\d+$/.test(n)
  }

  function fn(obj, rt) {
    for (let k in obj) {
      let [a,b,c,d] = match(k), v = obj[k];
      if (c && d) {
        fn({[c + d]: v}, rt[b] = rt[b] || (isNum(c) ? [] : {}))
      } else if (c) {
        rt[b] = rt[b] || (isNum(c) ? [] : {})
        rt[b][c] = v
      } else if (d) {
        fn({[d]: v}, rt[b] = rt[b] || {})
      } else {
        rt[b] = v
      }
    }
  }

  fn(obj, result)

  return result;
}