js数组去重的5种方法，高效实现JavaScript数组去重的5种技巧

JavaScript中实现数组去重有多种方法，以下列举五种常用技巧：1. 使用对象属性作为唯一标识去重；2. 利用Set构造函数直接去重；3. 通过排序后相邻比较去重；4. 使用filter方法结合indexOf判断重复；5. 通过Map对象记录元素出现次数去重，这些方法各有特点，适用于不同场景和性能需求。

大家好，最近我在学习JavaScript的过程中遇到了一个挺有意思的问题，就是如何去除数组中的重复元素，我们都知道，数组是JavaScript中非常常用的数据结构，但在实际应用中，有时候数组中会出现重复的数据，这会影响我们的数据处理，今天我想和大家分享一下JavaScript中去除数组重复元素的五种方法,希望能帮助到大家。

一：使用ES6新特性

使用Set对象 ES6引入了Set对象，这是一个类似于数组的对象，但是成员的值都是唯一的，我们可以通过将数组转换为Set对象,然后再转换回数组的方式来去除重复元素。

let arr = [1, 2, 2, 3, 4, 4, 5];
let uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4, 5]

使用Array.from() Array.from()方法可以从类数组对象（如Set对象）创建一个新的数组实例，结合Set对象,我们可以实现去重。

let arr = [1, 2, 2, 3, 4, 4, 5];
let uniqueArr = Array.from(new Set(arr));
console.log(uniqueArr); // [1, 2, 3, 4, 5]

使用扩展运算符 扩展运算符（...）可以将一个数组展开为多个参数，结合Set对象,可以实现去重。

let arr = [1, 2, 2, 3, 4, 4, 5];
let uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4, 5]

二：传统方法

使用循环和临时数组 我们可以通过循环遍历原数组,将不重复的元素添加到一个新的临时数组中。

let arr = [1, 2, 2, 3, 4, 4, 5];
let uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
  if (uniqueArr.indexOf(arr[i]) === -1) {
    uniqueArr.push(arr[i]);
  }
}
console.log(uniqueArr); // [1, 2, 3, 4, 5]

使用filter()方法 filter()方法可以创建一个新数组，包含通过所提供函数实现的测试的所有元素，我们可以使用filter()方法来去除重复元素。

let arr = [1, 2, 2, 3, 4, 4, 5];
let uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index);
console.log(uniqueArr); // [1, 2, 3, 4, 5]

使用indexOf()和splice()方法 我们可以通过indexOf()方法查找元素在数组中的位置，然后使用splice()方法将其移除。

let arr = [1, 2, 2, 3, 4, 4, 5];
for (let i = 0; i < arr.length; i++) {
  let index = arr.indexOf(arr[i]);
  if (index !== i) {
    arr.splice(index, 1);
    i--;
  }
}
console.log(arr); // [1, 2, 3, 4, 5]

三：性能比较

Set方法性能较好 使用Set对象的方法通常性能较好，因为Set内部实现是哈希表，查找和插入操作的时间复杂度接近O(1)。

传统方法性能较差 传统方法，如循环和indexOf()，性能较差，尤其是当数组长度较大时，时间复杂度接近O(n^2)。

注意内存消耗 使用Set方法可能会消耗更多内存,因为Set内部需要存储所有唯一元素的值。

四：注意事项

保持数组原顺序 在使用Set方法时，数组的顺序可能会发生变化，如果需要保持原顺序,可以使用扩展运算符结合Set。

处理不同类型的数据 当数组中包含不同类型的数据时，如字符串和数字,使用Set方法可以自动去除重复元素。

考虑数据类型 在使用传统方法时，需要注意数据类型的一致性,否则可能会导致错误的结果。

五：总结

就是JavaScript中去除数组重复元素的五种方法，在实际应用中，我们可以根据具体情况选择合适的方法，希望这篇文章能帮助大家更好地理解和应用这些方法，如果你还有其他问题,欢迎在评论区留言讨论。

其他相关扩展阅读资料参考文献：

JS数组去重的五种方法

使用Set数据结构去重

Set是一种特殊的类型,它只允许存储唯一的值，我们可以利用Set的特性来实现数组的去重。

利用Set的自动去重特性

这是最简单的方法,只需将数组转换为Set，然后再转回数组即可，这种方法简洁明了，但需要ES6及以上的支持。

示例代码：

let arr = [1, 2, 3, 4, 4, 5];
let uniqueArr = [...new Set(arr)]; // 利用扩展运算符将Set转回数组
console.log(uniqueArr); // 输出：[1, 2, 3, 4, 5]

优点：代码简洁，易于理解。
缺点：依赖于ES6及以上的环境支持，对于旧环境可能需要额外的polyfill支持。

使用双重循环判断去重

通过双层循环遍历数组,比较元素是否重复并过滤掉重复项，这是一种基础的方法，适用于所有JavaScript环境。

使用双重循环进行去重
示例代码：

let arr = [1, 2, 3, 4, 4, 5];  
let uniqueArr = [];  
for (let i = 0; i < arr.length; i++) {  
    let isDuplicate = false;  
    for (let j = 0; j < uniqueArr.length; j++) {  
        if (arr[i] === uniqueArr[j]) {  
            isDuplicate = true;  
            break;  
        }  
    }  
    if (!isDuplicate) {  
        uniqueArr.push(arr[i]);  
    }  
}  
console.log(uniqueArr); // 输出：[1, 2, 3, 4, 5]  

优点：适用于所有JavaScript环境。
缺点：效率相对较低，特别是对于较大的数组，代码相对冗长。
改进方向：可以考虑使用其他数据结构（如哈希表）来提高效率。
三、使用filter方法去重 filter方法是数组的一个内置方法，可以结合其他方法（如indexOf等）进行去重操作，这种方法相对直观，但效率可能不是最优的，示例代码：javascript let arr = [1, 2, 3, 4, 4, 5]; let uniqueArr = arr.filter((value, index, self) => self.indexOf(value) === index); console.log(uniqueArr); // 输出：[1, 2, 3, 4, 5] 优点：代码相对简洁。缺点：效率不高，特别是对于较大的数组。使用reduce方法去重reduce方法是数组的又一个内置方法，可以用于累加或转换数组元素，通过适当使用reduce方法，也可以实现数组的去重操作。优点：代码简洁且可读性强。缺点：对于不熟悉reduce方法的开发者可能较难理解。自定义去重函数使用递归或迭代算法自定义一个去重函数也是一种常见的做法，这种方法可以根据具体需求进行定制和优化。五种方法各有优缺点，可以根据具体场景和需求选择适合的方法来实现数组的去重操作。**在实际开发中，可以根据项目需求和性能要求选择合适的方法，也可以尝试结合多种方法来实现更高效、更灵活的去重操作。