技术文摘
JavaScript 如何依据特定字段判断数组重复项并展示重复次数
在JavaScript开发中,处理数组里的重复项并统计其出现次数是常见需求。特别是依据特定字段来判断数组重复项时,掌握正确方法能有效提升开发效率。
假设我们有一个包含多个对象的数组,每个对象都有多个属性,我们需要依据其中某个特定字段来判断是否存在重复项,并展示重复的次数。
我们可以利用对象来存储每个特定字段的值及其出现的次数。以如下数组为例:
const arr = [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
{ id: 3, name: 'John' },
{ id: 4, name: 'Bob' },
{ id: 5, name: 'John' }
];
这里我们依据 name 字段来判断重复项。我们可以这样实现:
function countDuplicatesByField(arr, field) {
const countObj = {};
arr.forEach(item => {
const value = item[field];
if (!countObj[value]) {
countObj[value] = 1;
} else {
countObj[value]++;
}
});
const duplicates = {};
for (const key in countObj) {
if (countObj[key] > 1) {
duplicates[key] = countObj[key];
}
}
return duplicates;
}
const result = countDuplicatesByField(arr, 'name');
console.log(result);
在上述代码中,我们定义了 countDuplicatesByField 函数,它接收数组和特定字段作为参数。函数内部首先创建一个空对象 countObj 用于存储每个字段值的出现次数。通过 forEach 遍历数组,检查每个对象中特定字段的值在 countObj 中是否已存在,若不存在则初始化为1,若存在则次数加1。
接着,我们又创建了一个 duplicates 对象,用于存储真正的重复项及其次数。通过遍历 countObj,将出现次数大于1的项添加到 duplicates 中。
最后,我们调用该函数并传入数组和要依据判断的字段 name,输出的结果就展示了依据 name 字段判断出的重复项及其重复次数。这种方法逻辑清晰,能高效解决JavaScript中依据特定字段判断数组重复项并展示重复次数的问题。
TAGS: JavaScript数组处理 特定字段判断 重复项检测 重复次数统计
- Vue3 el-table 怎样用深度选择器::v-deep 更改组件内部默认样式
- uniapp 解决 H5 页面双标题的详细办法
- Vue3 中 CryptoJS 加密的运用方法
- element-plus 官方表格排序问题总结
- uniapp 实现 H5 一键打包的详细流程
- ElementUI Table 自定义表头动态数据与插槽的操作
- 解决 Vue 项目中“Cannot find module‘xxx’”类报错
- React 中 useRef 和 useState 的运用及差异
- uniapp 中 tabbar 的 midButton 按钮怎样设置
- React.InputHTMLAttributes 的实践与注意要点
- el-table 组件的表头搜索功能实现
- 前端实现无感刷新 token 的步骤
- Webstorm 中 uni-app 项目开发的详细图文指南
- Vue 项目打包实现自动更新版本号与自动刷新缓存的方法
- Vue-PDF 签章不显示问题解决记录