javascript - 如何将 <input> "names"存储为对象的属性，然后将匹配的 <input> "value"存储为该对象属性的值？

Question

我希望动态地构建一个对象，其中属性是输入名称，该属性的值将是输入值。

这是 HTML

<form>
                <fieldset>
                    <legend>form</legend>
                    <label>First<input type="text" value="null" name="first"/></label>
                    <label>Last<input type="text" value="null" name="last"/></label>
                    <label>Email<input type="text" value="null" name="email"/></label>

                    <input type="submit" value="submit"/>
                </fieldset>
            </form>

这是我目前使用的 jQuery。
我已将值和名称存储在单独的数组中。有没有一种方法可以创建某种关联数组或创建一个对象，其中属性名称取自一个数组，值取自另一个数组？

        var values = new Array();
    var names = new Array();

    $("form").submit(function(event){
        event.preventDefault();

            values = [];
            names = [];

            $('form input').not('[type="submit"]').each(function(){
            values.push($(this).val());

            });


            $('form input').not('[type="submit"]').each(function(){
            names.push($(this).attr("name"));

            });

    });

我还尝试了 .serializeArray()，它返回一个对象数组。但后来我不知道如何将所有键/值对从该对象中取出并放入一个新对象中。

最终目标是不通过 ajax 发送这些数据，而是发送给聚合数据进行分析的第三方。请帮忙。我自学成才，完全迷失了。哈哈。谢谢

附注

我试过了

$( "form" ).on( "submit", function( event ) {
            event.preventDefault();
            var input = $("form").serializeArray();
            $.each(input, function(i, field){
                console.log(JSON.stringify(input[i]));
            });
        });

但它返回这个

{"name":"first","value":"null"}
{"name":"last","value":"null"}
{"name":"email","value":"null"}

这似乎同样没有帮助。哈哈。

我希望能够得到这样的结果

{
  "first" : "null",
  "last" : "null",
  "email" : "null"
}

Answer 1

我能想到的最简单的方法是使用 serializeArray 然后reduce到一个对象或 map 。例如

$('form').on('submit', e => {
    e.preventDefault();

    let values = $(this).serializeArray().reduce((map, input) => {
        let value;
        if (map.hasOwnProperty(input.name)) {
            value = Array.isArray(map[input.name]) ?
                map[input.name] : [map[input.name]];
            value.push(input.value);
        } else {
            value = input.value;
        }
        map[input.name] = value;
        return map;
    }, {});
})

这处理 <select multiple>和<input type="checkbox">通过将命名值设置为数组来元素。

JSFiddle 演示在这里 ~ https://jsfiddle.net/wmjeh5Lv/1/

---

旧版本

$('form').on('submit', function(e) {
    e.preventDefault();

    var values = $(this).serializeArray().reduce(function(map, input) {
        var value;
        if (map.hasOwnProperty(input.name)) {
            value = Array.isArray(map[input.name]) ?
                map[input.name] : [map[input.name]];
            value.push(input.value);
        } else {
            value = input.value;
        }
        map[input.name] = value;
        return map;
    }, {});
})