js中数组对象去重的方法

前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

最近工作中需要用到数组对象去重的方法,我是怎么想也没想出来,今天稍微研究了一下,总算找到了2种方法。分享一下,希望对大家有帮助!

 方法一:

采用对象访问属性的方法,判断属性值是否存在,如果不存在就添加。

 var arr = [{key: '01',value: '乐乐'}, {key: '02',value: '博博'}, {key: '03',value: '淘淘'},{key: '04',value: '哈哈'},{key: '01',value: '乐乐'}];//  方法1:利用对象访问属性的方法,判断对象中是否存在key
var result = [];
var obj = {};
for(var i =0; i<arr.length; i++){if(!obj[arr[i].key]){result.push(arr[i]);obj[arr[i].key] = true;}
}console.log(result); // [{key: "01", value: "乐乐"},{key: "02", value: "博博"},{key: "03", value: "淘淘"},{key: "04", value: "哈哈"}]

方法二:

采用数组中的reduce方法,遍历数组,也是通过对象访问属性的方法

//  方法2:利用reduce方法遍历数组,reduce第一个参数是遍历需要执行的函数,第二个参数是item的初始值var obj = {};
arr = arr.reduce(function(item, next) {obj[next.key] ? '' : obj[next.key] = true && item.push(next);return item;
}, []);console.log(arr); // [{key: "01", value: "乐乐"},{key: "02", value: "博博"},{key: "03", value: "淘淘"},{key: "04", value: "哈哈"}]

前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/195514.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python编程的经典示例及应用

前言 Python作为一种简洁而强大的编程语言&#xff0c;提供了许多经典示例以展示其语言特性和功能。在本文中&#xff0c;我们将探讨一些经典的Python示例&#xff0c;并展示它们在实际应用中的价值。通过这些示例&#xff0c;读者可以深入了解Python的灵活性和易用性&#xff…

js选中起始时间使用标准时间毫秒值计算一年后的当前少一天的日期(并考虑闰年)

js选中起始时间使用标准时间毫秒值计算一年后的当前少一天的日期 实际代码里面带入默认日期’20230301’这个特殊日期&#xff0c;因为下一年的当前日期少一天为闰年的2月会有29天&#xff0c;使用特殊值校验代码效果图 HTML部分代码 <el-button click"chengTime()&q…

C# WPF上位机开发(带配置文件的倒计时软件)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 前面我们写了倒计时软件&#xff0c;但是不知道大家有没有发现&#xff0c;这个软件起始有一个缺点&#xff0c;那就是倒计时的起始时间都是硬编码…

Spring Security 自定义异常失效?源码分析与解决方案

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall &#x1f343; vue3-element-admin &#x1f343; youlai-boot &#x1f33a; 仓库主页&#xff1a; Gitee &#x1f4ab; Github &#x1f4ab; GitCode &#x1f496; 欢迎点赞…

分享73个节日PPT,总有一款适合您

分享73个节日PPT&#xff0c;总有一款适合您 73个节日PPT下载 链接&#xff1a;https://pan.baidu.com/s/1FG9Y-9yR31Y-fs3zxKI4Pg?pwd6666 提取码&#xff1a;6666 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;收集整理更不…

vue3 mixins

Vue3 中的 mixins 是一种复用组件逻辑的方式。在 Vue2 中&#xff0c;我们通常使用 mixins 来将一些全局的方法或者数据混入到多个组件中。但是在 Vue3 中&#xff0c;由于组合式 API 的引入&#xff0c;我们可以使用更灵活的方式来复用逻辑。 在 Vue3 中&#xff0c;我们可以…

LeetCode | 572. 另一棵树的子树

LeetCode | 572. 另一棵树的子树 OJ链接 我们需要判断两棵二叉树是否相同&#xff0c;如果再判断的的时候不同我们就直接返回false&#xff0c;否则就返回true然后再检查左子树和右子树里面是否存在subRoot子树~~ bool isSameTree(struct TreeNode* q, struct TreeNode* p) {…

C语言从入门到实战——常用内存函数的了解和模拟实现

常用内存函数的了解和实现 前言1. memcpy使用和模拟实现2. memmove使用和模拟实现3. memset函数的使用4. memcmp函数的使用 前言 内存函数&#xff08;memory functions&#xff09;指的是控制计算机内存操作的函数 1. memcpy使用和模拟实现 void * memcpy ( void * destinat…

uniapp:如何使用uCharts

目录 第一章 前言 第二章 安装插件uCharts 第三章 使用uCharts 第四章 注意 第一章 前言 需求&#xff1a;这是很久之前的一个项目的需求了&#xff0c;当时我刚接触app&#xff0c;有这么一个需求&#xff0c;在uniapp写的app项目中做一些图表统计&#xff0c;最开始以为…

EasyRecovery2024激活码秘钥

EasyRecovery从&#xff08;易恢复2024&#xff09;支持恢复不同存储介质数据&#xff0c;在Windows中恢复受损和删除文件,以及能检索数据格式化或损坏卷&#xff0c;甚至还可以从初始化磁盘。同时&#xff0c;你只需要最简单的操作就可以恢复数据文件&#xff0c;如&#xff1…

在java中如何解决in unnamed module @0x602ff1d9得问题

在日常得java开发中&#xff0c;点击maven得编译得时候会出现&#xff1a;class lombok.javac.apt.LombokProcessor (in unnamed module 0x58313b33) cannot access class com.sun.tools.javac.processing.JavacProcessingEnvironment (in module jdk.compiler) because module…

代码随想录算法训练营第五十四天 | 392.判断子序列,115.不同的子序列

目录 392.判断子序列 115.不同的子序列 392.判断子序列 题目链接&#xff1a;392. 判断子序列 设 s 的指针&#xff0c;遍历 t 的各个元素&#xff0c;当 t 与 s 对应元素相同时&#xff0c;指针前进&#xff1a; class Solution { public:bool isSubsequence(string s, string…

【刷题】Modular Multiplicative Inverse 模逆元

模逆元 定义 整数 a a a的模逆元是满足 a ⋅ x a\cdot x a⋅x模一个模数 m m m等于1。也就是找到一个数 x x x: a ⋅ x ≡ 1 mod m. a \cdot x \equiv 1 \text{ ~~~~mod m.} a⋅x≡1 mod m. 也可以把 x x x表示为 a − 1 a^{-1} a−1 需要注意模逆并不是总是存在。例如…

Vue3实现滚动到容器底部时发送请求,加载新数据

问题来源 在项目中出现了需要在容器滚动到底部时&#xff0c;加载新的数据的需求&#xff0c;以下是解决的方案笔记 解决 画了个流程图&#xff1a; 如图&#xff0c;先添加一个动态加载的图标&#xff0c;还有全部数据载完的《到底啦...》 大概这么个样子&#xff0c;之后呢…

PMP备考必看|浅谈PMP证书的价值,PMP考试详细全流程

作为已经在项目管理领域摸爬滚打五年的资深项目经理&#xff0c;我可以诚实的告诉大家&#xff0c;在项目管理领域拥有丰富项目管理经验的人都知道&#xff0c;很多公司在发布招聘信息时都会要求申请者持有PMP证书&#xff0c;这些证书在项目经理岗位的要求中经常出现。 在实际…

【PyTorch】softmax回归

文章目录 1. 模型与代码实现1.1. 模型1.2. 代码实现 2. Q&A 1. 模型与代码实现 1.1. 模型 背景 在分类问题中&#xff0c;模型的输出层是全连接层&#xff0c;每个类别对应一个输出。我们希望模型的输出 y ^ j \hat{y}_j y^​j​可以视为属于类 j j j的概率&#xff0c;然…

阿里云ACE认证含金量有多高?2023年海南E类人才认证政策告诉你答案!

2023年海南省高层次人才享受什么待遇&#xff1f;海南高层次人才住房补贴多少钱&#xff1f;海南高层次E类人才待遇有哪些&#xff1f;什么是海南高层次E类人才&#xff1f;E类人才怎么申请&#xff1f;这篇文章给大家详细介绍一下。 1.E类人才在海南有什么好处&#xff1f; …

ArcGIS提示当前许可不支持影像服务器

1、问题&#xff1a; 在用ArcGIS上处理影像栅格数据时&#xff08;比如栅格数据集裁剪、镶嵌数据集构建镶嵌线等&#xff09;经常会出现。 无法启动配置 RasterComander.ImageServer <详信息 在计算机XXXXX上创建服务器对象实例失败 当前许可不支持影像服务器。 ArcGIS提示当…

Python的模块与库,及if __name__ == ‘__main__语句【侯小啾Python基础领航计划 系列(二十四)】

Python的模块与库,及if name == ‘__main__语句【侯小啾Python基础领航计划 系列(二十四)】 大家好,我是博主侯小啾, 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔…

轻量级网络结构的目标检测算法——Yolov8介绍

1. Yolov8算法概述 Yolov8是一种目标检测算法&#xff0c;它通过独特的双路径预测和紧密的连接的卷积网络进行目标检测。该算法采用了轻量级网络结构&#xff0c;同时保持了较高的性能&#xff0c;因此具有高效的特点。此外&#xff0c;Yolov8还采用了级联和金字塔…