您的当前位置:首页>全部文章>文章详情

【JavaScript】如何从 JavaScript 数组中删除重复元素?

CrazyPanda发表于:2024-04-16 23:37:59浏览:305次TAG:


在 JavaScript 中,有多种方法可以从数组中删除重复元素。在本文中,我们将探讨一些删除重复元素的顶级方法。

使用filter()方法

filter()方法使用传递的条件创建一个新的元素数组。这将仅包含作为此过滤器方法的一部分返回 true 的元素。因此,要实现删除重复元素,我们只需在 filter() 方法中添加条件即可,它会完成剩下的工作。

#过滤器.js

<script>
   var arr = ["steve", "mark", "mark","bill", "steve", "
   function removeDuplicates(arr) {
      return arr.filter((item,index) => arr.indexOf(item) === index);
   console.log(removeDuplicates(arrr));
</script>

输出

"steve", "mark", "bill"

使用 Set() 方法

Set 是唯一值的集合。为了从数组中删除元素,我们首先需要将重复数组转换为 Set

这个新 Set 将隐式删除重复元素,然后将其转换回集合到一个数组。

#filter.js

<script>
   var arr = ["steve", "mark", "mark","bill", "steve", "bill"];
 
   function removeDuplicates(arr) {
      let uniqueArr = [...new Set(arr)];
      return uniqueArr;
   }
   console.log(removeDuplicates(arr));
</script>

输出

"steve", "mark", "bill"

使用reduce()方法

reduce()方法用于减少数组的元素,然后将它们组合成一个基于用户传递的某些减速器函数的最终数组。在下面的示例中,我们将使用 reduce() 方法从数组中删除或移除重复元素。

# filter.js

<script>
   var arr = ["steve", "mark", "mark","bill", "steve", "bill"];
 
   function removeDuplicates(arr) {
      var unique = arr.reduce(function (acc, curr) {
         if (!acc.includes(curr))
            acc.push(curr);
         return acc;
      }, []);
      return unique;
   }
   console.log(removeDuplicates(arr));
</script>

输出

"steve", "mark", "bill"

使用 forEach() 和 include()

如果数组中存在某个元素,include() 方法将返回 true,否则返回 false。在下面的示例中,我们使用 forEach() 迭代数组的元素,并仅当其中不存在相同元素时才将其添加到新数组中。

#filter.js

<script>
   var arr = ["steve", "mark", "mark","bill", "steve", "bill"];
 
   function removeDuplicates(arr) {
      let uniqueArr = [];
      chars.forEach((c) => {
         if (!uniqueChars.includes(c)) {
            uniqueChars.push(c);
         }
      });
       return uniqueArr;
   }
   console.log(removeDuplicates(arr));
</script>

输出

"steve", "mark", "bill"


猜你喜欢

【JavaScript】JS时间和时间戳互转
在JavaScript中,获取当前时间的时间戳(秒值)可以使用 Date.now() 方法,而将时间戳转换为日期格式可以使用 Date 对象。获取当前时间戳(秒值):let&nbsp;timestampSeconds&nbsp;=&nbsp;Date.now()&nbsp;/&nbsp;1000; console.log(timestampSeconds);&nbsp;//&nbsp;输出的是以秒为单位的时间戳将时间戳转换为日期:let&nbsp;timestampSeconds&nbsp;=&amp;
发表于:2024-08-14 浏览:264 TAG:
【JavaScript】js复制内容到剪切板
复制内容到剪切板分两种情况,一种是从页面已有的可选元素中选中内容进行复制,一种是将Javascript代码中的字符串直接复制到剪切板。一 、复制页面元素选中内容html&lt;input&nbsp;type=&quot;textarea&quot;&nbsp;id=&quot;txt&quot;&nbsp;/&gt; &lt;button&nbsp;onclick=&quot;copy()&quot;&gt;复制&lt;/button&gt;jsfunction&nbsp;copy()&amp;nbs
发表于:2024-08-13 浏览:336 TAG: #javascript
【JavaScript】JS生成二维码-qrcode.js
二维码又称QRCode,是一个近几年来移动设备上很流行的一种编码方式它比传统的一维码(条形码)能存更多的信息,也能表示更多的数据类型。按照一定规律排列组成的几何图形构成,它巧妙地利用构成计算机内部逻辑...
发表于:2024-10-29 浏览:138 TAG: #二维码 #javascript
【JavaScript】纯CSS蜂巢式图片画廊效果
这是一款纯CSS蜂巢式图片画廊效果。该CSS蜂巢式图片画廊通过CSS网格布局,将图片以蜂巢的六边形进行布局,非常炫酷。
发表于:2024-11-06 浏览:245 TAG: #CSS #图像
【JavaScript】JS获取时间戳秒值
方法一:使用JavaScript的Date对象的getTime()方法来获取当前时间的毫秒值,然后将其除以1000得到秒值。var&nbsp;timestamp&nbsp;=&nbsp;Math.floor(new&nbsp;Date().getTime()&nbsp;/&nbsp;1000);方法二:使用JavaScript的Date对象的getTime()方法获取当前的毫秒值,然后使用Math.floor()函数向下取整得到秒值。var&nbsp;timestamp&nbsp;=&nbsp;
发表于:2024-08-14 浏览:262 TAG:
【Javascript】localStorage和sessionStorage的使用
一、什么是localStorage、sessionStorage在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。&nbsp;二、localStorage的优势与局限localStorage的优势1、localStorage拓展了cookie的4K限制2
发表于:2024-03-27 浏览:339 TAG: #javascript #localstorage #sessionstorage
【JavaScript】JS中referer的使用
HTTP请求中有一个referer的报文头,用来指明当前流量的来源参考页。例如在www.sina.com.cn/sports/上点击一个链接到达cctv.com首页,那么就referrer就是www.sina.com.cn/sports/了。在Javascript中,我们可以通过document.referrer来获取同样的信息。通过这个信息,我们就可以知道访客是从什么渠道来到当前页面的。这对于Web Analytics来说,是非常重要的,这可以告诉我们不同渠道带来的流量的分布情况,还有用户搜索
发表于:2024-04-24 浏览:354 TAG:
【JavaScript】javascript中doucument对象的属性和方法有哪些
doucument对象的属性和方法有:body、cookie、domain、lastmodified、referrer、title、close()、open()、write()、getelementbyid()、normalize()等等。本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。Document 对象每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
发表于:2024-04-14 浏览:287 TAG:
【JavaScript】JS四舍五入保留两位小数(一)
1 、tofixed方法toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。但是其四舍五入的规则与数学中的规则不同,使用的是银行家舍入规则。**银行家舍入:所谓银行家舍入法,其实质是一种四舍六入五取偶(又称四舍六入五留双)法。**具体规则如下:简单来说就是:四舍六入五考虑,五后非零就进一,五后为零看奇偶,五前为偶应舍去,五前为奇要进一。如下:&gt;&nbsp;(3.61).toFixed(1)&nbsp;&nbsp;&nbsp;&nbsp;//四舍 &#39;3.6&amp;#3
发表于:2024-03-12 浏览:322 TAG:
【JavaScript】如何从 JavaScript 数组中删除重复元素?
在 JavaScript 中,有多种方法可以从数组中删除重复元素。在本文中,我们将探讨一些删除重复元素的顶级方法。使用filter()方法filter()方法使用传递的条件创建一个新的元素数组。这将仅包含作为此过滤器方法的一部分返回 true 的元素。因此,要实现删除重复元素,我们只需在 filter() 方法中添加条件即可,它会完成剩下的工作。#过滤器.js&lt;script&gt; &nbsp;&nbsp;&nbsp;var&nbsp;arr&nbsp;=&nbsp;[&quot;stev
发表于:2024-04-16 浏览:307 TAG: