【JavaScript】如何从 JavaScript 数组中删除重复元素?
CrazyPanda发表于:2024-04-16 23:37:59浏览:297次
在 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中,我们可以使用以下方法来获取元素的父级: 1、 使用parentNode属性:可以通过访问元素的parentNode属性来获取其直接父级元素。例如:var element = document.getElementById('myElement'); var parentElement = element.parentNode;2、 使用parentElement属性:与pa
- 【JavaScript】字母大小写转换的JS方法
- 1. toUpperCase() 方法:将字符串中的所有字母转换为大写。例如,`"hello world".toUpperCase()` 将返回 `"HELLO WORLD"`。
- 【JavaScript】如何使用 layui 实现自适应
- layui 是一个轻量级的现代前端框架,它提供了丰富的 UI 组件和强大的响应式功能。要使用 layui 实现自适应布局,可以按照以下步骤进行:1. 引用 layui 框架复制以下代码并将其粘贴到你的 HTML 页面中:<script src="path/to/layui.js"></script>2. 定义自适应布局的容器创建用于放置自适应内容的容器,并为其设置 layui-container 类:<div class=&q
- 【JavaScript】js复制内容到剪切板
- 复制内容到剪切板分两种情况,一种是从页面已有的可选元素中选中内容进行复制,一种是将Javascript代码中的字符串直接复制到剪切板。一 、复制页面元素选中内容html<input type="textarea" id="txt" /> <button onclick="copy()">复制</button>jsfunction copy()&nbs
- 【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 页面中的所有元素进行访问。
- 【JavaScript】如何从 JavaScript 数组中删除重复元素?
- 在 JavaScript 中,有多种方法可以从数组中删除重复元素。在本文中,我们将探讨一些删除重复元素的顶级方法。使用filter()方法filter()方法使用传递的条件创建一个新的元素数组。这将仅包含作为此过滤器方法的一部分返回 true 的元素。因此,要实现删除重复元素,我们只需在 filter() 方法中添加条件即可,它会完成剩下的工作。#过滤器.js<script> var arr = ["stev
- 【Javascript】图片转base64的三种js方法
- 在前端,将图片转换为Base64编码是一种常见的做法,尤其是在不需要服务器端处理图片的情况下。Base64编码允许你将图片直接嵌入到HTML或CSS中,或者在JavaScript中作为字符串传输。以下...
- 【JavaScript】5个最受欢迎的图像处理JS库
- 图像处理库 (IML) 用于对图像执行各种处理功能:你可以增加图像的亮度、添加饱和度或滤镜、裁剪和调整大小,以及更多有价值的功能,这些功能将帮助你完成几乎所有事情并将你的网络浏览器变成 Adobe Lightroom! 我们为每项重要的图像处理任务都提供了库,从简单的低级操作(例如滤镜、亮度和饱和度)到用于裁剪或图像合成的单一用途库。
栏目分类全部>