js 前端在实际开发中遇到的数据处理

1.计算一个数组的重复数据的次数

function countDuplicates(arr) {
  const frequency = {};
  const duplicates = {};

  //方法一：统计每个元素的频率
  arr.forEach(item=>{
     frequency[item] = frequency[item] ? frequency[item] + 1 : 1;
  })
  //方法二：统计每个元素的频率
  arr.forEach(item => {
    frequency[item] = (frequency[item] || 0) + 1;
  });

  // 找出重复的元素
  for (const key in frequency) {
    if (frequency.hasOwnProperty(key) && frequency[key] > 1) {
      duplicates[key] = frequency[key];
    }
  }

  return duplicates;
}

const arr = [2, 2, 3, 4, 2, 3, 4, 5, 6, 4, 5, 6, 7];
const duplicates = countDuplicates(arr);

console.log(duplicates); //{2：3，3：2，4：3，5：2，6：2}

2.数组去重

//1.使用Set：ES6中的Set是一种无重复值的集合。你可以将数组转换为Set，然后再将其转换回数组。
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // [1, 2, 3, 4, 5]

//2.使用filter和indexOf：使用filter方法和indexOf方法组合，筛选出数组中第一次出现的元素。
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.filter((item, index) => array.indexOf(item) === index);
console.log(uniqueArray); // [1, 2, 3, 4, 5]

3.小数位超过两位，则保留两位小数

// 如果是整数或小数位数不超过两位，则直接返回\小数位数超过两位时保留两位小数
    function formatNumber(number: any) {
      if (!number || Number.isNaN(number)) {
        return number; // 如果输入的不是有效数字，则直接返回
      }
      if (Number.isInteger(number) || number.toFixed(2) === number.toString()) {
        return number.toString(); // 如果是整数或小数位数不超过两位，则直接返回
      }
      return number.toFixed(2); // 小数位数超过两位时保留两位小数
    }

4.多层数组对象，取出指定值的该对象

// 返回 指定数据的对象
 function findObject(obj: any, target: any) {
      if (Array.isArray(obj)) {
        for (let i = 0; i < obj.length; i++) {
          const result: any = findObject(obj[i], target);
          if (result) {
            return result;
          }
        }
      } else if (typeof obj === "object" && obj !== null) {
        for (let key in obj) {
          if (obj[key] === target) {
            return obj;
          }
          const result: any = findObject(obj[key], target);
          if (result) {
            return result;
          }
        }
      }
      return null;
    }
// 示例数据
const data = [
  {
    id: 1,
    name: 'John',
    children: [
      {
        id: 2,
        name: 'Alice',
        children: [
          {
            id: 3,
            name: 'Bob',
          },
        ],
      },
      {
        id: 4,
        name: 'Charlie',
      },
    ],
  },
  {
    id: 5,
    name: 'Dave',
  },
];
const result = findObject(data, 'Bob');
console.log(result);

5.将数组对象根据指定名称分类

 function groupByDate(data: Array<Object>, properties: any) {
      let groupData = new Map();
      data.forEach((item: any) => {
        if (!groupData.has(item[properties])) {
          groupData.set(item[properties], [item]);
        } else {
          groupData.get(item[properties]).push(item);
        }
      });
      return groupData;
    }
let data = [
  {
    calss:'a',
    value:1,
    name:'名'
  },
   {
    calss:'a',
    value:2,
    name:'发'
  },
   {
    calss:'b',
    value:3,
    name:'是'
  },
   {
    calss:'c',
    value:4,
    name:'呃'
  }
]
let arr2 = Array.from(groupByDate(data, "class"));
//结果是：
arr2 = [
  [
    'a',
    [
       {
         calss:'a',
         value:1,
         name:'名'
       },
        {
         calss:'a',
         value:2,
         name:'发'
       },
    ]
  ],
  [
     'b',
    [
       {
         calss:'b',
   			 value:3,
    			name:'是'
       }
    ]
  ],
  [
     'c',
    [
       {
         calss:'c',
         value:4,
         name:'呃'
       }
    ]
  ],
]

6.使用递归处理删除具有空 children 数组的层级

let data = [
  {
    label:'1',
    value:'1',
    children:[
      {
        label:'2',
        value:'2',
        children:[]
      }
    ]
  },
  {
    label:'3',
    value:'3',
    children:[]
  }
]
removeEmptyChildren(arr) {
  arr.forEach((item) => {
    if (item.children && item.children.length > 0) {
      this.removeEmptyChildren(item.children);
    } else {
      delete item.children;
    }
  });
  return arr;
},
let arr = removeEmptyChildren(data)
// 结果是：
arr=[
  {
    label:'1',
    value:'1',
    children:[
      {
        label:'2',
        value:'2',
      }
    ]
  },
  {
    label:'3',
    value:'3',
  }
]