JS数组对象中有相同值的数据拿出相同的对象重组

Posted 2023-04-30

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS数组对象中有相同值的数据拿出相同的对象重组相关的知识，希望对你有一定的参考价值。

参考技术A const List = ["end_date":"2022-02-10","end_seconds":1644488295.0,"end_total_seconds":0,"first_heart_beat_time":"2022-02-10 18:08:34","id":10319,"last_heart_beat_time":"2022-02-10 18:18:15","scanner_id":167,"start_date":"2022-02-10","start_seconds":1644487714.0,"start_total_seconds":581,"end_date":"2022-02-11","end_seconds":1644550497.0,"end_total_seconds":0,"first_heart_beat_time":"2022-02-11 11:19:08","id":10338,"last_heart_beat_time":"2022-02-11 11:34:57","scanner_id":167,"start_date":"2022-02-11","start_seconds":1644549548.0,"start_total_seconds":949,"end_date":"2022-02-11","end_seconds":1644558220.0,"end_total_seconds":0,"first_heart_beat_time":"2022-02-11 11:48:41","id":10339,"last_heart_beat_time":"2022-02-11 13:43:40","scanner_id":167,"start_date":"2022-02-11","start_seconds":1644551321.0,"start_total_seconds":6899,"end_date":"2022-02-11","end_seconds":1644558820.0,"end_total_seconds":0,"first_heart_beat_time":"2022-02-11 13:53:40","id":10343,"last_heart_beat_time":"2022-02-11 13:53:40","scanner_id":167,"start_date":"2022-02-11","start_seconds":1644558820.0,"start_total_seconds":0,"end_date":"2022-02-11","end_seconds":1644563620.0,"end_total_seconds":0,"first_heart_beat_time":"2022-02-11 14:03:41","id":10344,"last_heart_beat_time":"2022-02-11 15:13:40","scanner_id":167,"start_date":"2022-02-11","start_seconds":1644559421.0,"start_total_seconds":4199,"end_date":"2022-02-11","end_seconds":1644586551.0,"end_total_seconds":0,"first_heart_beat_time":"2022-02-11 15:55:51","id":10350,"last_heart_beat_time":"2022-02-11 21:35:51","scanner_id":167,"start_date":"2022-02-11","start_seconds":1644566151.0,"start_total_seconds":20400,"end_date":"2022-02-13","end_seconds":1644759468.0,"end_total_seconds":0,"first_heart_beat_time":"2022-02-13 14:47:48","id":10410,"last_heart_beat_time":"2022-02-13 21:37:48","scanner_id":167,"start_date":"2022-02-13","start_seconds":1644734868.0,"start_total_seconds":24600,"end_date":"2022-02-14","end_seconds":1644846304.0,"end_total_seconds":0,"first_heart_beat_time":"2022-02-14 10:15:05","id":10430,"last_heart_beat_time":"2022-02-14 21:45:04","scanner_id":167,"start_date":"2022-02-14","start_seconds":1644804905.0,"start_total_seconds":41399,"end_date":"2022-02-15","end_seconds":1644911999.0,"end_total_seconds":0,"first_heart_beat_time":"2022-02-15 15:30:00","id":10468,"last_heart_beat_time":"2022-02-15 15:59:59","scanner_id":167,"start_date":"2022-02-15","start_seconds":1644910200.0,"start_total_seconds":1799,"end_date":"2022-02-15","end_seconds":1644932084.0,"end_total_seconds":0,"first_heart_beat_time":"2022-02-15 19:44:44","id":10472,"last_heart_beat_time":"2022-02-15 21:34:44","scanner_id":167,"start_date":"2022-02-15","start_seconds":1644925484.0,"start_total_seconds":6600,"end_date":"2022-02-16","end_seconds":1645020217.0,"end_total_seconds":0,"first_heart_beat_time":"2022-02-16 15:13:37","id":10491,"last_heart_beat_time":"2022-02-16 22:03:37","scanner_id":167,"start_date":"2022-02-16","start_seconds":1644995617.0,"start_total_seconds":24600,"end_date":"2022-02-17","end_seconds":1645089245.0,"end_total_seconds":0,"first_heart_beat_time":"2022-02-17 14:59:06","id":10521,"last_heart_beat_time":"2022-02-17 17:14:05","scanner_id":167,"start_date":"2022-02-17","start_seconds":1645081146.0,"start_total_seconds":8099]

const newArray = []

List.forEach(item =>

// 第一次循环,repeat定义repet,基于find浅拷贝特性,操作repeat会影响到newArray

// 循环开始,find的条件不成立,就会push一个新对象data: item.start_date,times: [item]进去

// 检索条件要注意,find的核对条件需要准确

// 第二次循环,find条件成立,则走else

const repeat = newArray.find(res => res.data === item.start_date)

if (!repeat)

newArray.push(

data: item.start_date,

times: [item]

)

else

// 避免循环紊乱,不用item.times.push(item),选用repeat.times.push(item)

repeat.times.push(item)

)

打印数据后可以看到，已经将数据成功照相同时间的start_date重新管理

如果前端需要解决时间归类当天的用户多部操作但是后端没处理，就可以用forEach+find的方法处理

JavaScript 利用new Set()抽离数组中所有具备相同属性值的对象.

前言

提取JS数组中所有具备相同属性的对象构成数组, JS提取数组相同属性对象, new Set() 数组去重.

一、前端情况

我今天才了解到它, 我在尝试将数组中所有具备相同属性值的对象抽离进多个数组时犯了难:

const rawArr = [
  
    sacNam: '总计',
    sacNamKo: 'xxx'
    trxAmt0: '',
    trxAmt1: '',
    trxAmt2: '',
    trxAmt3: '',
    trxAmt4: '',
  ,
  
    sacNam: '合计',
    sacNamKo: 'xxx'
    trxAmt0: '',
    trxAmt1: '',
    trxAmt2: '',
    trxAmt3: '',
    trxAmt4: '',
  ,
  
    sacNam: '小计',
    sacNamKo: 'xxx'
    trxAmt0: '',
    trxAmt1: '',
    trxAmt2: '',
    trxAmt3: '',
    trxAmt4: '',
  ,
  
    sacNam: '总计',
    sacNamKo: 'xxx'
    trxAmt0: '',
    trxAmt1: '',
    trxAmt2: '',
    trxAmt3: '',
    trxAmt4: '',
  ,
  ...
]

如上, 根据sacNam提取对象, 子对象个数不定.

当时能想到的比较简单的方法就是遍历数组然后用switch(在这种一对多的情况下switch的效率更高)去筛选, 然后将它们分别push到各自的子数组, 但是执行起来简直就是噩梦.

这个大数组长度2800+, 里面有43种sacNam, 也就意味着手写switch43种情况, 代码相当难看, 而且里面有魔术字符串, 出事必找你.

二、解决方案

1.提取所有对象的目标属性

得先拿到sacNam的所有可能.
也就是提取sacNam属性啦…遍历push一下就好, 不多说, 完成之后基本是这样:

[
  '总计',
  '总计',
  '总计',
  '小计',
  '小计',
  '小计',
  '小计',
  '组1',
  '组1',
  '组1',
  ...
]

去重之后就是sacNam的所有可能.

2. `new Set()` 处理简单数组_去重

// temArr即上面实例数据结构
const sacMay = new Set(temArr)

之后sacArr是一个

Set()[[Entries]]

对象, 这个东西是不能直接用的, 需要Array.from()转数组: Array.from()
也就是这样写:

const sacMay = Array.from(new Set(temArr))

然后得到去重之后的sac所有可能:

[
  '总计',
  '小计',
  '组1',
  ...
]

3.遍历筛选

用sacNam的所有可能, 在原数组里筛选提取.
纯粹forEach方案:

const temArr = []
sacMay.forEach((may, index) =>  
// sacMay完全可以放在里面, 但是放里面意味着你要手动往temArr里写43个子数组.
  temArr.push([])
  rawArr.forEach((item) =>  
  // 用sacMay元素比对原数组的每一个子对象
    if (item.sacNam === may) 
      temArr[index].push(item);
    
  )
)
console.log(temArr);

filter方案:

const temArr = []
sacMay.forEach((may, index) => 
  const temArr2 = rawArr.filter((item) => 
    return item.sacNam === may
  )
  temArr1.push(temArr2);
)
console.log(temArr1);