JS实现数组去重的八种方法（实用）
admin
2024-01-20 07:30:30
0次

前言

js数组去重是比较常见的数组操作方式之一，网上有很多关于数组去重的博客文章，方法各式各样，但有些方法实用性很差，很容易造成不必要的麻烦，所以我们需要去其糟粕取其精华，下面我们就整理一些比较实用的数组去重方法。

Methods 1：利用双重for循环

思路：定义一个新数组，并存放原数组的第一个元素，然后将元素组一一和新数组的元素对比，若不同则存放在新数组中。

function unique(arr) {let newArr = [arr[0]];for (let i = 1; i < arr.length; i++) {let repeat = false;for (let j = 0; j < newArr.length; j++) {if (arr[i] === newArr[j]) {repeat = true;break;}}if (!repeat) {newArr.push(arr[i]);}}return newArr;
}console.log(unique([1, 1, 2, 5, 5, 3, 4, 9, 6, 3, 4]));
// 结果是[1, 2, 5, 3, 4, 9, 6]

Methods 2：利用对象

思路：利用对象属性存在的特性，如果没有该属性则存入新数组

function unique(arr) {const newArr = []const obj = {}arr.forEach(item => {if (!obj[item]) {newArr.push(item)obj[item] = true}})return newArr}console.log(unique([1, 1, 2, 5, 5, 3, 4, 9, 6, 3, 4])) // 结果是[1, 2, 5, 3, 4, 9, 6]

Methods 3：利用数组的indexOf方法

思路：新建一个空数组，遍历需要去重的数组，将数组元素存入新数组中，存放前判断数组中是否已经含有当前元素，没有则存入。此方法也无法对NaN去重。

var arr = [1,9,8,8,7,2,5,3,3,3,2,3,1,4,5,444,55,22];
function unique(arr) {//定义一个新的临时数组 var newArr=[]; //遍历当前数组 for(var i=0;i

Methods 4：利用数组的includes方法

思路：此方法逻辑与indexOf方法去重异曲同工，只是用includes方法来判断是否包含重复元素。

function unique(arr) {var newArr = []for (var i = 0; i < arr.length; i++) {if (!newArr.includes(arr[i])) {newArr.push(arr[i])}}return newArr
}
console.log(unique([1,5,1,5,3,74,32,7,32,6,9,4,7,4]));
// 结果是[1, 5, 3, 74, 32, 7, 6, 9, 4]

Methods 5：利用数组的 filter 和 includes方法

同理，filter+indexOf也可

function unique(arr) {var newArr = []newArr = arr.filter(function (item) {return newArr.includes(item) ? '' : newArr.push(item)})return newArr
}
console.log(unique([1,5,1,5,3,74,32,7,32,6,9,4,7,4]));
// 结果是[1, 5, 3, 74, 32, 7, 6, 9, 4]

Methods 6：利用数组的 forEach 和 includes方法

function unique(arr) {let newArr = [];arr.forEach(item => {return newArr.includes(item) ? '' : newArr.push(item);});return newArr;
}
console.log(unique([1,1,2,5,6,3,5,5,6,8,9,8]));
// 结果是[1, 2, 5, 6, 3, 8, 9]

Methods 7：利用数组的 splice 方法。

function unique(arr){for(var i=0;i

Methods 8：利用Set()+Array.from()

代码最简洁，原理：

  • Set对象：是值的集合，你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次，即Set中的元素是唯一的。
  • Array.from() 方法：对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。
function unique(arr){return Array.from(new Set(arr))
}var arr = [1,1,2,9,6,9,6,3,1,4,5];console.log(unique(arr))
//[ 1, 2, 9, 6, 3, 4, 5 ]
词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：学生信息（c++基础）

下一篇：剑指 Offer 03. 数组中重复的数字

相关内容

热门资讯

原创 4... 写在文章前的声明：在本文之前的说明：本文中所列的投资信息，只是一个对基金资产净值进行排行的客观描述，...
胜宏科技港股大涨49% 做完英... 记者 陈月芹 4月21日，全球AI算力板龙头胜宏科技（02476.HK）登陆港交所，上市首日股价大涨...
永赢基金：聚焦“科技新锐”，科... 数据来源：Wind，时间统计区间为2025/1/1-2026/4/21，指数过往表现不预示未来，不构...
五大阅读趋势显现！当当网发布2... 在第31个世界读书日即将来临之际及首个全民阅读活动周期间，当当网正式发布2026国民阅读洞察报告。 ...
业绩逐季回暖 老百姓大药房一季... 上证报中国证券网讯（记者 夏子航）4月22日晚，老百姓大药房发布2025年年报和2026年一季报。今...
中国20强城市大洗牌：苏州接近... 中国的城市经济竞争格局一直在变化，每年发布的GDP数据都会对城市经济实力进行重新排列。2025年榜又...
直击金宏气体股东会：预期年内氦... 《科创板日报》4月22日讯（记者 郭辉）金宏气体日前举行2025年度股东大会。会上该公司审议了公司年...
5月1日起，俄据悉将叫停哈萨克... 据行业消息人士透露，俄罗斯将于5月1日起停止经友谊管道转运哈萨克斯坦输往德国的石油，相关调整计划已送...
深化具身智能生态布局 京东携手... 4 月 22 日，京东与国内消费级人形机器人头部企业松延动力正式达成三年期战略合作。双方将围绕产品研...
原创 帮... 先问你一个问题，美伊停火今晚到期，按常理避险情绪该升温，黄金应该涨吧？结果恰恰相反——原油涨了，黄金...
300295、600889，将... 三六五网、南京化纤，将被*ST。 公司股票自4月23日开市起停牌一天，于4月24日开市起复牌并实施退...
能源大变天！外媒：羡慕中国的石... 这一次油价突破 110 美元的能源危机，着实魔幻。如果放在十年前，没人会相信中国能在这场风波中获利，...
衡水老白干：2025年营收41...
黄金涨跌两难，现在还能上车吗？ 中新网4月22日电(记者 左雨晴) 四月以来，美伊局势反复拉扯，美联储降息预期一变再变。黄金价格在4...
“我身体健康”，库克现身员工大... 当地时间4月21日，受苹果官宣CEO换届影响，公司股价盘中下探超2%，总市值失守4万亿美元关口，收盘...
库克留下一个悬念 工程师能否拯救创新节奏？ 听筒Tech（ID:tingtongtech）原创 文 | 赵 森 ...
探索消费信贷与社交支付深度融合... 腾讯这一金融产品再添新功能，4月19日，北京商报记者注意到，微信分付灰度测试转账功能引发热议，在向微...
土耳其主要银行股指早盘下跌2% 每经AI快讯，4月20日，土耳其主要银行股指早盘下跌2%。 每日经济新闻
好用的OTA代运营源头厂家 在如今竞争激烈的酒旅行业中，OTA代运营服务成为了众多酒店、民宿提升竞争力的关键。但市场上的代运营厂...
成都五一出游全国热门第三 “五一”假期临近，同程旅行最新发布的《2026“五一”旅行趋势报告》显示，今年“五一”期间成都同时位...