js 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', '公安');

二、拓展阅读

• 《Vue进阶》

在前端项目开发过程中，为优化用户体验，可考虑在用户输入查询条件后按回车键实现搜索效果。实现方法如下：

el-input 监听键盘按下状态得用@keyup.enter.native,如果是非el-input 组件，可以直接用@keyup.enter。

<el-input @keyup.enter.native="search" v-model='form.searchAttr' ></el-input>

<input @keyup.enter="search" ></el-input>

在Vue中，已经为常用的按键设置了别名，这样我们就无需再去匹配keyCode，直接使用别名就能监听按键的事件。