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

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

CrazyPanda发表于:2024-04-16 23:37:59浏览:297次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中,我们可以使用以下方法来获取元素的父级:&nbsp;&nbsp;1、 使用parentNode属性:可以通过访问元素的parentNode属性来获取其直接父级元素。例如:var&nbsp;element&nbsp;=&nbsp;document.getElementById(&#39;myElement&#39;); var&nbsp;parentElement&nbsp;=&nbsp;element.parentNode;2、 使用parentElement属性:与pa
发表于:2024-05-11 浏览:253 TAG:
【JavaScript】字母大小写转换的JS方法
1. toUpperCase() 方法:将字符串中的所有字母转换为大写。例如,`"hello world".toUpperCase()` 将返回 `"HELLO WORLD"`。
发表于:2024-11-16 浏览:225 TAG: #javascript
【JavaScript】如何使用 layui 实现自适应
layui 是一个轻量级的现代前端框架,它提供了丰富的 UI 组件和强大的响应式功能。要使用 layui 实现自适应布局,可以按照以下步骤进行:1. 引用 layui 框架复制以下代码并将其粘贴到你的 HTML 页面中:&lt;script&nbsp;src=&quot;path/to/layui.js&quot;&gt;&lt;/script&gt;2. 定义自适应布局的容器创建用于放置自适应内容的容器,并为其设置 layui-container 类:&lt;div&nbsp;class=&amp;q
发表于:2024-08-08 浏览:234 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 浏览:328 TAG: #javascript
【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 浏览:276 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 浏览:298 TAG:
【Javascript】图片转base64的三种js方法
在前端,将图片转换为Base64编码是一种常见的做法,尤其是在不需要服务器端处理图片的情况下。Base64编码允许你将图片直接嵌入到HTML或CSS中,或者在JavaScript中作为字符串传输。以下...
发表于:2024-10-25 浏览:352 TAG: #图像 #base64
【JavaScript】5个最受欢迎的图像处理JS库
图像处理库 (IML) 用于对图像执行各种处理功能:你可以增加图像的亮度、添加饱和度或滤镜、裁剪和调整大小,以及更多有价值的功能,这些功能将帮助你完成几乎所有事情并将你的网络浏览器变成 Adob​​e Lightroom! 我们为每项重要的图像处理任务都提供了库,从简单的低级操作(例如滤镜、亮度和饱和度)到用于裁剪或图像合成的单一用途库。
发表于:2024-10-14 浏览:368 TAG: #javascript #图像 #sharp #cropper
【JavaScript】JS防抖动方法
防抖动是指在事件被触发时,为了减少因为快速连续操作导致的大量事件触发,通常会设置一个延时,当事件被触发后,等待一段时间,如果在这段时间内没有新的相同事件被触发,则执行该事件的操作。在JavaScript中,防抖动通常可以通过设置定时器来实现。当事件触发时,如果已经有一个定时器在等待,则清除它并重新设置一个新的定时器。只有当定时器到期而事件也没有被触发时,事件绑定的处理函数才会执行。function&nbsp;debounce(fn,&nbsp;wait)&nbsp;{ &nbsp;&nbsp;l
发表于:2024-04-24 浏览:267 TAG:
【Javascript】CSS3和js超酷iPhone样式科学计算器插件
CalcSS3是一款非常酷的CSS3和js模仿iPhone样式科学计算器插件。该计算器插件没有使用图片,纯CSS制作。该计算器是科学型的,可以处理乘方、开方、指数、对数等复杂的数学运算。
发表于:2024-11-06 浏览:235 TAG: #javascript