2020-07-25 02:38:29
在JavaScript中,数组去重是一个常见的需求,有多种方法可以实现。以下是六种常用的去重方法,每种方法都有其特点和适用场景:
方法一:双层循环,外层循环元素,内层循环时比较值这种方法通过双重循环遍历数组,外层循环选取一个元素,内层循环比较该元素与后续元素是否相同。如果相同则跳过,不相同则将该元素加入结果数组。
Array.prototype.distinct = function() { var arr = this, result = [], i, j, len = arr.length; for (i = 0; i < len; i++) { for (j = i + 1; j < len; j++) { if (arr[i] === arr[j]) { j = ++i; } } result.push(arr[i]); } return result;};var arra = [1, 2, 3, 4, 4, 1, 1, 2, 1, 1, 1];arra.distinct(); // 返回 [3, 4, 2, 1]方法二:利用splice直接在原数组进行操作这种方法通过双重循环遍历数组,外层循环选取一个元素,内层循环比较该元素与后续元素是否相同。如果相同则使用splice方法删除该元素,并调整数组长度和索引。
Array.prototype.distinct = function() { var arr = this, i, j, len = arr.length; for (i = 0; i < len; i++) { for (j = i + 1; j < len; j++) { if (arr[i] == arr[j]) { arr.splice(j, 1); len--; j--; } } } return arr;};var a = [1, 2, 3, 4, 5, 6, 5, 3, 2, 4, 56, 4, 1, 2, 1, 1, 1, 1, 1, 1];var b = a.distinct();console.log(b.toString()); // 1,2,3,4,5,6,56优点:简单易懂。缺点:占用内存高,速度慢。
方法三:利用对象的属性不能相同的特点进行去重这种方法利用对象的属性唯一性来去重。遍历数组,将每个元素作为对象的属性,如果属性不存在则加入结果数组。
Array.prototype.distinct = function() { var arr = this, i, obj = {}, result = [], len = arr.length; for (i = 0; i < arr.length; i++) { if (!obj[arr[i]]) { obj[arr[i]] = 1; result.push(arr[i]); } } return result;};var a = [1, 2, 3, 4, 5, 6, 5, 3, 2, 4, 56, 4, 1, 2, 1, 1, 1, 1, 1, 1];var b = a.distinct();console.log(b.toString()); // 1,2,3,4,5,6,56方法四:数组递归去重这种方法先对数组进行排序,然后从后向前递归比较相邻元素,删除重复项。
Array.prototype.distinct = function() { var arr = this, len = arr.length; arr.sort(function(a, b) { return a - b; }); function loop(index) { if (index >= 1) { if (arr[index] === arr[index - 1]) { arr.splice(index, 1); } loop(index - 1); } } loop(len - 1); return arr;};var a = [1, 2, 3, 4, 5, 6, 5, 3, 2, 4, 56, 4, 1, 2, 1, 1, 1, 1, 1, 1, 56, 45, 56];var b = a.distinct();console.log(b.toString()); // 1,2,3,4,5,6,45,56方法五:利用indexOf以及forEach这种方法使用indexOf和forEach遍历数组,检查当前元素在数组中后续是否还存在,如果不存在则加入结果数组。
Array.prototype.distinct = function() { var arr = this, result = [], len = arr.length; arr.forEach(function(v, i, arr) { var bool = arr.indexOf(v, i + 1); if (bool === -1) { result.push(v); } }); return result;};var a = [1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 3, 2, 3, 3, 2, 2, 1, 23, 1, 23, 2, 3, 2, 3, 2, 3];var b = a.distinct();console.log(b.toString()); // 1,23,2,3方法六:利用ES6的SetES6的Set数据结构自动去重,可以通过Array.from或扩展运算符将Set转换为数组。
function dedupe(array) { return Array.from(new Set(array));}dedupe([1, 1, 2, 3]); // [1, 2, 3]// 使用扩展运算符let arr = [1, 2, 3, 3];let resultarr = [...new Set(arr)];console.log(resultarr); // [1, 2, 3]合并数组并去重的方法方法一:concat()方法使用concat合并数组,然后调用去重方法。
function concatArr(arr1, arr2) { var arr = arr1.concat(arr2); arr = unique1(arr); // 引用上述任意去重方法 return arr;}方法二:Array.prototype.push.apply()使用push.apply合并数组到第一个数组,然后去重。
function concatArray(arr1, arr2) { Array.prototype.push.apply(arr1, arr2); arr1 = unique1(arr1); // 引用上述任意去重方法 return arr1;}总结以上六种方法各有优缺点,选择哪种方法取决于具体需求和性能考虑。ES6的Set方法最为简洁高效,但在旧版浏览器中可能需要polyfill支持。