如何将后端返回的不定数量input值转换为指定结构的对象数组？

步骤说明 #

1. 提取所有<input>元素的value值，形成数组；
2. 将数组按每3个元素为一组拆分；
3. 每组元素分别对应映射到username、mail、adress三个键，生成目标结构的对象；
4. 所有分组对象最终组成一个数组返回。

JavaScript 实现代码 #

1. 提取所有input的value值

// 获取页面中所有input元素，提取它们的value并组成数组
const inputValues = Array.from(document.querySelectorAll('input')).map(input => input.value.trim());

2. 分组并生成目标对象数组

const contactDetailsList = [];
// 每3个元素为一组遍历处理
for (let i = 0; i < inputValues.length; i += 3) {
    contactDetailsList.push({
        username: inputValues[i] || '',
        mail: inputValues[i + 1] || '',
        adress: inputValues[i + 2] || ''
    });
}

简洁版（使用reduce方法）

const contactDetailsList = inputValues.reduce((result, value, index) => {
    const groupIdx = Math.floor(index / 3);
    // 若当前分组不存在则初始化空对象
    if (!result[groupIdx]) result[groupIdx] = {};
    // 根据索引模3的结果分配对应键值
    switch (index % 3) {
        case 0:
            result[groupIdx].username = value;
            break;
        case 1:
            result[groupIdx].mail = value;
            break;
        case 2:
            result[groupIdx].adress = value;
            break;
    }
    return result;
}, []);

补充说明 #

• 如果最后一组不足3个元素，未匹配到的字段会用空字符串填充，你可以根据需求调整默认值（比如设为null）；
• 代码中使用trim()是为了去除value值前后的空白字符，若不需要该处理可直接删除。

内容的提问来源于stack exchange，提问作者Stanislav Shokarev