本文介绍如何将并行的 keys 和 values 数组合并为一个结构化对象，从而在 JavaScript 模板字面量中直接使用语义化属性名（如 ${obj.Fruit}），替代易错且难维护的数组索引访问（如 ${values[0]}）。
本文介绍如何将并行的 keys 和 values 数组合并为一个结构化对象，从而在 javascript 模板字面量中直接使用语义化属性名（如 `${obj.fruit}`），替代易错且难维护的数组索引访问（如 `${values[0]}`）。
在实际开发中，尤其是处理 API 返回的扁平化数据时，我们常遇到两个长度一致、顺序对应的数组：一个存储字段名（keys），另一个存储对应值（values）。虽然可通过下标硬编码访问（如 values[0]），但这种方式缺乏语义、难以维护，且一旦数组长度或顺序变化极易引发静默错误。
更健壮、可读性更高的做法是将二者组合为一个普通对象，使每个 key 成为对象的属性名，对应 value 作为其值。ES2019 引入的 Object.fromEntries() 配合 Array.prototype.map() 是实现该映射最简洁、标准的方式：
const values = ['Banana', 'Yellow', 'Columbia'];
const keys = ['Fruit', 'Color', 'Producer'];
// 将 keys 和 values 合并为 { Fruit: 'Banana', Color: 'Yellow', Producer: 'Columbia' }
const data = Object.fromEntries(
keys.map((key, index) => [key, values[index]])
);
function getRow(obj) {
return `The <b>${obj.Fruit}</b> you are eating
is ${obj.Color} and was produced in ${obj.Producer}`;
}
console.log(getRow(data));
// 输出：The <b>Banana</b> you are eating
// is Yellow and was produced in Columbia✅ 优势说明：
- 语义清晰：obj.Fruit 明确表达业务含义，无需注释解释 values[0] 是什么；
- 类型友好：配合 TypeScript 可定义精确接口（如 interface Product { Fruit: string; Color: string; Producer: string; }），获得完整类型检查；
- 安全可控：若某 key 缺失（如 obj.Taste），结果为 undefined，易于调试；而动态创建全局变量（如 eval 或 with）存在严重安全与作用域风险，应绝对避免；
- 可扩展性强：后续新增字段只需同步追加 keys 和 values 元素，模板逻辑无需修改。
⚠️ 注意事项：
- 确保 keys.length === values.length，否则多余 key 对应 undefined，缺失 key 将被忽略；生产环境建议添加校验：
if (keys.length !== values.length) { throw new Error(`Keys and values array length mismatch: ${keys.length} ≠ ${values.length}`); } - 模板中仍需显式引用 obj.xxx —— JavaScript 不支持真正的“动态变量名注入”（如 ${Fruit} 而非 ${obj.Fruit}），这是语言设计的安全约束，而非缺陷；试图绕过此限制（如 eval、Function 构造函数或 with 语句）会引入 XSS 风险、破坏严格模式，并导致调试困难，强烈不推荐。
总结：用 Object.fromEntries(keys.map(...)) 构建映射对象，是连接结构化键名与原始数据的轻量、标准、安全方案。它让模板字面量从“位置依赖”升级为“语义驱动”，显著提升代码可读性、可维护性与协作效率。
