使用数组forEach方法两行代码动态填充对象值至对应输入框

我有一个包含多组键值对的对象createNewBill，希望将对象的值填入与键对应的输入框中。要求使用数组的forEach方法，通过两行代码实现通用的动态逻辑，而非当前这种非动态、不可扩展的写法。

我的对象：

const createNewBill = {
  type: "Hôtel et logement",
  name: "bill test",
  date: "2020-04-08",
  amount: 130,
  pct: 25,
  file: 'hotel.jpg'
}

我目前的写法（非动态、不可扩展）：

document.getByTestId("expense-type").value = createNewBill.type
document.getByTestId("expense-name").value = createNewBill.name
document.getByTestId("datepicker").value = createNewBill.datepicker // 注：此处应为createNewBill.date，属于笔误
document.getByTestId("amount").value = createNewBill.amount
document.getByTestId("pct").value = createNewBill.pct
document.getByTestId("file").value = createNewBill.file 

实现方案 #

通过Object.entries()将对象转换为键值对数组，配合forEach遍历实现动态批量赋值。先定义对象键与输入框testId的映射关系（处理特殊命名的对应），再执行赋值逻辑：

const keyToTestId = { type: 'expense-type', name: 'expense-name', date: 'datepicker', amount: 'amount', pct: 'pct', file: 'file' };
Object.entries(createNewBill).forEach(([key, value]) => document.getByTestId(keyToTestId[key]).value = value);

后续新增键值对时，只需在keyToTestId中补充对应关系即可，无需修改赋值逻辑，完全实现可扩展的动态填充。

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