史上最详细JavaScript数组去重方法(11种)

简介: 使用set和Array.from ()方法 array.from可以将set结构转成数组

话不多说直接上代码:
1.将数组的每一个元素依次与其他元素做比较,发现重复元素,删除
var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5,5];
console.log(arr); //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5, 5, 5, 5]
function noRepeat1(arr) {
for(var i = 0; i < arr.length-1; i++){
for(var j = i+1; j < arr.length; j++){
if(arr[i]===arr[j]){
arr.splice(j,1);
j--;
}
}
}
return arr;
}
var arr2 = noRepeat1(arr);
console.log(arr2); //[1, 23, 3, 5, 6, 7, 9, 8]

2.借助indexOf()方法判断此元素在该数组中首次出现的位置下标与循环的下标是否相等
var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5];
console.log(arr); //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5, 5, 5]
function noRepeat2(arr) {
for (var i = 0; i < arr.length; i++) {
if (arr.indexOf(arr[i]) != i) {
arr.splice(i,1);//删除数组元素后数组长度减1后面的元素前移
i--;//数组下标回退
}
}
return arr;
}
var newArr = noRepeat2(arr);
console.log(newArr); //[1, 23, 3, 5, 6, 7, 9, 8]
3.利用数组中的filter方法
var arr = ['apple','banana','pear','apple','orange','orange'];
console.log(arr) //["apple", "banana", "pear", "apple", "orange", "orange"]
var newArr = arr.filter(function(value,index,self){
return self.indexOf(value) === index;
});
console.log(newArr); //["apple", "banana", "pear", "orange"]
4.借助新数组 通过indexOf方判断当前元素在数组中的索引如果与循环的下标相等则添加到新数组中
var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5];
console.log(arr) //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5, 5, 5]
function noRepeat4(arr) {
var ret = [];
for (var i = 0; i < arr.length; i++) {
if (arr.indexOf(arr[i]) == i) {
ret.push(arr[i]);
}
}
return ret;
}
var arr2 = noRepeat4(arr);
console.log(arr2); //[1, 23, 3, 5, 6, 7, 9, 8]
5.利用空对象来记录新数组中已经存储过的元素
var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];
console.log(arr) //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]
var obj={};
var newArr=[];
for(var i=0;i<arr.length;i++){
if(!obj[arr[i]]){
obj[arr[i]]=true;
newArr.push(arr[i]);
}
}
console.log(newArr); //[1, 23, 3, 5, 6, 7, 9, 8]
6.借助新数组,判断新数组中是否存在该元素如果不存在则将此元素添加到新数组中
var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];
console.log(arr); //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]
function noRepeat6(arr){
var newArr = [];
for(var i = 0; i < arr.length; i++){
if(newArr.indexOf(arr[i]) == -1){
newArr.push(arr[i]);
}
}
return newArr;
}
var arr2 = noRepeat6(arr);
console.log(arr2); //[1, 23, 3, 5, 6, 7, 9, 8]
7.借助新数组,判断新数组中是否存在该元素如果不存在则将此元素添加到新数组中(原数组长度不变但被按字符串顺序排序)
var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];
console.log(arr); //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]
function noRepeat7(arr) {
var ret = [],
end;//临时变量用于对比重复元素
arr.sort();//将数重新组排序
end = arr[0];
ret.push(arr[0]);
for (var i = 1; i < arr.length; i++) {
if (arr[i] != end) {//当前元素如果和临时元素不等则将此元素添加到新数组中
ret.push(arr[i]);
end = arr[i];
}
}
return ret;
}
var arr2 = noRepeat7(arr);
console.log(arr2); //[1, 23, 3, 5, 6, 7, 8, 9]

8.此方法没有借助新数组直接改变原数组,并且去重后的数组被排序
var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];
console.log(arr); //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]
function noRepeat8(arr) {
var end;//临时变量用于对比重复元素
arr.sort();//将数重新组排序
end = arr[0];
for (var i = 1; i < arr.length; i++) {
if (arr[i] == end) {//当前元素如果和临时元素相等则将此元素从数组中删除
arr.splice(i,1);
i--;
}else{
end = arr[i];
}
}
return arr;
}
var arr2 = noRepeat8(arr);
console.log(arr2); //[1, 23, 3, 5, 6, 7, 8, 9]

9.双层循环改变原数组
var arr = [1,1,2,2,3,3,4,4,5,5,4,3,1,2,6,6,6,6];
console.log(arr); //[1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 4, 3, 1, 2, 6, 6, 6, 6]
function noRepeat9(arr){
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr.length; j++) {
if (arr[i] == arr[j] && i != j) {//将后面重复的数删掉
arr.splice(j, 1);
}
}
}
return arr;
}
var arr2 = noRepeat9(arr);
console.log(arr2); //[1, 2, 3, 4, 5, 6]
10.借助新数组
var arr = [1,1,2,2,3,3,4,4,5,5,4,3,2,1,1,1];
console.log(arr); //[1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 4, 3, 2, 1, 1, 1]
var newArr = [];
for (var i = 0; i < arr.length; i++) {
var repArr = [];//接收重复数据后面的下标
//内层循环找出有重复数据的下标
for (var j = i + 1; j < arr.length; j++) {
if (arr[i] == arr[j]) {
repArr.push(j);//找出后面重复数据的下标
}
}
//console.log(repArr);
if (repArr.length == 0) {//若重复数组没有值说明其不是重复数据
newArr.push(arr[i]);
}
}
console.log(newArr); //[5, 4, 3, 2, 1]

11.借助ES6提供的Set结构
var arr = [1,1,2,2,3,3,4,4,5,5,4,3,2,1,1,1];
console.log(arr); //[1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 4, 3, 2, 1, 1, 1]
function noRepeat11(arr){
var newArr = [];
var myset = new Set(arr);//利用了Set结构不能接收重复数据的特点
for(var val of myset){
newArr.push(val)
}
return newArr;
}
var arr2 = noRepeat11(arr)
console.log(arr2); //[1, 2, 3, 4, 5]
总结:
使用indexOf ()方法
使用lastindexof()方法 和indexOf方法一样 indexof从头部开始匹配 lastindexof从尾部匹配
ES6的set结构set不接受重复数据
使用sort方法先将原数组排序,然后与相邻的比较,如果不同则存入新数组
使用filiter和indexof方法使用
ES6的set和扩展运算符
使用set和Array.from ()方法 array.from可以将set结构转成数组
用splice和双层循环
使用includes方法

相关文章
|
9天前
|
存储 JavaScript 对象存储
js检测数据类型有那些方法
js检测数据类型有那些方法
125 59
|
30天前
|
JavaScript 前端开发
JavaScript遍历数组和对象常用方法总结
以上代码展示了数组和对象的多种遍历方法。对于数组,使用了传统的 `for` 循环、`for...in` 和 ES6 的 `for...of` 进行遍历;对于对象,则通过 `for...in`、`Object.keys()`、`Object.values()` 和 `Object.entries()` 来获取键值对。`for...of` 循环适用于遍历具有迭代协议的数据结构,如数组、字符串等,而对象遍历则更多地依赖于 `Object` 方法来获取其属性集合。
JavaScript遍历数组和对象常用方法总结
|
3天前
|
JavaScript 前端开发 API
javaScript中常用的String方法以及注意点总结
本文总结了JavaScript中常用的String对象的方法及其注意事项,包括大小写转换、字符获取、子字符串截取、字符串拼接、去除空格、替换、分割以及查找字符串中字符的索引等操作。提供了每种方法的使用示例代码,帮助理解它们的具体用法和差异。
16 2
|
25天前
|
JavaScript 前端开发
JavaScript基础知识-方法
文章通过示例代码讲解了JavaScript中如何给对象添加方法以及如何调用这些方法。
21 2
JavaScript基础知识-方法
|
25天前
|
JavaScript 前端开发
JavaScript基础知识-数组的常用方法
关于JavaScript基础知识-数组的常用方法。
17 1
JavaScript基础知识-数组的常用方法
|
4天前
|
JavaScript 前端开发
JS之concat方法
本文介绍了JavaScript中`concat`方法的使用,展示了如何利用该方法来合并数组,包括与字符串、数字、对象等类型的拼接,以及使用扩展运算符进行合并的示例。
7 0
JS之concat方法
|
10天前
|
JavaScript 前端开发
JavaScript Array map() 方法
JavaScript Array map() 方法
|
30天前
|
JavaScript 算法 前端开发
JS算法必备之String常用操作方法
这篇文章详细介绍了JavaScript中字符串的基本操作,包括创建字符串、访问特定字符、字符串的拼接、位置查找、大小写转换、模式匹配、以及字符串的迭代和格式化等方法。
JS算法必备之String常用操作方法
|
30天前
|
JavaScript 算法 前端开发
JS算法必备之Array常用操作方法
这篇文章详细介绍了JavaScript中数组的创建、检测、转换、排序、操作方法以及迭代方法等,提供了数组操作的全面指南。
JS算法必备之Array常用操作方法
|
9天前
|
JavaScript 前端开发
JavaScript 中的新 Set 方法
JavaScript 中的新 Set 方法