素材牛VIP会员
下面的代码怎么写才会显得高端大气上档次?
 逸***S  分类:JavaScript  人气:1102  回帖:6  发布于6年前 收藏
接口中性别字段为int型, 范围为0-2, 顺手写了这样的函数:
    getSex(val) {
      var sex = "保密";
      if (val == 1) {
        sex = "男";
      } else if (val == 2) {
        sex = "女";
      }
      return sex;
    }
用在获取数据后处理性别:
      vm.$http.post(vm.apiUrl, vm.parameter).then(response => {
        if (response.data.errno == 0) {
          for (var item of response.data.data) {
          
            item.sex = vm.getSex(item.sex); //将性别过滤
            
          }
          vm.listData = response.data.data;
          vm.list_count = parseInt(response.data.count);
        }
        vm.loading = false;
      });
被同事看到了,说这样写太low (╯-_-)╯╧╧

所以,该怎样改写才能显得高端大气上档次?

    ╮(╯_╰)╭  
 标签:javascript

讨论这个帖子(6)垃圾回帖将一律封号处理……

Lv3 码奴
销***表 PHP开发工程师 6年前#1

这样试试,上面那个函数都不用了,直接用过滤:

 vm.$http.post(vm.apiUrl, vm.parameter).then(response => {
    if (response.data.errno == 0) {
        var sexStr = ["保密","男","女"];
        response.data.data.filter(item => sexStr[item.sex]); //记住保证返回值的类型为数字类型,刚好对应性别数组的下标
        vm.listData = response.data.data;
        vm.list_count = parseInt(response.data.count);
    }
    vm.loading = false;
  });
Lv3 码奴
18***30 Linux系统工程师 6年前#2

用的vue吗,那为什么不在绑定数据的时候做处理

<div v-for="item in listData">
    {{item.sex === 0 ? '保密' : item.sex === 1 ? '男' : '女'}}
</div>

或者自己写个过滤器

Lv4 码徒
蝶***7 UI设计师 6年前#3
getSex(val) {return ["保密","男","女"][val%3];}
response.data.data = response.data.data.map(item=>{...item, ...{sex: vm.getSex(item.sex)}}
Lv6 码匠
阿***灯 页面重构设计 6年前#4

先说你的getSex函数,这种情况用if..else确实比较low,现在的性别多得很,facebook有56种性别选项,那你一个个if...else写着走嘛,万一要改、要加也麻烦,代码也一大坨,别人根本看不懂你的代码,这时候,可以用

表驱动法代替条件查找

const sexMap = {
    0: '保密'
    1: '男性',
    2: '女性'
}

const getSex = val => {
    let key = String(val)
    return sexMap[val]
}

这样的好处有

  1. 你修改、添加性别时不用改动代码,直接改动sexMap就行了
  2. sexMap可以单独写在一个配置文件中,使用的时候引入,工程结构清晰,便于管理
  3. 用配置取代了细节

getSex做的更完善还要包括输入验证,错误处理等,你自己去完善细节

你后面的代码要写的“高大上”一些也可以,就是写的抽象程度更高一点,大概是这样

vm.$http.post(vm.apiUrl, vm.parameter).then( response => {
    验证输入// 1行
    数据获取// 1行
    控制视图// 1行
})
Lv5 码农
简***兽 Web前端工程师 6年前#5
return val === 0 ? '基佬受' : (val === 1 ? '男' : '女');

非歧视,玩笑而已,敏感随意。

Lv3 码奴
被***师 学生 6年前#6
    getSex(val) {
        return ["保密", "男", "女"][val];
    }
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取