JavaScript中数组去重汇总

  1. 简单的去重方法,利用数组的indexOf下标属性来查询

/*
* 新建一新数组,遍历传入数组,值不在新数组就push进该新数组中
* IE8以下不支持数组的indexOf方法
* */
function newArr(nArr) {
    var arr = [];
    for(var i = 0; i < nArr.length; i++){
        if(arr.indexOf(nArr[i]) === -1){
            arr.push(nArr[i]);
        }
    }
    return arr;
}

  2. 利用双层for循环来判断

/*
*  定义一个新数组,并存放原数组的第一个元素,
*  然后将原数组和新数组一一对比,如果不同则存放新数组中。
* */
function unique(arr) {
    let res = [arr[0]];
    for(let i = 1; i < arr.length; i++){
        let repeat = false;
        for(let j = 0; j < res.length; j++){
            if(arr[i] === res[j]){
                repeat = true;
                break;
            }
        }
        if(!repeat){
            console.log(arr[i]);
            res.push(arr[i]);
        }
    }
    return res;
}

  3 利用数组原型对象上的includes方法。(ES6新增的)

function uniques(arr) {
    let res = [];
    for(let i = 0; i < arr.length; i++){
        if(!res.includes(arr[i])){
            res.push(arr[i]);
        }
    }
    return res;
}

  备注: 传统上只有indexOf一个方法,来判断一个字符串是否包含在另一个字符串当中,ES6后来新增三个方法:

  a. includes(string, n) 返回 布尔值,表示是否找到了参数字符串。

  b. startsWith(string, n) 返回布尔值,表示参数字符串是否在原字符串的头部

  c. endsWith(string, n) 返回布尔值,表示参数字符串是否在原字符串的尾部。

  上面代码表示,使用第二个参数n时,endsWith的行为与其他两个方法有所不同。它针对前n个字符,而其他两个方法针对从第n个位置直到字符串结束。

  4. 利用数组原型对象上的 filter 和 includes方法

function uniques(arr) {
    let res = [];
    res = arr.filter(function (item) {
        return res.includes(item) ? "" : res.push(item);
    });
    return res;
}

  5. 利用Set数据结构和数组符号"..."来判断 或者利用 Array.from()来转换

function uniques1(arr) {
    return [...new Set(arr)];
}

function uniques2(arr) {
    return Array.from(new Set(arr));
}

  备注: Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。

  6. 利用对象属性存在的特性,如果没有该属性则存入新数组。

function uniques(arr) {
    let res = [];
    let obj = {};
    for(let i = 0; i < arr.length; i++){
        if(!obj[arr[i]]){
            obj[arr[i]] = 1;
            res.push(arr[i]);
        }
    }
    return res;
}