无需引入Vue/React 如何将表单输入按键值对获取并生成对象数组

安全阿岳

2026-9-24

实现方案

第一步：改造HTML输入结构

首先给每组键值对套统一容器，输入框加统一类名，不要用id单独绑定：

<!-- 每组键值对用统一类名的容器包裹 -->
<div class="kv-pair">
  <input placeholder="Key1" class="kv-key">
  <input placeholder="Value1" class="kv-value">
</div>
<div class="kv-pair">
  <input placeholder="Key2" class="kv-key">
  <input placeholder="Value2" class="kv-value">
</div>
<div class="kv-pair">
  <input placeholder="Key3" class="kv-key">
  <input placeholder="Value3" class="kv-value">
</div>

<!-- 后续新增按钮结构不需要调整 -->
<button id="add-kv">Add New Key/Value</button>

改造后的结构优势：

所有键值对结构完全统一，和实际数量无关
后续动态新增的键值对只要套用相同结构即可，不需要调整取值逻辑

第二步：通用取值逻辑实现

直接遍历所有kv-pair容器批量取值，自动适配静态和动态新增的字段：

function getKvValues() {
  const values = []
  // 遍历所有键值对组
  $('.kv-pair').each(function() {
    const key = $.trim($(this).find('.kv-key').val())
    const value = $.trim($(this).find('.kv-value').val())
    // 可选：过滤掉key为空的无效项
    if (key) {
      values.push({ key, value })
    }
  })
  return values
}

// 使用时直接调用即可得到目标格式数组
let values = getKvValues()

动态扩展兼容说明

后续开发新增键值对功能时，只要按照对应模板生成DOM插入到列表末尾即可，不需要修改上面的取值逻辑，示例参考：

// 新增键值对示例逻辑
$('#add-kv').click(function() {
  const newPair = `
    <div class="kv-pair">
      <input placeholder="请输入Key" class="kv-key">
      <input placeholder="请输入Value" class="kv-value">
    </div>
  `
  // 插入到现有kv组的末尾
  $(newPair).insertBefore('#add-kv')
})

如果不使用jQuery，用原生JS实现逻辑完全一致，只要把选择器替换为document.querySelectorAll、遍历方法换成普通循环即可。