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;
}