在前端开发中,常使用对象模拟 Map 存储字典数据。本文介绍如何通过遍历对象键值对,根据已知的 Value 反向查找对应的 Key。通过封装通用方法并处理参数校验与比较逻辑,实现高效的数据转换,适用于列表翻译或下拉框选项匹配场景。
在 JavaScript 中获取 Map 的 Key
Object.keys(map)
//获取回来集合大家可以试一下在 JavaScript 中,根据 Map 的 Value 获取对应的 Key
在前端开发实践中,利用对象来保存字典数据是一种常见做法,主要用于列表字段的值翻译或加载下拉框选项。然而,有时业务需求反过来,需要根据字典中的 Value 来获取对应的 Key。由于网络上关于此特定场景的解决方案较少,这里记录一种可行的实现方式。
测试数据准备
paramsMap: {
orderType: {
'0': '咨询',
'1': '投诉',
'2': '举报',
'3': '建议',
'4': '求助',
'5': '表扬',
},
subjectType: {
'LB': '劳保',
'XW': '消委',
'GA': '公安',
'GT': '国土',
'CG': '城管',
'GJJ': '公积金',
'ZH': '综合',
},
},假设页面中涉及两种类型的字典数据,我们可以定义一个名为 paramsMap 的对象来统一保存这些数据。(在实际生产环境中,这些数据通常通过调用后端接口动态加载。)
根据 Key 获取 Value 的标准做法
getParamValue(paramType, code) {
if (!Object.prototype.hasOwnProperty.call(this.paramsMap, paramType)) {
return '参数类型错误';
}
return this.paramsMap[paramType][code];
},在调用获取方法时,需要明确指定参数类型以确保数据准确性。
this.getParamValue('orderType', '1');
核心功能:根据 Value 反向获取 Key
getParamCode(paramType, value, compare = (a, b) => a === b) {
if (!Object.prototype.hasOwnProperty.call(this.paramsMap, paramType)) {
return '参数类型错误';
}
return Object.keys(this.paramsMap[paramType]).find(k => compare(this.paramsMap[paramType][k], value))
}
this.getParamCode('subjectType', '公安');

以上为个人总结的经验分享,希望能为大家提供有价值的参考。如果文章对您有帮助,欢迎支持本站。