js数组的几种去重方法
1：利用ES5新增数组的indexOf方法
indexOf方法能够帮助我们查找某个元素在数组中的位置，如果找到了该元素，则返回找到的第一个该元素所在的位置值，否则返回-1
因此我们可以写出如下代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> function fn(arr) { var newArr = []; //一个新的临时数组 for (var i = 0; i < arr.length; i++) { if (newArr.indexOf(arr[i]) == -1) { newArr.push(arr[i]); // 事先判断arr的元素是否已经在新数组中出现了 // 假如indexOf方法返回的是-1 则证明arr元素还没有在新数组中出现 // 这时再把该元素添加在新数组中 } } return newArr; } var a = [1, 2, 3, 1, 2, 4, 6, 5, 5, 8, 8, 3]; console.log(fn(a)); </script> </body> </html>
这个fn方法返回是一个新数组，原有数组没有改变
2：利用两个函数，一个函数负责向新数组添加元素，另一个函数负责判断该元素是否已经重复添加
这个方法其实就是讲上一个indexOf方法拆成另一个函数，不过indexOf方法是ES5新增的方法，所以有些浏览器是不支持
但以下代码可以
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> function fn(arr) { var newArr = []; for (var i = 0; i < arr.length; i++) { var t = isFalse(newArr, arr[i]); if (t == false) { newArr.push(arr[i]); // 通过isFalse函数来判断该arr元素是否在newArr里出现过 // 假如没有出现过 那么就把该元素添加在新数组里 } } return newArr; } function isFalse(arr, num) { for (var i = 0; i < arr.length; i++) { if (arr[i] == num) { return true; // return会结束函数，不用担心函数会执行下面的return false;代码 } } return false; } var a = [1, 2, 3, 1, 2, 4, 6, 5, 5, 8, 8, 3]; console.log(fn(a)); </script> </body> </html>
这个fn方法返回还是一个新数组，原有数组仍然没有改变
3：在原有数组的基础上，判断某个元素是否在后面出现过，如果出现过，则删除该元素
代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> function fn(arr) { for (var i = 0; i < arr.length; i++) { for (var j = i + 1; j < arr.length; j++) { if (arr[i] === arr[j]) { arr.splice(j, 1) j-- } } } // 大概思路 先在原先数组进行两遍遍历，先将原数组第一个与所有后面的进行比较如果相同 // 则删掉这个元素 同时因为数组长度变短了 如果不自减则会跳过下一个元素所以要j-- return arr } var arr = [1, 2, 3, 4, 2, 1, 2, 3, 4, 2, 3, 4, 6, 56, 7, 4, 2, 9, 7] console.log(fn(arr)); </script> </body> </html>
这个方法会直接改变原有数组，所以一般不推荐该方法。
4：利用sort方法来将数组进行排序，排序之后相同的元素会彼此相邻，这时在将原数组元素加入新数组时只加入不与前一值重复的值。
代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> function fn(arr) { arr.sort(); // js官方自带的函数，用来排序 var newArr = [arr[0]]; // 先将第一个arr元素加入到新数组中 // 因为在排序之后，第一个元素必定是与前面数值不同的 for (var i = 1; i < arr.length; i++) { if (arr[i] !== newArr[newArr.length - 1]) { newArr.push(arr[i]); // 通过判断 如果arr元素与新数组最后一个元素不相等 // 则表示该元素未在新数组中出现过，可以将该元素添加在新数组中 } } return newArr; } var a = [1, 2, 4, 9, 2, 3, 5, 6, 5, 5, 8, 9, 2]; console.log(fn(a)); </script> </body> </html>
这个fn函数虽然返回值是新函数，但是已经将原有数组的顺序改变了，所以一般也是不推荐使用该方法。
在js中 数组可以说是非常重要的，因为我们大部分时候都是将元素存储在数组里，这样方便我们随时可以使用，并且数组比较直观，可以让我们直观的看出数组的结构。数组通常作为存储数据的容器，数据必然是会随着时间的推移变得越来越多，在某些时候，重复的数据只会让数组看起来非常冗余，所以去重是提高数组再利用性的重要方法，以上我所讲的方法只是基于我在学习js两个星期之后的成果，必然算不上最优，但是某些态度还是要有的，以后我会学习到更加有效率的数组去重方法，那个时候我会再来补充。
原文：https://www.cnblogs.com/link-12188/p/12538862.html