【JS提升】数组去重若干方法

1. for循环去重

方法一

思路

两次循环：

外层循环整个要去重的数组

内层拿到外层元素，与容器元素进行对比，如果容器里没有则追加，如果有则break

var arr = [1, 1, 2, 6, 3, 5, 0, 4, 4, 2];

function uniqueArr(array) {
    var _arr = [], // 存放容器
        isRepeat; // 锁 -> 判断是否重复
    for (var i = 0; i < array.length; i++) {
        isRepeat = false;
        for (var j = 0; j < _arr.length; j++) {
            if (_arr[j] == array[i]) {
                // _arr.push(array[i]);  
                // 这里push最后输出的是[]，原因是因为 _arr始终是空的，
                // 一直没有机会进入判断语句进行push，所以说只能做个标记，在外层循环判断进行push
                isRepeat = true; // 标记锁
                break;
            }
        }
        if (!isRepeat) { 
            _arr.push(array[i]); // 追加到容器
        }
    }
    return _arr;
}

console.log(uniqueArr(arr).sort()); // [ 0, 1, 2, 3, 4, 5, 6 ]

方法二

思路

还是两次循环：

外层循环拿到数组的一个项，内层循环该项后面的所有项进行对比，如果循环对比完都不相等，则存入到容器，如果相等则break

var arr = [1, 1, 2, 6, 3, 5, 0, 4, 4, 2];

function uniqueArr(array) {
    var _arr = [],
        isRepeat;
    for (var i = 0; i < array.length; i++) {
        isRepeat = false;
        for (var j = i + 1; j < array.length; j++) {
            if (array[j] == array[i]) {
                isRepeat = true;
                break;
            }
        }
        if (!isRepeat) {
            _arr.push(array[i]);
        }
    }
    return _arr;
}

console.log(uniqueArr(arr).sort()); // [ 0, 1, 2, 3, 4, 5, 6 ]

第一种效率要高一些，第二种要慢一些

2. filter去重

var arr = [1, 1, 2, 6, 3, 5, 0, 4, 4, 2];

function uniqueArr(array) {
    return array.filter(function(item, index) {
        return array.indexOf(item) === index; // 只会返回第一次出现的下标
    })
}
console.log(uniqueArr(arr).sort()); // [ 0, 1, 2, 3, 4, 5, 6 ]

思路

利用indexOf只会返回第一次出现的下标，和filter的index进行对比，如果相等说明是第一次出现，如果不等说明出现不止一次

var arr = [2, 2, 2];
console.log(arr.indexOf(2)); // 0

3. forEach去重

var arr = [1, 1, 2, 6, 3, 5, 0, 4, 4, 2];

function uniqueArr(array) {
    var _arr = [];
    array.forEach(function(item) {
        if (_arr.indexOf(item) === -1) {
            _arr.push(item);
        }
    })
    return _arr;
}
console.log(uniqueArr(arr).sort()); // [ 0, 1, 2, 3, 4, 5, 6 ]

4. sort去重

方法一

思路

通过sort把所有相同项排在一起，然后把当前项与下一项进行对比，若相同则push

var arr = [1, 1, 2, 6, 3, 5, 0, 4, 4, 2];

function uniqueArr(array) {
    var _arr = [];
    array.sort(); // 会改变原数组，所以可以直接排序
    for (var i = 0; i < array.length; i++) {
        if (array[i] !== array[i + 1]) {
            _arr.push(array[i]);
        }
    }
    return _arr;
}
console.log(uniqueArr(arr).sort()); // [ 0, 1, 2, 3, 4, 5, 6 ]

方法二

思路

和 _arr 的最后一项比较，相当于就是拿上一项与后面的项进行比较

var arr = [1, 1, 2, 6, 3, 5, 0, 4, 4, 2];

function uniqueArr(array) {
    var _arr = [];
    array.sort();
    for (var i = 0; i < array.length; i++) {
        if (array[i] !== _arr[_arr.length - 1]) { // 和 _arr 的最后一项比较
            _arr.push(array[i]);
        }
    }
    return _arr;
}
console.log(uniqueArr(arr).sort()); // [ 0, 1, 2, 3, 4, 5, 6 ]

5. includes去重（ES6）

var arr = [1, 1, 2, 6, 3, 5, 0, 4, 4, 2];

function uniqueArr(array) {
    var _arr = [];
    array.forEach(function(item) {
        if (!_arr.includes(item)) {
            _arr.push(item);
        }
    })

    return _arr;
}
console.log(uniqueArr(arr).sort()); // [ 0, 1, 2, 3, 4, 5, 6 ]

indexOf 和 includes 有什么区别

array.indexOf(item); // - 1 或 index -> 返回索引 -> 对NaN 无效
array.includes(item); // true 或 false -> 返回布尔 -> 对NaN有效

6. sort + reduce

思路

prev 为空 或 prev 的最后一项比较，相当于就是拿上一项与后面的项进行比较

var arr = [1, 1, 2, 6, 3, 5, 0, 4, 4, 2];

function uniqueArr(array) {
    var _arr = [];
    return arr.sort().reduce(function(prev, item) {
        // 为空，或者最后一项不等于item
        if (prev.length === 0 || prev[prev.length - 1] !== item) {
            prev.push(item);
        }
        return prev;
    }, []);
}
console.log(uniqueArr(arr).sort()); // [ 0, 1, 2, 3, 4, 5, 6 ]

7. Map去重

Map的好处

Map比普通对象好的地方：

普通对象键名必须是一个字符串，如果不是，会默认将其变为字符串；

而Map不是，Map的键名还可以是一个对象

Map主要解决键名是一个对象

方法一（Map）

思路

用Map（相当于对象），里面设置该项为属性，值为1，每次循环就会判断Map有没有该属性，没有则添加属性，且存入容器，有点类似于indexOf

var arr = [1, 1, 2, 6, 3, 5, 0, 4, 4, 2];

function uniqueArr(array) {
    var _arr = []
    _temp = new Map();
    for (var i = 0; i < array.length; i++) {
        if (!_temp.get(array[i])) {
            _temp.set(array[i], 1);
            _arr.push(array[i]);
        }
    }
    return _arr;
}
console.log(uniqueArr(arr).sort()); // [ 0, 1, 2, 3, 4, 5, 6 ]

方法二（Object）

把 Map 改成 Object

var arr = [1, 1, 2, 6, 3, 5, 0, 4, 4, 2];

function uniqueArr(array) {
    var _arr = []
    _temp = new Object(); // 把 Map 改成 Object
    for (var i = 0; i < array.length; i++) {
        if (!_temp[array[i]]) {
            _temp[array[i]] = 1;
            _arr.push(array[i]);
        }
    }
    return _arr;
}
console.log(uniqueArr(arr).sort()); // [ 0, 1, 2, 3, 4, 5, 6 ]

8. Set去重

Set的好处

Set所有的值都是唯一的

var arr = [1, 1, 2, 6, 3, 5, 0, 4, 4, 2];

function uniqueArr(array) {
    return Array.from(new Set(array));
}
console.log(uniqueArr(arr).sort()); // [ 0, 1, 2, 3, 4, 5, 6 ]