对象型数组做精准+模糊匹配

前言

　　通常情况后端返回的数组如果是英文的都是按照abcd这种方式进行排序，此时一般我们自己写或者组件自带的排序算法都是模糊排序，即输入B，会出现B***, **B**，之类，但是如果产品或测试提出前面需要精准排序，之后再模糊排序，就显得有点棘手。

 

 

按序排序+并把符合规则的放到前面

const arr = ['Z1', 'A2', 'B3', 'C4', '2C2', 'H5', 'D6', 'E7', '6K8', '88GC', 'IN', 'INC'];
//如果是这种类型，则直接
let str = "E7";
arr.sort().sort((a, b) => str.includes(b) - str.includes(a));

　　

 

 

const arr2 = [
  {label: 'A2', value: 'A2'},
  {label: 'YA2', value: 'YA2'},
  {label: 'ZA2', value: 'ZA2'},
  {label: 'GG', value: 'GG'},
  {label: 'BD', value: 'BD'},
  {label: 'C6', value: 'C6'},
  {label: '6K8', value: '6K8'},
  {label: 'Z0P', value: 'Z0P'},
  {label: 'P09', value: 'P09'},
  {label: 'E2414', value: 'E2414'},
  {label: 'QXX', value: 'QXX'},
  {label: 'AN2', value: 'AN2'},
  {label: 'MG', value: 'MG'},
  {label: 'CG', value: 'CG'},
  {label: 'C4', value: 'C4'},
  {label: 'CGC', value: 'CGC'},
  {label: 'REF', value: 'REF'},
  {label: 'RELL', value: 'RELL'},
  {label: 'RLL', value: 'RLL'},
];
//如果是这种类型，则直接
let str = "RE";
arr2
.sort((a, b) => a.label.charCodeAt(0) - b.label.charCodeAt(0)).sort((a, b) => str.includes(b.label) - str.includes(a.label))
.sort((a, b) => (b.label.toUpperCase().slice(0, str.length) === str) - (a.label.toUpperCase().slice(0, str.length) === str));

 

 

模糊匹配

// 模糊匹配
arr2.filter(e => e.label.includes(str))

　　

 

 

总结：

　　工作中的筛选往往是排序+模糊匹配+精准匹配符合的内容（非内容全匹配）并将其放到最前面，像我们公司的数据往往上千条，如果用户在用搜索型下拉框时不进行这种操作，体验会非常不好，故优化。