前端 JavaScript 程序代码中怎么去掉 array 重复元素

首页 / 常见问题 / 低代码开发 / 前端 JavaScript 程序代码中怎么去掉 array 重复元素
作者:低代码开发工具 发布时间:10-24 11:10 浏览量:8108
logo
织信企业级低代码开发平台
提供表单、流程、仪表盘、API等功能,非IT用户可通过设计表单来收集数据,设计流程来进行业务协作,使用仪表盘来进行数据分析与展示,IT用户可通过API集成第三方系统平台数据。
免费试用

在前端JavaScript程序代码中,去掉数组(array)中的重复元素可以通过多种方法实现,如Set对象、filter方法、reduce方法、Map对象等。使用Set对象是最为简洁和现代的方式:通过创建一个新的Set对象并传入数组来构建一个值唯一的集合,再把Set转换回数组就可以得到去重后的数组。具体代码如下:

const array = [1, 2, 2, 3, 4, 4, 5];

const uniqueArray = [...new Set(array)];

此段代码中,new Set(array) 会自动移除重复项。使用展开运算符 ... 将Set对象转换为数组,得到uniqueArray为去重后的数组。这种方法的优点是代码简洁且在现代浏览器中支持度较高。

一、使用Set对象

Set对象是ES6新增的一种数据结构,用来存储任何类型的唯一值,无论是原始值或者是对象引用。要删除数组中的重复元素,可以将数组转换为Set,再把Set转换回数组:

function removeDuplicates(array) {

return [...new Set(array)];

}

这个方法的简洁性在于它不需要额外进行循环或者复杂的逻辑判断来去除重复项。

二、使用filter方法

filter方法创建一个新数组,其中包含通过所提供函数实现的测试的所有元素。利用indexOf方法,我们可以找到元素在数组中首次出现的位置,并排除之后的重复项:

function removeDuplicates(array) {

return array.filter((item, index) => {

return array.indexOf(item) === index;

});

}

在这段代码中,filter 方法会遍历每个元素,index是当前正在处理的元素的索引,array.indexOf(item) 是当前元素首次出现的位置。当两者相等时,意味着这个元素不是重复的。

三、使用reduce方法

reduce方法对数组中的每个成员依次执行一个由您提供的reducer函数,并将其结果汇总为单个返回值。可以利用reduce去重如下:

function removeDuplicates(array) {

return array.reduce((accumulator, current) => {

if (accumulator.indexOf(current) === -1) {

accumulator.push(current);

}

return accumulator;

}, []);

}

在这里,accumulator是一个累加器数组,初始值为空数组[]。当发现累加器数组中尚未包含当前元素时,就将其加入累加器数组。

四、使用Map对象

Map对象保存键值对,并且能够记住键的原始插入顺序。每个键都可以关联一个值,所以可以利用这个特性来去重:

function removeDuplicates(array) {

let unique = new Map(array.map(item => [item, item]));

return [...unique.keys()];

}

在此方法中,先利用map函数创建一个每个元素都是 [item, item] 格式的数组,然后通过该数组创建一个Map对象。Map对象会自动去重复的键,接着使用Map对象的keys()方法来获取所有的键,然后用展开运算符转成数组。这里的键实际上就是原数组中的唯一元素。

五、交互判断和循环

尽管现代JavaScript提供了许多优雅的去重方法,了解传统的循环和条件判断在某些情况下依然有用。以下是一个传统方法的例子:

function removeDuplicates(array) {

let unique = [];

for (let i = 0; i < array.length; i++) {

if (unique.indexOf(array[i]) === -1) {

unique.push(array[i]);

}

}

return unique;

}

这个方法的实现逻辑是,创建一个空数组unique用来存放结果,遍历原数组,使用indexOf来检查当前元素是否已经在结果数组中存在,如果不存在就加入该元素。

六、性能考量

虽然这些方法在处理小到中等规模的数组时性能都相当可以,但在面对大数据量时不同方法的性能表现可能有显著差异。为了优化性能,有时候需要根据数据的特点和预期的使用场景做出合理的选择。例如,filter结合indexOf的方法在数组很大时会比较慢,因为它需要重复地遍历数组来确定元素是否已存在。相比之下,Set和Map基于其内部优化提供了更好的性能表现。

去掉数组中重复元素的最佳方法取决于你的特定需求和工作环境。现代JavaScript开发中,利用Set对象去重是最推荐的方法,因为它不仅代码简洁,而且性能优良,并且具有良好的兼容性。不过,深入理解各种方法的原理和优缺点,可以帮助你更加灵活地应对不同的编程挑战。

相关问答FAQs:

1. 如何使用 JavaScript 代码去除数组中的重复元素?

在 JavaScript 中,我们可以使用 Set 对象来去除数组中的重复元素。Set 是一种特殊的数据结构,它只存储唯一的值。

下面是一个示例代码,演示如何使用 Set 去除数组中的重复元素:

let array = [1, 2, 2, 3, 4, 4, 5];
let uniqueArray = [...new Set(array)];

console.log(uniqueArray); // 输出 [1, 2, 3, 4, 5]

在上述代码中,我们首先创建了一个数组 array 包含重复元素。然后,使用 new Set(array) 创建了一个 Set 对象,Set 对象会自动去除重复的元素。最后,我们将 Set 对象转换为数组,使用扩展运算符 ... 将 Set 对象转换为数组的形式,并将结果保存在 uniqueArray 变量中。

2. 如何使用 JavaScript 代码去除数组中的重复对象?

如果数组中的元素是对象而不是基本数据类型,我们可以通过遍历数组中的对象,并根据一些属性或字段进行比较来去除重复对象。以下是示例代码:

let array = [{id: 1, name: "John"}, {id: 2, name: "Jane"}, {id: 1, name: "John"}];

let uniqueArray = array.filter((obj, index, self) => {
  return index === self.findIndex((t) => (
    t.id === obj.id && t.name === obj.name
  ));
});

console.log(uniqueArray); 
// 输出 [{id: 1, name: "John"}, {id: 2, name: "Jane"}]

在上述代码中,我们使用了 filter() 方法和 findIndex() 方法来去除数组中的重复对象。我们在 filter() 方法的回调函数中使用了 findIndex() 方法来找到第一个与当前对象相同的索引,如果当前索引与找到的索引相同,则说明该对象是数组中唯一的对象。

3. 如何使用 JavaScript 代码去除数组中的重复字符串?

如果数组中的元素是字符串,我们可以使用 indexOf() 方法或 includes() 方法来判断字符串是否已经出现过,并根据判断结果进行去重。以下是示例代码:

let array = ["apple", "banana", "banana", "orange"];

let uniqueArray = array.filter((str, index, self) => {
  return index === self.indexOf(str);
});

console.log(uniqueArray); 
// 输出 ["apple", "banana", "orange"]

在上述代码中,我们使用了 filter() 方法和 indexOf() 方法来去除数组中的重复字符串。我们在 filter() 方法的回调函数中使用了 indexOf() 方法来找到第一个与当前字符串相同的索引,如果当前索引与找到的索引相同,则说明该字符串是数组中唯一的字符串。

最后建议,企业在引入信息化系统初期,切记要合理有效地运用好工具,这样一来不仅可以让公司业务高效地运行,还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业,可以采用我们公司自研的企业级低代码平台织信Informat。 织信平台基于数据模型优先的设计理念,提供大量标准化的组件,内置AI助手、组件设计器、自动化(图形化编程)、脚本、工作流引擎(BPMN2.0)、自定义API、表单设计器、权限、仪表盘等功能,能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景,全面助力企业落地国产化/信息化/数字化转型战略目标。

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系邮箱:hopper@cornerstone365.cn 处理,核实后本网站将在24小时内删除。

最近更新

什么是外向潜在客户开发
10-30 10:47
产品开发过程的阶段有哪些
10-30 10:47
敏捷软件开发如何运作?
10-30 10:47
门禁系统开发厂家有哪些
10-30 10:47
销售系统开发平台有哪些
10-30 10:47
OSS系统开发商有哪些
10-30 10:47
云系统开发注意哪些方面
10-30 10:47
印度棋牌系统开发商有哪些
10-30 10:47
高压系统开发部是什么公司
10-30 10:47

立即开启你的数字化管理

用心为每一位用户提供专业的数字化解决方案及业务咨询

  • 深圳市基石协作科技有限公司
  • 地址:深圳市南山区科技中一路大族激光科技中心909室
  • 座机:400-185-5850
  • 手机:137-1379-6908
  • 邮箱:sales@cornerstone365.cn
  • 微信公众号二维码

© copyright 2019-2024. 织信INFORMAT 深圳市基石协作科技有限公司 版权所有 | 粤ICP备15078182号

前往Gitee仓库
微信公众号二维码
咨询织信数字化顾问获取最新资料
数字化咨询热线
400-185-5850
申请预约演示
立即与行业专家交流