vue 过滤器之根据不同的类型渲染不同的字段

本文旨在分享如何利用vue过滤器，实现简单、高效的对同一个字段不同的字段值，渲染出不同的内容。
实际场景中我们可能会遇到后端在传给我们的数据中，某一个字段为type，type的值有1、2、3、4、5、6等，
1-6分别对应的是，苹果、梨、葡萄、芒果、香蕉、百香果。如何通过写最少的代码就能实现将他们一一对应起来呢？下面将一一介绍：

<ul>
 <li v-for="(d,index) in value" :key="index">
    {{d.type| filterType}}
  </li>
 </ul>

首先最初级的做法就是：在拿到数据后我们可能会用if/else来判断，如下所示：

  filters: {
    filterType: function(val) {
      // 1、苹果 2、梨 3、葡萄 4、芒果 5、香蕉 6、百香果
      if (val ==== 1) {
        return '苹果'
      } else if (val ==== 2) {
        return '梨'
      } else if (val ==== 3) {
        return '葡萄'
      } else if (val === 4) {
        return '芒果'
      } else if (val === 5) {
        return '香蕉'
      } else if (val === 6) {
        return '百香果'
      } else {
        return '未知类型'
      }
    }
  }

这种写法是可以实现需求的，但是随着type的值逐渐增多，else if 的代码块会越来越臃肿，这种写法带来的后果就是可读性越来越差，且写法也不优雅，如何优化这点呢？我们可以使用switch：

  filters: {
    filterType: function(val) {
      // 1、苹果 2、梨 3、葡萄 4、芒果 5、香蕉 6、百香果
      switch (val) {
        case 1:
          return '苹果'
          break;
        case 2:
          return '梨'
          break;
        case 3:
          return '葡萄'
          break;
        case 4:
          return '芒果'
          break;
        case 5:
          return '香蕉'
          break;
        case 6:
          return '百香果'
          break;
        default:
          return '未知类型'
      }
    }
  }

这样写比if/else 的写法可读性提高了不少，但是代码量还是挺多的，一个小功能用了这么多代码，实在是不能忍受，那怎么减少代码量呢？请往下看。。

filters: {
 filterType: function(val) {
    // 1、苹果 2、梨 3、葡萄 4、芒果 5、香蕉 6、百香果
    var typeArr = ['苹果', '梨' , '葡萄', '芒果', '香蕉', '百香果'];
    return typeArr[val-1];
  }
}

我们可以把存在的类型值放在数组里面，通过传入的type作为数组的下表，即可取到对应的值。这里要特别要提示一下，若type的值是从1开始，那传入的val就要减一，数组的下标是从0开始。
可以看到，这样写我们的确是少写了很多代码，但是有个问题，上面的方法只适用于1-n这种有顺序的正整数类型，假如type为-1，1，2，3，23 这种无序的情况就不适用了，怎么解决呢？且看下面

filters: {
  filterType: function(val) {
    // -1、苹果 2、梨 6、葡萄 8、芒果 13、香蕉 156、百香果
    let typeArr = [{"-1": "苹果"},{"2": "梨"},{"6": "葡萄"},{"8": "芒果"},{"13": "香蕉"},{"156": "百香果"}];
    let result = originTypeArr.filter((item) => Object.keys(item)[0] == row.type);
	return result.length > 0 ? result[0][row.type] : '未知类型';
  }
}

上面这个写法将type值作为对象的键值，通过filtes和Object.keys拿到数组中所有的键值，判断传入的val 是否和遍历的key值相等，来取到对应的value值

最后两种方法具体使用看具体场景，若是连续的正整数，可以直接使用第二种方法，若是需要扩展性强的，直接使用最后一种。

如有更好的写法，欢迎交流！！