【前端开发技巧】Javascript对一维数组进行分组和函数封装

前言：今天遇到一个需求，就是对某个标签数组进行分组，这是个常规需求，对于老司机来说，这不是基操吗？

来个数组吧！

let classArr = [
    {name: '皮卡丘', groupNo: '外国动漫'},
    {name: '哪吒', groupNo: '中国动漫'},
    {name: '西游记', groupNo: '中国动漫'},
    {name: '悟空传', groupNo: '中国动漫'},
    {name: '小小英雄', groupNo: '中国动漫'},
    {name: '小蝌蚪找妈妈', groupNo: '中国动漫'},
    {name: '大闹天宫', groupNo: '中国动漫'},
    {name: '吉利鼠', groupNo: '外国动漫'},
    {name: '汤姆猫', groupNo: '外国动漫'},
    {name: '芭比娃娃', groupNo: '外国动漫'},
    {name: '芭比娃娃', groupNo: '外国动漫'},
    {name: '奥特曼', groupNo: '外国动漫'},
    {name: '鬼灭之刃', groupNo: '外国动漫'},
];
复制代码

起名字太难了。。

分个组吧！

对于常规的分组需求，我们都能在数组对象中找到规律，这个应该难不倒老司机们吧！

如上，我们可以清楚的看到每一个item中ground就是我们分组辨别区分对象。

那就这么来：

• 第一步，我们new一个对象出来，用于存储分组最后的结果

    let fixArr = {};
复制代码

• 第二步，我们创建一个functionfixFunc用来处理我们的分组

    fixFunc() {};
复制代码

• 第三步，我们用 classArr 中每个item中的ground作为我们fixArr中每个item的key

之所以这么做，是为了方便我们在遍历classArr的时候拿到的item，直接拿其groupNo去对象中比对是否已经存在其分组。

fixFunc(itemObj) {
  if (!itemObj) return; // 如果classArr为空时，直接退出
  const n = itemObj.groupNo; // 拿到groupNo作为fixArr的key
  let box = [itemObj];
  this.fixArr[n] = box; // 把传入的item先添入fixArr中去
  
  for (const item of this.classArr) { // 循环classArr，拿到每个item
    if (Object.prototype.hasOwnProperty.call(this.fixArr, item.groupNo)) { // 判断是否存在该item的组
      const n = item.groupNo;
      const i = this.fixLabelArr[n].indexOf(item); // 判断该item是否存在组中
      if (i < 0) { // 不存在才添加进组中
        this.fixArr[n].push(item);
      }
    } else {
      this.fixFunc(item); // 如果这个item的groupNo不存在于fixArr的时候，我们递归调用fixFunc方法
    }
  }
}
复制代码

• 第四步，我们测试一下呗

嗯哼，真香！

总结一下吧！

我们在上面的fixFunc方法中，使用了一下递归，在我们日常开发中，递归是十分常用的算法。
有时候，遇到无法想通的问题，我们也许换个思路就会有新的发现，所以，代码写累了，我们来掘金写个文章，出来放放风，回来bug就解决了呢？哈哈哈?

bug，你已经长大了，你应该学会自我修复?

以上就是本次与大家分享的内容，感谢各位品读，记得点赞?哦！

每天进步一点点，我是Asscre。请关注我哦！我们下回见。

祝自己生日快乐。