如何使用 JavaScript 统计数组中数据重复次数并渲染到页面？

判断数组中数据的重复次数并渲染至页面

在前端，根据数组对象中某个字段作为判断条件，判断重复数据项并统计重复次数，是常见的业务需求之一。本文将以“NO”字段为例，对这个问题进行详细解答。

首先，我们需要通过 reduce 方法对数组中的对象进行分组，将相同“NO”字段的值归为一组，并统计每组对象的个数。在这个过程中，需要对已存在的数据进行判断和更新，具体操作如下：

let newArr = arr.reduce((s, v) => {
    let index = s.findIndex(it => it.NO === v.NO)
    index !== -1 ? s[index] = {...v, count: ++s[index].count} : s.push({...v, count: 1})
    return s
}, newArr)

登录后复制

完成分组后，我们就可以将统计好的数据渲染到页面上。以下是一个示例代码：

const table = document.getElementById('table')
table.innerHTML = `
    <thead>
        <tr>
            <th>Data.NO</th>
            <th>探测次数</th>
            <th>重复次数</th>
        </tr>
    </thead>
    <tbody>
        ${newArr.map(({NO, count}) => `
            <tr>
                <td>${NO}</td>
                <td>${count}</td>
            </tr>
        `).join('')}
    </tbody>
`

登录后复制

这样，就可以根据“NO”字段判断数组中数据的重复次数，并将统计结果渲染到页面上。

立即学习“”；

以上就是如何使用 JavaScript 统计数组中数据重复次数并渲染到页面？的详细内容，更多请关注米云其它相关文章！