史上最全JavaScript数组去重的十种方法（推荐）

一、前言： 我们在实际工作中，或者在面试找工作时，都会用到或者被问到一个问题，那就是“数组如何去重”。是的，这个问题有很多种解决方案，看看下面的十种方式吧！ 二、数组去重方式大汇总： Methods 1: 思路：定义一个新数组，并存放原数组的第一个元素，然后将元素组一一和新数组的元素对比，若不同则存放在新数组中。 function unique(arr){ var res = [arr[0]]; for(var i=1; i&lt;arr.length; i++){ var repeat = false; for(var j=0; j&lt;res.length; j++){ if(a 在JavaScript编程中，数组去重是一项常见的任务，尤其在处理数据集合时显得尤为重要。本文将详细介绍十种不同的JavaScript数组去重方法，以帮助开发者更好地理解和掌握这些技巧。 1. **方法一：遍历新数组比较法** 这是最基础的方法，通过创建一个新的空数组`res`，然后遍历原数组`arr`，将不重复的元素添加到新数组中。这种方法简单直观，但效率较低，因为需要两次遍历。 ```javascript function unique(arr) { var res = [arr[0]]; for (var i = 1; i < arr.length; i++) { var repeat = false; for (var j = 0; j < res.length; j++) { if (arr[i] === res[j]) { repeat = true; break; } } if (!repeat) { res.push(arr[i]); } } return res; } ``` 2. **方法二：排序后比较法** 先对数组进行排序，然后遍历排序后的数组，将不相邻的元素添加到新数组中。这种方法依赖于数组排序，时间复杂度较高。 ```javascript function unique2(arr) { var arr2 = arr.sort(); var res = [arr2[0]]; for (var i = 1; i < arr2.length; i++) { if (arr2[i] !== res[res.length - 1]) { res.push(arr2[i]); } } return res; } ``` 3. **方法三：利用对象属性特性** 利用JavaScript对象的属性不存在则创建的特性，将数组元素作为对象属性，若未存在则添加到新数组。这种方法适用于数组元素为字符串或基本类型的情况。 ```javascript function unique3(arr) { var res = []; var obj = {}; for (var i = 0; i < arr.length; i++) { if (!obj[arr[i]]) { obj[arr[i]] = 1; res.push(arr[i]); } } return res; } ``` 4. **方法四：利用`indexOf`下标属性** 遍历原数组，通过`indexOf`方法检查元素是否已存在于新数组，不存在则添加。这种方法也适用于基本类型的数组元素。 ```javascript function unique4(arr) { var res = []; for (var i = 0; i < arr.length; i++) { if (res.indexOf(arr[i]) == -1) { res.push(arr[i]); } } return res; } ``` 5. **方法五：利用`includes`方法** 同方法四，但使用`includes`代替`indexOf`，更现代且避免了负数返回值的困扰。 ```javascript function unique5(arr) { var res = []; for (var i = 0; i < arr.length; i++) { if (!res.includes(arr[i])) { res.push(arr[i]); } } return res; } ``` 6. **方法六：利用`filter`和`includes`** 使用数组的`filter`方法，结合`includes`判断元素是否存在于新数组，如果不存在则保留。 ```javascript function unique6(arr) { var res = []; res = arr.filter(function(item) { return res.includes(item) ? '' : res.push(item); }); return res; } ``` 7. **方法七：利用`forEach`和`includes`** 通过`forEach`遍历数组，结合`includes`判断并添加元素。 ```javascript function unique7(arr) { var res = []; arr.forEach(function(item) { if (!res.includes(item)) { res.push(item); } }); return res; } ``` 8. **方法八：利用ES6 Set** `Set`是ES6新增的数据结构，具有自动去重的特性。通过将数组转换为Set，然后再转换回数组。 ```javascript function unique8(arr) { return [...new Set(arr)]; } ``` 9. **方法九：利用Map** 类似于方法三，但使用Map，更适合处理复杂类型（如对象）的数组。 ```javascript function unique9(arr) { var map = new Map(); return arr.filter(function(item) { return !map.has(item) && map.set(item, 1); }); } ``` 10. **方法十：双指针法** 使用两个指针，一个指向新数组，一个指向原数组，如果新数组指针指向的元素不等于原数组指针指向的元素，则交换它们的位置并移动新数组指针。 ```javascript function unique10(arr) { let i = 0, j = 1; while (j < arr.length) { if (arr[i] !== arr[j]) { i++; [arr[i], arr[j]] = [arr[j], arr[i]]; } j++; } return arr.slice(i); } ``` 以上十种方法各有优劣，适用于不同场景。在实际开发中，应根据具体需求和性能要求选择合适的方法。例如，对于大型数据集，可能需要考虑使用Set或Map，而对于小型数据集，基础的遍历方法可能就足够了。了解并熟练掌握这些方法，将有助于提高代码质量和效率。