ES6下批量获取多个DOM选择器值生成对象的简洁实现方案

实现方案 #

方案1：使用Array.reduce一次性生成目标对象（最推荐，冗余度最低） #

把需要采集的字段名统一存入数组，通过reduce遍历自动完成取值和对象构建，后续新增字段只需更新数组即可：

const collectFields = ['name', 'city', 'duration', 'employerName', 'phoneNumber', 'summary']
const values = collectFields.reduce((result, field) => {
  result[field] = document.querySelector(`#${field}`).value
  return result
}, {})

方案2：如果需要单独使用每个字段变量，搭配解构赋值+ES6对象属性简写 #

如果业务中需要单独调用每个字段的值，可以用map批量取值后解构，再利用ES6同名属性简写省略键值重复书写：

const [name, city, duration, employerName, phoneNumber, summary] = 
  ['name', 'city', 'duration', 'employerName', 'phoneNumber', 'summary']
  .map(field => document.querySelector(`#${field}`).value)

// ES6对象属性简写，键名和变量名一致时可省略冒号和值
const values = { name, city, duration, employerName, phoneNumber, summary }

方案3：表单场景直接用FormAPI（更符合最佳实践） #

如果所有输入控件都在同一个<form>标签内，且控件的name属性和你需要的对象键名一致，可以直接用原生FormData，完全不用手动列字段：

// 假设你的表单id为myForm
const form = document.querySelector('#myForm')
const formData = new FormData(form)
// 直接转换为普通对象
const values = Object.fromEntries(formData.entries())

内容的提问来源于stack exchange，提问作者Jose Francisco Chavez Carreon