如何统计后端返回数组对象中重复项的出现次数?

如何统计后端返回数组对象中重复项的出现次数?

后端返回数组对象的重复项统计

在处理后端返回的数据时,前端常常需要根据某个字段对数据进行去重处理,并统计重复出现的次数。

举个例子,假如后端返回的数组对象中包含一个叫做 “NO” 的字段,我们可以按以下步骤来统计重复数据项:

遍历后端返回的数组对象,将其转化为一个新的数组,其中每个元素是一个对象,包含 “NO” 字段的值和一个初始的计数为 1。对新的数组进行 reduce 操作,将相同的 “NO” 值的元素合并到一个对象中,同时将它们的计数累加。最后,在页面上渲染新数组,其中每个元素都包含原始字段和新增的 “重复次数” 字段。

下面是一个示例代码,展示了如何实现这一过程:

let list = [    {        DF:343,        Fstep: 0.2,        NO:1004    },    {        DF:344,        Fstep: 0.2,        NO:1005    },    {        DF:345,        Fstep: 0.2,        NO:1004    },    {        DF:346,        Fstep: 0.2,        NO:1004    },    {        DF:347,        Fstep: 0.2,        NO:1006    },    {        DF:348,        Fstep: 0.2,        NO:1005    }];let newArr = [], list1 = [], i = 0;let timer = setInterval(() => {    if(i === list.length) {      clearInterval(timer);      return;    }    // 模拟每3s后端返回一条数据    list1 = [list[i]];    i++;    fn(list1);}, 3000);function fn (arr) {    newArr = arr.reduce((s, v) => {        let index = s.findIndex(it => it.NO === v.NO);        index !== -1  ? s[index] = {...v, startTime: s[index].startTime,        endTime: getNowDate(), count: ++s[index].count} : s.push({...v, count: 1, startTime: getNowDate(), endTime: getNowDate()});        return s;    }, newArr);    console.log(newArr);}// 格式化日对象const getNowDate = () => {  var date = new Date();  var sign2 = ":";  var year = date.getFullYear() // 年  var month = date.getMonth() + 1; // 月  var day = date.getDate(); // 日  var hour = date.getHours(); // 时  var minutes = date.getMinutes(); // 分  var seconds = date.getSeconds() //秒  var weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];  var week = weekArr[date.getDay()];  // 给一位数的数据前面加 “0”  if (month >= 1 && month = 0 && day = 0 && hour = 0 && minutes = 0 && seconds <= 9) {    seconds = "0" + seconds;  }  return year + "-" + month + "-" + day + " " + hour + sign2 + minutes + sign2 + seconds;};

以上就是如何统计后端返回数组对象中重复项的出现次数?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1557431.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月22日 02:55:20
下一篇 2025年12月22日 02:55:28

相关推荐

  • 谷歌浏览器与火狐浏览器目录树渲染差异:为何重命名文件后目录树会左移?

    谷歌浏览器和火狐浏览器渲染差异:目录树左移之谜 在谷歌浏览器中使用 WEB IDE 时,重命名文件总会令目录树左移,缩进空白消失。开发者工具发现,目录树元素被设置了 margin-right: -17px。但正常情况下,这不是应该设置 margin-left: -17px 才具有的表现吗? 然而,在…

    好文分享 2025年12月22日
    000
  • 如何使用 CSS 为 “ 标签元素设置特定样式?

    如何创建特定样式? 问题:如何使用 CSS 创建 标签元素? 答案:以下是仅供参考的解决方案: 采用 Flexbox 布局:创建包含文本内容的大盒子,使用 flex 属性为其设置布局模式。 包裹图片的小盒子:为包裹图片的小盒子设置以下属性: flex-shrink: 0;flex-grow: 0;调…

    2025年12月22日
    000
  • 如何使用 Highlight.js 在 HTML 代码块中添加行号?

    如何在向 html 源代码添加行号时,使用 highlight.js 使用 Highlight.js 能够让你给代码块添加行号,但你需要执行一些额外步骤。 正确的方法: 将以下样式添加到你的 标签中: pre { position: relative; margin-bottom: 24px; bo…

    2025年12月22日
    000
  • 块级元素背景色丢失:为什么在滚动父元素后子元素背景色会消失?

    块级元素背景色丢失问题 在设置父元素为固定宽高并超出部分可滚动后,子块级元素的背景色可能丢失,尤其是在子元素最初被隐藏的部分。 举个例子,代码如下: .parent { width: 100px; padding-left: 10px; overflow: auto;}.son { backgrou…

    2025年12月22日
    000
  • 如何给超出滚动部分添加背景色?

    超出滚动部分如何添加背景色? 在 CSS 中,我们经常遇到这样的场景:给父元素设置固定宽高,并允许超出部分滚动;给子元素设置背景色,但初始隐藏的部分没有添加背景色。 这种情况下,解决方案可以从调整子元素的宽度和文字换行入手: 调整子元素宽度:将子元素的宽度设置为 fit-content,以便其宽度仅…

    2025年12月22日
    000
  • 如何在 JavaScript 函数中获取和修改私有变量?

    获取并外部赋值变量“num_next” 在代码中,你使用了一个名为“add_month()”的函数。该函数内部有一个私有变量“num_next”。你希望获取并将其赋值给函数外的另一个变量,但又不想在函数外部直接访问私有变量。 解决方案:使用回调函数 通过传入一个回调函数作为参数,可以在外部接收“ad…

    2025年12月22日
    000
  • 如何使用 JavaScript 统计数组中数据重复次数并渲染到页面?

    判断数组中数据的重复次数并渲染至页面 在前端,根据数组对象中某个字段作为判断条件,判断重复数据项并统计重复次数,是常见的业务需求之一。本文将以“NO”字段为例,对这个问题进行详细解答。 首先,我们需要通过 reduce 方法对数组中的对象进行分组,将相同“NO”字段的值归为一组,并统计每组对象的个数…

    2025年12月22日
    000
  • 如何使用 JavaScript 简便地为代码添加行号?

    用 javascript 最简便地给代码加行号 给代码加行号对于代码审查、调试和其他任务来说非常有用。虽然有几种方法可以实现这一目标,但 JavaScript 提供了一个简单的解决方案,可以让这个过程变得轻而易举。 使用 xmp 标签 使用 xmp 标签是给代码加行号最简单的方法之一。但是,xmp …

    2025年12月22日
    000
  • 如何使用 Flex 布局实现图片包裹文本的效果?

    如何优化图片包裹的样式,使其美观整洁 对于 “ ” 这种样式,想要图片包裹起来,可以参考以下方法: 将整个盒子采用 flex 布局,然后将包裹图片的小盒子设置 flex-shrink: 0 和 flex-grow: 0,这样小盒子就不会因内容多少而影响大小。最后,给小盒子添加…

    2025年12月22日
    000
  • 服务端 GET 请求多端响应, UGC 内容如何安全有效地处理?

    服务端 get 请求多端响应与用户输入内容 ugc 的处理 问题: 在处理服务端 GET 请求时,用户提交的内容需要转义以防止 XSS 攻击。但是,如果这个请求需要在 iOS、安卓和 Web 端展示,转义时机和方式该如何处理? 回答: 前端验证和后端验证的区分: 前端验证是为了确保用户体验,后端验证…

    2025年12月22日
    000
  • 如何使用 CSS 实现五边形形状?

    如何使用 css 实现特定的形状 问题: 我想要在网页中创建一个如下图所示的形状,但不知道该如何使用 CSS 代码实现,希望各位大佬能够指教。 解答: 要使用 CSS 实现该形状,可以考虑使用 clip-path 属性。它允许你使用 SVG 路径来裁剪元素的边缘,从而创建各种形状。 立即学习“前端免…

    2025年12月22日
    000
  • 使用highlight.js库如何为HTML源代码添加行号?

    使用highlightjs添加html源代码行号 在生成带行号的HTML源代码时,使用highlightjs时可能会遇到困难。以下是在使用highlight.js库添加行号的正确步骤: 为了实现此功能,需要补充样式以创建行号容器和其他必要的样式。在标签中,使用以下样式: { position: re…

    2025年12月22日
    000
  • 如何用 JavaScript 为代码添加行号?

    如何在代码中便捷地添加行号? xmp 标签是早期为实现这一目的而使用的一种方法。然而,由于 xmp 已被弃用,需要寻找替代方案。 使用 JavaScript 将以下代码添加到 HTML 文件中: 然后在 HTML 文件的末尾添加以下样式和 JavaScript 代码: 立即学习“Java免费学习笔记…

    2025年12月22日
    000
  • relative 定位为什么无法上下左右居中?

    relative定位为何无法上下左右居中? 当我们使用relative定位时,发现盒子无法上下左右居中(只能左右居中),这是什么原因呢? 要理解这个问题,我们必须知道position不同属性的含义: absolute和fixed:盒子相对于body定位,left、right、top、bottom属性…

    2025年12月22日
    000
  • 如何用 JavaScript 实现带有图标的文本框校验?

    如何巧用 javascript 实现带有图标报错提醒的文本框校验 对于有文本框校验需求的开发者来说,如何优雅地处理错误信息显示往往是一个难题。本文将介绍一种使用 JavaScript 实现文本框校验的有效方法,让错误信息清晰可见,并在错误信息前添加自定义图标。 方案解析 要实现图中所示的效果,可以使…

    2025年12月22日
    000
  • 如何使用 CSS 和 JavaScript 为代码添加行号?

    如何轻松地给代码添加行号 为代码添加行号往往是一项繁琐的任务,尤其是在需要显示精美的格式时。对于这种场景,一种简单又方便的方法是使用 CSS 的 ::before 伪元素。 在需要添加行号的 元素中,添加以下 CSS 样式: #code p::before { content: attr(data-…

    2025年12月22日
    000
  • 如何判断当前时间距离某个日期还有 9 个月?

    根据到期时间判断是否还有 9 个月 为了判断当前年份是否与到期年份一致,并且距离到期月份还有 9 个月内,可以使用 JavaScript 代码实现以下逻辑: 定义一个函数 isDistance9 接收一个到期时间(格式为 yyyy-mm-dd):将到期时间转换为 Date 对象(const d = …

    2025年12月22日
    000
  • 网页编辑区可以输入文本,但找不到input或textarea标签,这是为什么?

    识别html元素输入区 网上分享的一个网页提供了编辑HTML、CSS和JS代码的文本框,但是文中表达了对文本框的疑惑,找不到input或者textarea标签。 答案: 仔细观察后会发现,可以输入文本的元素实际上是textarea。网页中input元素被用作了按钮标签。以下是一幅图片,更清晰地展示了…

    2025年12月22日
    000
  • 如何使用 CSS 实现父 div 内 div 重叠居中?

    父div内的div横向或纵向居中重叠 在网页布局中,有时候需要将div子元素在父div内进行居中显示。本文将介绍一种使用CSS实现父div内div居中重叠的方法。 问题描述 在一个div中,包含两个子div,它们的大小不同。要求将这两个子div重叠放置,并且相对父div居中。不能影响父div的外观,…

    2025年12月22日
    000
  • 如何用 HTML 和 CSS 实现图像置于文本左侧的布局?

    如何在 html 中实现此样式? 此问题涉及创建带有文本和图像的布局,其中图像位于文本的左侧。要实现此样式,请使用以下 HTML 代码: @@##@@ 文本 然后,使用 CSS 为此 HTML 代码设置样式。例如,使用 Flexbox 布局将文本和图像水平排列: p { display: flex;…

    2025年12月22日
    000

发表回复

登录后才能评论
关注微信