js 数组去重方法总结

Posted 2021-03-23 jiangtengteng

var arr = [1, 1, ‘true‘, ‘true‘, true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, ‘NaN‘, ‘NaN‘, 0, 0, ‘a‘, ‘a‘, {}, {}];

/*
 * ES3 的方法
 */

// 方法一 思路：新建空数组，利用双层for循环，逐一取出传入数组的项与新数组中的每一项做对比，如果没有相同的则将该项插入新数组中，如果对比项相同则跳出当前循环回到父循环中继续做下一轮对比。新数组为去重后的数组，不会影响老数组
// 优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null。
// 缺点：不能过滤掉 NaN、Object
function unique1(arr) {
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
        if (newArr.length == 0) {
            newArr.push(arr[i]);
        } else {
            var isPush = true;
            for (var k = 0; k < newArr.length; k++) {
                if (newArr[k] == arr[i]) {
                    isPush = false;
                    break;
                };
            };
            if (isPush == true) {
                newArr.push(arr[i]);
            }
        }
    };
    return newArr;
};
console.log(unique1(arr)); // [1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}]


// 方法二 思路：新建空数组，利用双层for循环，将传入数组的项（从第一项开始）与其后面的项做对比，如果有相同的，不做处理，如果没有相同的，就插入到新数组中。新数组为去重后的数组，不会影响老数组
// 优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null。
// 缺点：不能过滤掉 NaN、Object
function unique2(arr) {
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
        for (var k = i + 1; k < arr.length; k++) {
            if(arr[k] == arr[i]){
                k = ++i;
            };
        };
        newArr.push(arr[i]);
    };
    return newArr;
};
console.log(unique2(arr)); // ["true", true, 15, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]


// 方法三 思路：双层for循环，让当前项与其后面的项做比较，如果相同，就对后面重复的项做删除操作，会影响老数组。
// 优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null。
// 缺点：不能过滤掉 NaN、Object
// 备注 示例方法是正向遍历，也可以逆向遍历，此处不做演示
function unique3(arr) {
    for (var i = 0; i < arr.length; i++) {
        for (var k = i + 1; k < arr.length; k++) {
            if (arr[k] == arr[i]) {
                arr.splice(k, 1);
                k--;
            }
        }
    }
};
unique3(arr)
console.log(arr); // [1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}]


// 方法四 思路：利用对象的属性名字不能重复的特点，建立新对象，将数组中的某项作为属性名放到对象当中，使用for循环判断对象属性是否存在，如果存在，不进行操作，如果不存在则放置到对象中。
// 优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null、NaN、Object。
// 缺点：针对 NaN和‘NaN‘, 对象的key会视为一个key，区分不了NaN和‘NaN‘。
function unique4(arr) {
    var newObj = {},
        newArr = [];
    for (var i = 0; i < arr.length; i++) {
        if (!newObj[arr[i]]) {
            newObj[arr[i]] = true;
            newArr.push(arr[i]);
        }
    }
    return newArr;
};
console.log(unique4(arr)); // [1, "true", 15, false, undefined, null, NaN, 0, "a", {…}]


// 方法五 思路：利用sort()方法先将数组排序，然后使用for循环遍历排序后的数组，如果当前项与其后面相邻的项不相同，则将该项插入新数组中，此方法不改变元素组，返回排序后的新数组。
// 优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null。
// 缺点：不能过滤掉 NaN、Object
function unique5(arr){
    var sortArr = arr.sort(function(a, b){
        return a - b;
    });
    var newArr = [sortArr[0]];
    for(var i = 1; i< sortArr.length;i++){
        if(sortArr[i] !== sortArr[i-1]){
            newArr.push(sortArr[i]);
        }
    };
    return newArr;
};
console.log(unique5(arr)); // [1, "true", false, null, 0, true, 15, {…}, {…}, NaN, NaN, "NaN", "a", undefined]


// 方法六 思路：利用sort()方法先将数组排序，然后创建递归函数判断当前项与其后面的项是否相同，相同用splice方法删除，然后运行递归函数继续进行判断操作。
// 优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null。
// 缺点：不能过滤掉 NaN、Object
function unique6(arr) {
    var newArr = arr,
        arrLen = arr.length;
    var sortArr = arr.sort(function(a, b) {
        return a - b;
    });

    function loop(index) {
        if (index >= 1) {
            if (newArr[index] === newArr[index - 1]) {
                newArr.splice(index, 1);
            };
            loop(index - 1);
        }
    };
    loop(arrLen - 1);
    return newArr;
};
console.log(unique6(arr)); // [1, "true", false, null, 0, true, 15, {…}, {…}, NaN, NaN, "NaN", "a", undefined]



/*
 * ES5的方法
 */

// 方法七 思路：结合indexOf()方法和forEach()方法，如果老数组中循环的项在新数组中不存在，则将该项插入新数组，不改变老数组，返回新数组。注意indexOf()方法也可以用lastIndexOf()方法替代，forEach()方法也可以用for循环替代的。
// 优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null。
// 缺点：不能过滤掉 NaN、Object
function unique7(arr){
    var newArr = [];
    // for(var i = 0; i< arr.length; i++){
    //     if(newArr.indexOf(arr[i]) === -1){
    //         newArr.push(arr[i]);
    //     }
    // }
    arr.forEach(function(item, index, array){
        if(newArr.indexOf(item) === -1){
            newArr.push(item);
        }
    });
    return newArr;
};
console.log(unique7(arr)); // [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]


// 方法八 思路：结合includes()方法和forEach()方法，includes方法检测数组中是否有某个值。
// 优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null、NaN。
// 缺点：不能过滤掉Object
function unique8(arr){
    var newArr = [];
    arr.forEach(function(item, index, array){
        if(!newArr.includes(item)){
            newArr.push(item);
        }
    });
    return newArr;
};
console.log(unique8(arr)); // [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]


// 方法九 思路：结合includes()方法和filter()方法，includes方法检测数组中是否有某个值。
// 优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null、NaN。
// 缺点：不能过滤掉Object
function unique9(arr){
    var newArr = [];
    arr.filter(function(item){
        if(!newArr.includes(item)){
            newArr.push(item);
        }
    });
    return newArr;
};
console.log(unique9(arr)); // [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]


// 方法十 思路：结合indexOf()方法和filter()方法，includes方法检测数组中是否有某个值。
// 优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null。
// 缺点：不能过滤掉 NaN、Object
function unique10(arr){
    var newArr = [];
    arr.filter(function(item){
        if(newArr.indexOf(item) === -1){
            newArr.push(item);
        }
    });
    return newArr;
};
console.log(unique10(arr));  // [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]


// 方法十一 思路：利用map()方法去重。
// 优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null、NaN。
// 缺点：不能过滤掉 Object
function unique11(arr){
    var map = new Map();
    var newArr = [];
    arr.forEach(function(item){
        if(map.has(item)){
            map.set(item, true);
        } else {
            map.set(item, false);
            newArr.push(item);
        }
    });
    return newArr;
};
console.log(unique11(arr));  // [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]


// // 方法十二 思路：利用hasOwnProperty去重。
// // 优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null、NaN、Object。
function unique12(arr){
    var obj = {};
    return arr.filter(function(item){
        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true);
    });
};
console.log(unique12(arr));  // [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}]


/*
 * ES6的方法
 */

// 方法十三 思路：利用ES6中的拓展运算符...和set()方法。
// 优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null、NaN。
// 缺点：不能过滤掉Object
function unique13(arr){
    return [...new Set(arr)];
};
console.log(unique13(arr)); // [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]


// 方法十四 思路：利用ES6中Array.from()方法和set()方法，set()方法可以生产set数据结构，这种结构成员的值是唯一的，然后用Array.from()方法将set对象转为数组。
// 优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null、NaN。
// 缺点：不能过滤掉Object
function unique14(arr){
    return Array.from(new Set(arr));
};
console.log(unique14(arr)); // [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]