JavaScript实现数组去重的十种方法分享
方法1
利用 ES6的set 方法和解构赋值——最常用、最简单。
这个方法是es6之后加入的，是最简单的一种方法。
Set是一种结构，是一种不重复值的集合，如：{1,2,3}。它的特性之一就是里面的每一个值都是不重复的；
[...new Set(arr)] 意思是将Set结构解构赋值为数组。
function Unrepeated1(arr) {
return [...new Set(arr)]
}
console.log(Unrepeated1([1,1,2,2,3,3]));
// 结果是[1, 2, 3]
方法2
利用数组原型对象上的 lastIndexOf 方法——以前常用，逐渐被include代替
思路： 定义一个空数组，遍历这个原数组，如果空数组没有这个数就往空数组里加入，有的话就不操作。
lastIndeOf():返回指定字符串值最后出现的位置，从后向前搜索,找不到返回-1
function Unrepeated2(arr) {
var res = [];
for (var i = 0; i < arr.length; i++) {
res.lastIndexOf(arr[i]) !== -1 ? '' : res.push(arr[i]);
}
return res;
}
console.log(Unrepeated2([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
// 结果是[1, 2, 3, 5, 6, 7, 4]
方法3
利用数组原型对象上的 splice 方法。
思路是：双层遍历数组，举例：如果第一项是数字1，那么第二层遍历从第二项开始，如果后面也找到1，就把1删除。
splice（）：用于删除数组元素，splice（j，1）j代表数组索引是j,1代表删除1个
function Unrepeated3(arr) {
var i,j,len = arr.length;
for (i = 0; i < len; i++) {
for (j = i + 1; j < len; j++) {
if (arr[i] == arr[j]) {
arr.splice(j, 1);
len--;
j--;
}
}
}
return arr;
}
console.log(Unrepeated3([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
方法4
利用数组原型对象上的 forEach 和 includes方法——includes很强大
思路：定义一个空数组，遍历原数组，再遍历空数组，如果空数组里面含有原数组的项就添加进空数组，如果空数组已经有了，就不再操作。
includes：表示是否含有，返回布尔值，说的也是它以后会替代indexof。是es6新增的很强大的一个api，不止数组可以用，对象，字符串都可以用。
function Unrepeated4(arr) {
let newArr = [];
arr.forEach(item => {
return newArr.includes(item) ? '' : newArr.push(item);
});
return newArr;
}
console.log(Unrepeated4([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
// 结果是[1, 2, 3, 4, 5, 6, 7]
方法5
利用数组原型对象上的 filter 和 includes方法。
和方法4类似的思路，只不过foreach+includes换成了filter+includes
function Unrepeated5(arr) {
var newArr = []
newArr = arr.filter(function (item) {
return newArr.includes(item) ? '' : newArr.push(item)
})
return newArr
}
console.log(Unrepeated5([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
// 结果是[1, 2, 3, 5, 6, 7, 4]
方法6
利用数组原型对象上的includes方法。
这个方法可以作为一般性解法，代码可以进一步简化。
function Unrepeated6(arr) {
var newArr = []
for (var i = 0; i < arr.length; i++) {
if (!newArr.includes(arr[i])) {
newArr.push(arr[i])
}
}
return newArr
}
console.log(Unrepeated6([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
// 结果是[1, 2, 3, 5, 6, 7, 4]
方法7
利用数组的indexOf下标属性来查询。
思路和上面的类似
function Unrepeated7(arr) {
var newArr = []
for (var i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i])===-1) {
newArr.push(arr[i])
}
}
return newArr
}
console.log(Unrepeated7([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
// 结果是[1, 2, 3, 5, 6, 7, 4]
方法8
利用对象属性存在的特性，如果没有该属性则存入新数组。
这个方法兼容性比较好。思路是用一个空对象来标记，通过遍历，动态的设置对象的属性，以此来区分是否重复。
function Unrepeated8(arr) {
var obj={}
var newArr=[]
for (let i = 0; i < arr.length; i++) {
if (!obj[arr[i]]) {
obj[arr[i]] = 1
newArr.push(arr[i])
}
}
return newArr
}
console.log(Unrepeated8([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
// 结果是[1, 2, 3, 5, 6, 7, 4]
方法9
思路：先将原数组排序，在与相邻的进行比较，如果不同则存入新数组。
function Unrepeated9(arr) {
var formArr = arr.sort()
var newArr=[formArr[0]]
for (let i = 1; i < formArr.length; i++) {
if (formArr[i]!==formArr[i-1]) {
newArr.push(formArr[i])
}
}
return newArr
}
console.log(Unrepeated9([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
// 结果是[1, 2, 3, 4,5, 6, 7]
方法10
思路：定义一个新数组，并存放原数组的第一个元素，然后将元素组一一和新数组的元素对比，若不同则存放在新数组中。
function Unrepeated10(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;
}else{
}
}
if (!repeat) {
newArr.push(arr[i]);
}
}
return newArr;
}
console.log(Unrepeated10([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
// 结果是[1, 2, 3, 5, 6, 7, 4]到此这篇关于JavaScript实现数组去重的十种方法分享的文章就介绍到这了,更多相关JavaScript数组去重内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章给大家详细介绍了Promise中的then链机制用法,每一次 .then都会返回一个新的promise实例,文中通过代码示例给大家介绍的非常详细,需要的朋友可以参考下2023-12-12
这篇文章给大家详细介绍了electron 如何获取位置坐标信息,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-02-02
跟我学习javascript的Date对象，文章主要介绍了Date 日期和时间对象的操作，文章末尾为大家附加了两个案例，帮助大家更好的学习javascript的Date对象，对这方面感兴趣的小伙伴们可以参考一下2015-11-11
PHP实现基于Redis的MessageQueue队列封装操作示例
这篇文章主要介绍了PHP实现基于Redis的MessageQueue队列封装操作,结合实例形式分析了Redis的PHP消息队列封装与使用相关操作技巧,需要的朋友可以参考下2019-02-02
本篇内容主要给大家讲了如何通过javascript解析JSON并得到数据后添加到HTML中的方法，需要的朋友参考下。2017-11-11
本文主要介绍了javascript history对象的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要为大家详细介绍了JS实现电脑虚拟键盘的操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
这篇文章主要介绍了JS如何根据当前日期获取一周所有日期,文中通过实例代码补充介绍了js获取当前一周的时间,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
js中没有foreach这个关键字，但是可以用var v in array来实现遍历，下面有个不错的示例，大家可以参考下2014-05-05
这篇文章主要介绍了js图片向右一张张滚动效果实例代码，有需要的朋友可以参考一下2013-11-11
最新评论