自定义排序if太臃肿了，还是得用sort

最近有个简单的需求，就是让后端给咱们的 JSON 数据排排队。毕竟，咱们得考虑用户的阅读习惯，不能让他们看着头疼不是，json转转数组就不说了，直接上数组吧

js 复制代码

[
    {"name":"公司注册码","value":"BBHSDFOPEIJSDTH"},
    {"name":"公司名称","value":"公司名称公司名称22"},
    {"name":"联系电话","value":"19999999999"},
    {"name":"备注","value":"未查询到重复报备和撞单情况，可以正常发布"},
    {"name":"公司联系人","value":"小张"},
    {"name":"系统诊断","value":"无异常"},
    ...
]

这里自然不能直接展示需要排序，要符合用户阅读习惯，应该是这样的：
公司名称--》公司注册码--》公司联系人--》联系电话--》备注--》...

需求很简单，用if判断的方式来做的话, 就是创建个空数组，判断name属性放到指定的索引位置，考虑到其它的冗余信息，就依次向后push，那么代码如下，

ini 复制代码

const applyDetailRender = computed(() => {
  let resList = [];
  applyDetailData.value?.forEach((item) => {
    let name = item.name;
    if (name === '公司名称') {
      resList[0] = item;
    } else if (name === '公司注册码') {
      resList[1] = item;
    } else if (name === '公司联系人') {
      resList[2] = item;
    } else if (name === '联系电话') {
      resList[3] = item;
    } else if (name === '备注') {
      resList[4] = item;
    } else if (!resList[4]) {//其它不考虑排序字段，依次后排，要保证在末尾
      resList[4] = item;
    } else {
      resList.push(item);
    }
  });
  return resList;
});

按照需求这样足够了，就算缺少一些键也不影响，稀疏数组也可以正常渲染，不用担心。

但是：代码冗长，如果需要考虑排序的字段过多，那维护起来会很头疼

最好的方式还是用sort排序，sort排序是支持自定义排序规则的，MDN上说：

sort内支持传递一个函数，并自动传递数组的两个参数 ;

根据函数的返回值大小是否大于0来判断排序 ；小于0置前，大于0置后那就简单了，只要控制对比函数的返回值大小就可以

scss 复制代码

// sort会自动传递前后两个对象进来，我们来对比其name
function customSort(a,b){
    // 把name的排序表写好，用作计算
    const order =  { 
        '公司名称': 0, 
        '公司注册码': 1,
        '公司联系人': 2,
        '联系电话': 3,
        '备注': 4,
    }
    // 返回计算值 小于0置前，大于0置后
    return order[a.name] - order[b.name]
}

//用自定义的规则进行sort排序
list.sort(customSort)

再考虑到可能会有些冗余信息，不需要考虑排序，要保证放在最后，customSort函数还需要改造

css 复制代码

function customSort(a,b){
    // 防止0隐式转换 就舍弃0从1开始
    const order =  { 
        '公司名称': 1, 
        '公司注册码': 2,
        '公司联系人': 3,
        '联系电话': 4,
        '备注': 5,
    }
    // order表中不存在的 保证其在排序最后
    return  (order[a.name] || Infinity) - (order[b.name] || Infinity)
}

//用自定义的规则进行sort排序
list.sort(customSort)

完成