前端常见的处理数据的一些方法

1.对象与数组汇总

   const obj = {
      处理中: 4,
      已提交: 1,
      已采纳: 4,
      未采纳: 1,
    }
    const tabList = [
      {
        label: '全部',
        name: 'name1',
        number: 0,
        id: 1,
      },
      {
        label: '处理中',
        name: 'name2',
        number: 0,
        id: 2,
      },
      {
        label: '已采纳',
        name: 'name3',
        number: 0,
        id: 3,
      },
      {
        label: '未采纳',
        name: 'name4',
        number: 0,
        id: 4,
      },
    ]
    const total = Object.values(obj).reduce((prev, curr) => prev + curr, 0)
    tabList.forEach((item) => {
      if (item.label === '全部') {
        item.number = total
      } else {
        item.number = obj[item.label] ?? 0
      }
    })
    console.log(tabList)

2.数组去重

  const arr = [
      { id: 1001, name: '前端' },
      { id: 1002, name: 'js' },
      { id: 1003, name: 'html' },
      { id: 1002, name: 'js' },
      { id: 1004, name: 'css' },
      { id: 1001, name: 'html' },
    ]
    //根据某个字段出重
    const unique = (arr, val) => {
      const res = new Map()
      return arr.filter((item) => !res.has(item[val]) && res.set(item[val], 1))
    }
    //单纯数组去重
    const uniqueArr = (arr) => [...new Set(arr)]
    //根据数组某个字段并返回这个字段去重
    const uniqueArr2 = (arr, item) => [...new Set(arr.map((it) => it[item]))]

    console.log(uniqueArr(arr))
    console.log(uniqueArr2(arr, 'name'))
    console.log(unique(arr, 'name'))

3.将obj与arr关联使用

    const sendApplyObj = {
      pendingAudit: {
        id: 1,
        name: '待审核',
        color: '#cccccc',
        statusName: 'pendingAudit',
      },
      auditing: {
        id: 2,
        name: '审核中',
        color: '#f0f0ff0',
        statusName: 'auditing',
      },
      handled: {
        id: 3,
        name: '已完成',
        color: '#f5f5f5',
        statusName: 'handled',
      },
      rejected: {
        id: 4,
        name: '已驳回',
        color: '#c0c0c0',
        statusName: 'rejected',
      },
      invalided: {
        id: 5,
        name: '已作废',
        color: '#c5ccc5',
        statusName: 'invalided',
      },
    }
    const t = sendApplyObj.pendingAudit.color
    // const t = Object.entries(sendApplyObj)
    const t2 = Object.values(sendApplyObj)
    t2.forEach((it) => {
      console.log(it)
      console.log(sendApplyObj[it.statusName].color)
    })
    console.log(t)
    console.log(t2)

4.数组扁平化

const goodList = [
      {
        id: 1101,
        goodsAllocationNos: 'L1-A-1101,L1-A-1102,L1-A-1103',
        maxStorage: 6,
        minStorage: 2,
      },
      {
        id: 1102,
        goodsAllocationNos: 'L1-B-1201,L1-B-1203,L1-B-1204',
        maxStorage: 8,
        minStorage: 6,
      },
      {
        id: 1103,
        goodsAllocationNos: null,
        maxStorage: 9,
        minStorage: 6,
      },
    ]
    const _goodsAllocationNos_ = goodList
      .map((it) => {
        let goodsAllocationNo = []
        goodsAllocationNo =
          it.goodsAllocationNos && it.goodsAllocationNos.split(',')
        return (
          goodsAllocationNo &&
          goodsAllocationNo.map((i) => {
            return { ...it, label: i, value: i }
          })
        )
      })
      .filter((i) => i)
      .flat()
    console.log(_goodsAllocationNos_)

5.reduce会累汇总

    const rows = [
      {
        applyDepartmentName: '经济科',
        materialName: '电脑',
        normName: '小',
        applyNum: 1,
        applyAmount: null,
        supplierName: '联想',
        purchaseNum: '',
        receiveNum: 0,
      },
      {
        applyDepartmentName: '医学科',
        materialName: '口罩',
        normName: '中',
        applyNum: 3,
        applyAmount: 960,
        supplierName: 'N95',
        purchaseNum: 0,
        receiveNum: 0,
      },
      {
        applyDepartmentName: '保卫科',
        materialName: '脉冲器',
        normName: '小',
        applyNum: 2,
        applyAmount: 110,
        supplierName: '小米',
        purchaseNum: null,
        receiveNum: 2,
      },
    ]
    //分类汇总rows里面的指标数量
    const resTot = [
      { name: '申请数量', key: 'applyNum', num: 0 },
      { name: '申请金额', key: 'applyAmount', num: 0 },
      { name: '采购数量', key: 'purchaseNum', num: 0 },
      { name: '领用数量', key: 'receiveNum', num: 0 },
    ]
    resTot.map((it) => {it.num = rows.reduce((tot, citem) => tot + (citem[it.key] || 0), 0)})
    console.log(resTot)

6.随机获取一个Boolean值

export function getRandomBoolean() {
  return Math.random() >= 0.5
}

7.随机数组顺序

export  function randomArr(arr) {
  return arr.sort(() => 0.5 - Math.random())
}