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

Posted 2022-10-12 白瑕

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 利用new Set()抽离数组中所有具备相同属性值的对象.相关的知识，希望对你有一定的参考价值。

文章目录

前言
一、前端情况
二、解决方案
总结

前言

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

一、前端情况

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

[
  
    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提取对象, 每种sac对象个数不定.
当时能想到的比较简单的方法就是遍历数组然后用switch(在这种一对多的情况下switch的效率更高)去筛选, 然后将它们分别push到各自的子数组, 但是执行起来简直就是噩梦.
这个大数组长度2800+, 里面有43种sacNam, 也就意味着手写switch43种情况, 代码相当难看, 而且里面有魔术字符串, 出事必找你.

二、解决方案

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

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

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

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

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

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

之后sacArr是一个

Set()[[Entries]]

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

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

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

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

2.遍历筛选

用sac的所有可能, 在原数组里筛选提取

const temArr = [
  [], [], [], [], [], [], ... // 43total
]

原数组.forEach((item) => 
  for (let i = 0; i <= sac可能.length; i++)  // 前面说了sac有43种可能
    if (item.sac === sac可能[i]) 
      temArr[i].push(item);
    
  
)
console.log(temArr);