javascript - 从字符串解析为对象路径

Question

假设我有一个表单，我想检查表单中声明了哪些输入，所以我执行如下操作:

let inputs = {};

['first_name', 'last_name', ...].forEach(name => {
    let input = document.querySelector(`input[name="${name}"]`);

    if (input !== undefined)
        inputs = Object.assign(inputs, {[input.getAttribute('name')]: input.value});
}

在这种情况下，到目前为止一切顺利。

但是如果有一些名为 ['name.first', 'name.last'] 的输入怎么办？然后，它将数据存储到这样的对象中:

{name.first: '...', name.last: '...'}.

而不是这样:(这是我想要的结果)

{
    name: {
        first: '...',
        last: '...'
    }
}

如何告诉 JavaScript 将其解析为对象路径而不是键字符串？

Answer 1

我会使用自定义分配函数。

对象可以使用任何字符串作为键，因此“a.b”是有效的。

这是分配函数的示例:

function assign(obj, key, value) {
    let keys = key.split(".");
    let last = keys.pop();
    keys.forEach(key => {
        if(!obj[key])
            obj[key] = {};
        obj = obj[key];
    });

    obj[last] = value;
}

let obj = {};
assign(obj, "name.first", "hey");
assign(obj, "name.last", "bye");

console.log(obj);

额外推荐:如果您对所有表单使用相同的格式，则可以将其用作全局表​​单处理程序。

function formHandler(form) {
    let obj = {};
    form.querySelectorAll("input, select").forEach(elem => assign(obj, elem.name, elem.value));
    return obj;
}