javascript数组对象根据id去重的四种方法

简介: Js代码组织结构良好一般都呈现以下五个特点:始终声明我们的依赖、为第三方代码库添加shim(垫片)、定义跟调用应该分离、依赖应该异步加载、模块不应依赖全局变量。

例如:想去除重复id为1的项

arr = [
  { id: 1, name: '张三', age: 20 },
  { id: 1, name: '张三', age: 20 },
  { id: 2, name: '李四', age: 20 },
  { id: 3, name: '马五', age: 20 }
];

方法一

通过forEach再通过some方法判断数组是否包含当前对象id,不包含则添加

some() {
  let some: any = [];
  this.arr.forEach(el => {
    if (!some.some(e => e.id == el.id)) {
      some.push(el);
    }
  });
  console.log(some);
}

方法二

通过forEach再通过find方法判断数组是否包含当前对象id,不包含则添加

find() {
  let find: any = [];
  this.arr.forEach(el => {
    if (!find.find(e => e.id == el.id)) {
      find.push(el);
    }
  });
  console.log(find);
}

方法三

通过reduce方法,通过定义的obj,判断obj[next.id] 是否存在,存在设置为“”,不存在则push

reduce() {
  let obj = {};
  let reduce = [];
  reduce = this.arr.reduce(function (item, next) {
    //item为没有重复id的数组,next为当前对象
    obj[next.id] ? '' : (obj[next.id] = true && item.push(next));
    return item;
  }, []);
  console.log(reduce);
}

方法四

通过for循环遍历,再通过some方法判断数组是否包含当前对象id,不包含则添加

forAway() {
  let forData = [];
  for (let i = 0; i < this.arr.length; i++) {
    if (!forData.some(e => e.id == this.arr[i].id)) forData.push(this.arr[i]);
  }
  console.log(forData);
}

以上是四种对数组区中的方法

目录
相关文章
|
JavaScript 前端开发 Python
vue简单实现词云图组件
JavaScript也有许多可以用来生成词云图的库,但我自己其实都没有使用过,之前使用python的时候倒是用过python的wordcloud库,wordcloud库配合jieba库就可以很好的满足词频统计的需求,但在JavaScript这边我还没有了解很多词频统计这块的相关知识,在网上搜索了一番好像都没有搜索到有有关词频统计的相关库,而在词云生成这一方面的相关库倒是发现有不少,如:js2wordcloud、wordcloud2 等等……这些库都很好地实现了词云图片的展示,现在我也尝试着简单封装一个自己使用的简洁版词云图
1196 0
vue简单实现词云图组件
|
JavaScript 前端开发 UED
Vue 表情包输入组件的实现代码:支持自定义表情库、快捷键发送和输入框联动的聊天表情解决方案
本文详细介绍了在 Vue 项目中实现一个功能完善、交互友好的表情包输入组件的方法,并提供了具体的应用实例。组件设计包含表情分类展示、响应式布局、与输入框的交互及样式定制等功能。通过核心技术实现,如将表情插入输入框光标位置和点击外部关闭选择器,确保用户体验流畅。同时探讨了性能优化策略,如懒加载和虚拟滚动,以及扩展性方案,如自定义主题和国际化支持。最终,展示了如何在聊天界面中集成该组件,为用户提供丰富的表情输入体验。
923 8
|
JavaScript
JS 数组去重(含简单数组去重【5种方法】、对象数组去重【2种方法】)
JS 数组去重(含简单数组去重【5种方法】、对象数组去重【2种方法】)
2008 0
el-table复选框全部勾选以及勾选回显
el-table复选框全部勾选以及勾选回显
2061 0
|
存储 JavaScript 安全
组件通信——provide 和 inject 实现爷孙组件通信
组件通信——provide 和 inject 实现爷孙组件通信
|
JavaScript
js 字符串String转对象Object
该代码示例展示了如何将一个以逗号分隔的字符串(`&#39;1.2,2,3,4,5&#39;`)转换为对象数组。通过使用`split(&#39;,&#39;)`分割字符串并`map(parseFloat)`处理每个元素,将字符串转换成浮点数数组,最终得到一个对象数组,其类型为`object`。
806 2
|
API
Vue3组件通信全解析:利用props、emit、provide/inject跨层级传递数据,expose与ref实现父子组件方法调用
Vue3组件通信全解析:利用props、emit、provide/inject跨层级传递数据,expose与ref实现父子组件方法调用
4755 0
|
前端开发
css特效动画——转圈的加载动画
css特效动画——转圈的加载动画
455 0
echarts柱状图实现颜色渐变效果
echarts柱状图实现颜色渐变效果
1392 1