【JavaScript】数组去重的方法详解

【JavaScript】数组去重常用的方法

方法一：利用排序和比较相邻两个数是否相同

步骤：

1. 先将数组进行排序

2. 将排序后的数组进行相邻之间的比较，判断他们是否相同

   如果相同，则删除其中一个。

var arr = [1, 4, 4, 7, 78, 34, 3, 1, 56, 7];
// 1.排序
arr.sort();
// 2.进行相邻比较
for (var i = 0; i < arr.length; i++) {
    if (arr[i] === arr[i + 1]) {
        arr.splice(i, 1);
        i--; // 防止数组塌陷
    }
}
console.log('去重后:', arr); // 去重后：[1, 4, 7, 78, 34, 3, 56]

该方法缺点：

1. 会修改原数组
2. 会改变原数组的排序

方法二：直接遍历，从前往后查找判断是否存在一样的

步骤：

1. 直接对原数组进行遍历

2. 从前往后查找，判断是否存在一样的数字

   如果存在，就删除。

var arr = [1, 4, 4, 7, 78, 34, 3, 1, 56, 7];
// 1.直接对原数组进行遍历
for (var i = 0; i < arr.length; i++) {
    // 如果找到就从该位置继续查找
    var index = arr.indexOf(arr[i], i + 1);
    if (index !== -1) {
        arr.splice(index, 1);
        i--; // 防止数组塌陷
    }
}
console.log('去重后：', arr); // 去重后：[1, 4, 7, 78, 34, 3, 56]

注：虽然该方法不会改变原数组的排序，但是会修改原数组。

方法三：创建新数组，判断原数组中的数据在新数组中是否存在

步骤：

1. 首先创建一个新的空数组

2. 然后判断原数组中的数据在新数组中是否存在

   如果不存在，放入新数组中。

var arr = [1, 4, 4, 7, 78, 34, 3, 1, 56, 7];
// 1. 创建一个新的空数组
var newArr = [];
for (var i = 0; i < arr.length; i++) {
    // 2.判断原数组中的数据在新数组中是否存在
    if (newArr.indexOf(arr[i]) === -1) {
        // 新数组中没有，放入
        newArr.push(arr[i]);
    }
}
console.log('原数组:', arr); // 原数组: [1, 4, 4, 7, 78, 34, 3, 1, 56, 7]
console.log('去重后:', newArr); // 去重后: [1, 4, 7, 78, 34, 3, 56]

注：该方法创建了新数组，既没有改变原数组，也没有修改原数组的排序。

方法四：利用ES6 新特性 new Set()

(1) 首先先简单介绍以下Set

1.Set 数据结构的特点：

• 长得像数组
• 天生不接受重复数据

2.Set 数据结构的语法：

new Set([数据1,数据2,数据3 ...]);

(2) 实现的数组去重的代码：

var a = new Set(arr);
console.log(a); // Set(7) {1, 4, 7, 78, 34, …}

注：以上两行代码输出的结果是Set格式的，如果想转换成数组格式方式有：

1. 利用Array.from()方法

   var result = Array.from(a);
   console.log('去重后：', result); // 去重后: [1, 4, 7, 78, 34, 3, 56]
   

2. 利用扩展运算符...

   var result = [...a];
   console.log('去重后：', result); // 去重后: [1, 4, 7, 78, 34, 3, 56]
   console.log('原数组：', arr); // 原数组: [1, 4, 4, 7, 78, 34, 3, 1, 56, 7]
   

注：此方法的特点：本身自带属性，方便简洁，不会影响原数组的顺序,不会改变原数组。

方法五：迭代方法【filter()+indexOf()】

步骤：

1. 使用filter()方法对原数组进行过滤
2. 利用indexOf()方法判断原数组项对应的索引是否等于indexOf()寻找到的值的索引
3. 将结果返回给新数组

这里其实是利用到indexOf()方法的使用规则（indexOf()永远输出的是不同值的第一个被查找到的索引值）

// indexOf()对应的查找结果：
// 0,0,0,0,0,5,6,7,5,7,10,0

var arr = [1, 4, 6, 34, 6, 7, 2, 2, 5, 6, 1];
var newArr = arr.filter(function(value, index) {
    return arr.indexOf(value) === index;
});
console.log('去重后:', newArr); // 去重后: [1, 4, 6, 34, 7, 2, 5]
console.log('原数组:', arr); // 原数组: [1, 4, 6, 34, 6, 7, 2, 2, 5, 6, 1]

注：该方法既没有改变原数组，也没有修改原数组的排序。