JavaScript数组去重

时间:2022-06-28 Du9191 人气:0

原数组

const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}];

1.对象属性（indexof）

利用对象属性key排除重复项

遍历数组，每次判断新数组中是否存在该属性，不存在就存储在新数组中

并把数组元素作为key，最后返回新数组

这个方法的优点是效率高，缺点是使用了额外空间

var newArr = [];
arr.forEach((key,index)=>{
    if(newArr.indexOf(key) === -1){
        newArr.push(key)
　　}        
})
console.log(newArr);// [1, '1', 17, true, false, 'true', 'a', {}, {}]

2.new Set(数组)

Set是一系列无序、没有重复值的数据集合，传入一个需要去重的数组，Set会自动删除重复的元素

再将Set转数组返回。此方法效率高，代码清晰，缺点是存在兼容性问题

const newArr = [...new Set(arr)];
console.log(newArr);// [1, '1', 17, true, false, 'true', 'a', {}, {}]

3.new Map()

利用Map的键值对同名覆盖，再将Map转数组

const m = new Map();
for (let i = 0; i < arr.length; i++) {
    m.set(arr[i], arr[i]);
}
const newArr = []
m.forEach(function (value, key) {
    newArr .push(value)
})
console.log(newArr );//[1, '1', 17, true, false, 'true', 'a', {}, {}]

4.filter() + indexof

filter把接收的函数依次作用于每一个数组项，然后根据返回值 true or false 决定是否保留该值

优点在于可在去重时插入对元素的操作，可拓展性强

const newArr= arr.filter(function(item,index,self){
    return self.indexOf(item) === index;
})
console.log(newArr);//  [1, '1', 17, true, false, 'true', 'a', {}, {}]

5.reduce() + includes

reduce()把结果继续和序列的下一个元素做累加计算

利用reduce遍历和传入一个空数组作为去重后的新数组，然后内部判断新数组中是否存在当前遍历的元素，不存在就插入新数组

缺点在于时间消耗多，内存空间也额外占用

const newArray = arr.reduce((newArr, element) => {
　　if (!newArr.includes(element)) {
　　　　newArr.push(element);
　　}
   return newArr;
}, []);

注意点：

在数据量较低时，以上五个方法无较为明显的区别（10000条）

高于10000条时，前两种方法时间消耗最少，后三种时间消耗依次增加

第一种方法空间占用多，当下很多项目不再考虑低版本游览器兼容性问题

推荐使用Set()去重方法

补充

当然实现数组去重还有很多其他的方法，下面小编为大家整理了一些

利用for嵌套for，然后splice去重

    function unique(arr) {
        for (var i = 0; i < arr.length; i++) {
            for (var j = i + 1; j < arr.length; j++) {
                if (arr[i] == arr[j]) { //第一个等同于第二个，splice方法删除第二个
                    arr.splice(j, 1);
                    j--;
                }
            }
        }
        return arr;
    }
    var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,
        'NaN', 0, 0, 'a', 'a', {}, {}
    ];
    console.log(unique(arr))

hasOwnProperty

function unique(arr) {
    var obj = {};
    return arr.filter(function(item, index, arr){
        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
    })
}

利用递归去重

 function unique(arr) {
        var array = arr;
        var len = array.length;

        array.sort(function (a, b) { //排序后更加方便去重
            return a - b;
        })

        function loop(index) {
            if (index >= 1) {
                if (array[index] === array[index - 1]) {
                    array.splice(index, 1);
                }
                loop(index - 1); //递归loop，然后数组去重
            }
        }
        loop(len - 1);
        return array;
    }
    var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,
        'NaN', 0, 0, 'a', 'a', {}, {}
    ];
    console.log(unique(arr))

加载全部内容