如何将HTML input元素的值收集为键值对形式的对象？

给定的HTML input元素如下：

<input name="fruit" id="fruit" value="Orange">
<input name="vegetable" id="vegetable" value="Spinach">
<input name="dairy" id="dairy" value="Eggs">
<input name="bread" id="bread" value="Bread">
<input name="soup" id="soup" value="Soup">

需要提取这些元素的值，生成如下键值对对象：

{
  "fruit": "Orange", 
  "vegetable": "Spinach", 
  "dairy": "Eggs", 
  "bread": "Bread", 
  "soup": "Soup"
}

你当前的实现通过拼接JSON字符串再解析的方式，不仅冗余还存在潜在bug，下面提供两种更高效简洁的写法：

方案1：Array.from + reduce（兼容性友好） #

const inputs = document.getElementsByTagName('input');
const result = Array.from(inputs).reduce((obj, input) => {
  obj[input.id] = input.value;
  return obj;
}, {});
console.log(result);

优势：把getElementsByTagName返回的HTMLCollection转为数组后，用reduce逐步构建目标对象，逻辑直观，兼容绝大多数现代浏览器，没有额外的解析开销。

方案2：Object.fromEntries + map（代码最紧凑） #

const inputs = document.getElementsByTagName('input');
const result = Object.fromEntries(
  Array.from(inputs).map(input => [input.id, input.value])
);
console.log(result);

优势：Object.fromEntries可以直接将键值对数组转换为对象，搭配map快速生成键值对数组，代码简洁到几乎一行搞定，适合支持ES2019及以上的环境。

原代码的核心问题 #

• 性能冗余：没必要绕弯子拼接字符串再做JSON解析，直接操作对象的效率高得多
• 稳定性风险：如果input的value里包含双引号、反斜杠这类特殊字符，会直接破坏JSON格式，导致JSON.parse抛出错误

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