前言

本篇文章主要是针对工作中的一些数据处理封装了一个公共方法，避免后期写重复代码。

介绍

首先来介绍一下这个 公共方法 的用途及效果。

假设有这么一个数组：

const arrs = ['adwafda','Addddw','swdA','adawf','sDWW','Addfawf','Afffff'];

需求是：过滤出首字母相同且最多的字符串

最终过滤出来的结果分两种情况：

区分大小写：['Addddw','Addfawf','Afffff']
不区分大小写：['adwafda','Addddw','adawf','Addfawf','Afffff']

封装

思路

既然是一个公共方法，思路就是方法接收 两个参数

参数一：原数组，是个 字符串数组
参数二：是否区分大小写，是个 布尔值

并最终 return 一个数组

开始

首先定义一个方法 filterArrByStartStrMax 接受两个参数 arr 和 isRel

function filterArrByStartStrMax(arr=[],isRel=true){
}

第一步：获取到数组中所有的首字母，如果不区分大小写，则全部转小写，否则原样获取。主要是通过数组的 map方法返回一个由所有首字母组成的数组。

const firstStrArr = arr.map(str => {
  return isRel ? str.charAt(0) : str.charAt(0).toLowerCase();
});

第二步：获取每个首字母出现的次数。定义一个 json 对象，对象的 key 应该是出现过的首字母，对象的 value 应该是出现过的首字母的次数。循环所有的首字母，如果 json 中存在相同的首字母，则让该首字母的 value 值 + 1，否则说明该首字母第一次出现，则 value 就应该是 1。

const obj = {};
for(let i = 0;i<firstStrArr.length;i++){
  obj[firstStrArr[i]] = obj[firstStrArr[i]] ? obj[firstStrArr[i]] + 1 : 1;
}

第三步：获取出现次数最多的字母的次数，这里主要通过 Math.max 方法来取最大值，接受一系列数字，返回最大的数字。

const maxCount = Math.max(...(Object.values(obj)));

第四步：从 json 对象中找到出现次数最多的 首字母，也就是 key，这里通过 Object.entries 来查询。

const maxS = Object.entries(obj).find(e => e[1] === maxCount)[0];

第五步：直接返回原数组的filter方法返回值，如果不区分大小写的话，需要将所有单词都转小写，再去匹配。

return arr.filter(item => {
  if(isRel) item = item.toLowerCase();
  return item.startsWith(maxS);
})

最后，完整的方法如下：

/**
* @param {Array<string>} arr - 原数组
* @param {boolean} isRel - 是否区分大小写
*/
function filterArrByStartStrMax(arr=[],isRel=true){
  const firstStrArr = arr.map(str => {
    return isRel ? str.charAt(0) : str.charAt(0).toLowerCase();
  });
  
  const obj = {};
  for(let i = 0;i<firstStrArr.length;i++){
    obj[firstStrArr[i]] = obj[firstStrArr[i]] ? obj[firstStrArr[i]] + 1 : 1;
  };
  
  const maxCount = Math.max(...(Object.values(obj)));
  
  const maxS = Object.entries(obj).find(e => e[1] === maxCount)[0];
  
  return arr.filter(item => {
    if(!isRel) item = item.toLowerCase();
    return item.startsWith(maxS);
  })
}

让我们来检测一下是否正确：

image.png

默认区分大小写：

image.png

传 false 不区分大小写：

image.png

结语

这个 公共方法 中用到的每一个小方法都可以成为一个 工具函数。如果你觉得哪里还可以优化，欢迎评论区一起讨论，旨在分享更多的 工具代码，避免工作中做很多无用功，为成为合格的 CV工程师 而努力奋斗!

我是 webxue，一名前端攻城狮，但不止于前端，如果有什么好的想法或者有什么好的摸鱼方法，欢迎评论区 share 一下，最后，再次感谢您能看到此处，希望这个工具函数能帮你 解放双手！