在日常前端开发中，你是不是经常遇到这样的场景：后端返回了一串业务ID（比如订单状态ID、商品分类ID），前端需要转换成对应的中文名称展示；或者用户在下拉框选择了名称，前端需要获取对应的ID传给后端。

如果手动写 if else 或者一个个构建对象映射，不仅代码冗余，后续维护也麻烦（新增映射需要多处修改）。今天就给大家分享一个通用的双向映射工具函数 createBidirectionalMap，轻松解决ID与名称的互查问题，大幅提升开发效率！

一、什么是双向映射？

先简单科普下，双向映射就是建立两组数据之间的相互关联，支持“从A查B”和“从B查A”两种查询方式。

在前端开发中，最常见的就是 ID与名称（或标签）的双向映射：

●正向查询：ID → 名称（如 1 → “已支付”、“A” → “选项A”）

●反向查询：名称 → ID（如 “已支付” → 1、“选项A” → “A”）

有些代码就是实现了功能，没有毛病，但看着总是不爽，且后续使用时如果稍有疏忽就会也Bug

const typeIDMappings ={ 1:'type1',2:'type2',3, 'type3'};const typeNameMappings ={ type1:1,type2:2,type3:3}ID->Name时使用 typeIDMappings['ID'] ,Name->ID 时使用typeNameMappings['Name']如果再新增加一个子项时，两个对象都要增加属性

二、核心工具函数解析

先来看 createBidirectionalMap 的完整代码（带详细注释，可直接复制使用）：

/** * 创建双向映射对象，包含getNameByID和getIDByName方法 * @param {Array<Object>} mappings - 映射关系数组 * @param {string} [key1='id'] - ID键名，默认为'id' * @param {string} [key2='name'] - Name键名，默认为'name' * @returns {Object} 包含getNameByID和getIDByName方法的对象 */const createBidirectionalMap =(mappings, key1 ='id', key2 ='name')=>{// 创建ID到Name的正向映射const idToName = mappings.reduce((acc, item)=>({...acc,[item[key1]]: item[key2]}),{});// 创建Name到ID的反向映射const nameToId = mappings.reduce((acc, item)=>({...acc,[item[key2]]: item[key1]}),{});return{/**     * 根据ID获取Name     * @param {any} id - 要查找的ID     * @returns {any} 对应的Name，如果未找到则返回undefined     */getNameByID:(id)=> idToName[id],/**     * 根据Name获取ID     * @param {any} name - 要查找的Name     * @returns {any} 对应的ID，如果未找到则返回undefined     */getIDByName:(name)=> nameToId[name]};};

核心逻辑说明

1. 参数灵活：支持传入自定义映射数组，还能自定义ID键名（默认id）和名称键名（默认name），适配不同业务场景。

2. 构建单向映射：通过 Array.reduce 方法，分别构建 ID→名称 和 名称→ID 两个单向映射对象（本质是键值对对象，查询效率O(1)）。

3. 暴露查询方法：返回 getNameByID（正向查询）和 getIDByName（反向查询）两个方法，调用简单直观。

4. 容错处理：未找到对应数据时返回 undefined，不会报错，便于前端后续做默认值处理。

三、实战使用场景（全覆盖常见需求）

这个工具函数的实用性极强，下面通过3个示例，覆盖日常开发中90%的双向映射需求，你可以直接参考使用。

示例1：默认键名（id + name）—— 基础业务场景

最常见的场景：映射数组的键名就是 id 和 name，比如订单类型、选项配置等。

// 1. 定义映射关系数组（可从接口获取或本地枚举）const typeMappings =[{ id:1, name:'type1'},{ id:2, name:'type2'},{ id:3, name:'type3'}];const optionMappings =[{ id:1, name:'option1'},{ id:2, name:'option2'},{ id:3, name:'option3'}];// 2. 创建双向映射对象const mapType =createBidirectionalMap(typeMappings);const mapOption =createBidirectionalMap(optionMappings);// 3. 正向查询：ID → 名称console.log(mapType.getNameByID(1));// 输出: type1console.log(mapOption.getNameByID(2));// 输出: option2// 4. 反向查询：名称 → IDconsole.log(mapType.getIDByName('type3'));// 输出: 3console.log(mapOption.getIDByName('option1'));// 输出: 1// 5. 未找到数据时返回undefinedconsole.log(mapType.getNameByID(4));// 输出: undefined

适用场景：下拉框选项、表格列状态展示、弹窗配置项等基础业务场景。

示例2：自定义键名（code + label）—— 适配后端返回格式

很多时候，后端返回的字段不是 id 和 name，而是 code 和 label（或其他自定义字段），这时候只需传入自定义键名即可。

// 1. 自定义键名的映射数组（code + label）const customMappings =[{ code:'A', label:'选项A'},{ code:'B', label:'选项B'},{ code:'C', label:'选项C'}];// 2. 创建映射对象时，指定key1为'code'，key2为'label'const mapCustom =createBidirectionalMap(customMappings,'code','label');// 3. 正向查询：code → label（使用getNameByID方法）console.log(mapCustom.getNameByID('A'));// 输出: 选项Aconsole.log(mapCustom.getNameByID('B'));// 输出: 选项B// 4. 反向查询：label → code（使用getIDByName方法）console.log(mapCustom.getIDByName('选项C'));// 输出: Cconsole.log(mapCustom.getIDByName('选项A'));// 输出: A

适用场景：后端返回自定义字段、前端自定义枚举配置（如地区编码与地区名称、角色编码与角色名称）。

示例3：特殊数据类型 —— 支持数字/字符串任意组合

工具函数不限制ID和名称的数据类型，支持字符串、数字等任意类型的映射，完美适配特殊场景。

// 1. name为数字类型的映射数组const numberNameMappings =[{ id:'red', name:1},{ id:'green', name:2},{ id:'blue', name:3}];// 2. 创建映射对象const mapNumberName =createBidirectionalMap(numberNameMappings);// 3. 正向查询：字符串ID → 数字名称console.log(mapNumberName.getNameByID('red'));// 输出: 1console.log(mapNumberName.getNameByID('green'));// 输出: 2// 4. 反向查询：数字名称 → 字符串IDconsole.log(mapNumberName.getIDByName(3));// 输出: blueconsole.log(mapNumberName.getIDByName(1));// 输出: red

适用场景：颜色编码与数字映射、权限标识与数值映射等特殊业务需求。

四、开发小贴士（避坑+优化）

为了让这个工具函数更好用，给大家分享几个实战避坑点和优化技巧：

1.  确保映射数据唯一性

⚠️ 注意：如果映射数组中存在重复的 key1 或 key2 值，后面的数据会覆盖前面的！

// 错误示例：id=1重复，最终id=1对应的name是'type1_new'const errorMappings =[{ id:1, name:'type1'},{ id:1, name:'type1_new'},{ id:2, name:'type2'}];

建议：维护映射数组时，确保 key1（ID/编码）和 key2（名称/标签）都是唯一的。

2.  自定义未找到数据的默认值

默认未找到数据返回 undefined，你可以根据项目需求修改查询方法，设置默认值：

// 示例：未找到时返回'未知'getNameByID:(id)=> idToName[id]||'未知',getIDByName:(name)=> nameToId[name]||'未知ID'

3.  支持批量查询

如果需要批量查询（如多个ID转换成名称数组），可以基于该工具封装批量方法：

// 批量根据ID获取名称constgetNamesByIDs=(map, ids)=>{return ids.map(id=> map.getNameByID(id)||'未知');};// 使用const ids =[1,2,4];const names =getNamesByIDs(mapType, ids);console.log(names);// 输出: ['type1', 'type2', '未知']

五、总结

这个 createBidirectionalMap 工具函数看似简单，却能解决前端开发中的高频痛点：

1. 减少冗余代码：无需手动编写大量 if else 或重复映射对象，一行代码创建双向映射。

2. 高复用性：支持默认键名、自定义键名、任意数据类型，适配绝大多数业务场景。

3. 易维护：新增/修改映射关系，只需维护映射数组，无需修改查询逻辑。

4. 高效率：基于对象键值对查询，效率为O(1)，性能拉满。

如果你还在为ID与名称的互查而烦恼，不妨把这个工具函数加入你的项目工具库，从此告别手动硬编码，大幅提升开发效率！