js 数组去重的其中常用7种方法

方法一: 哈希表思想 (最高性能)
思路: 新建一个结果数组, 一个存储标志的对象 hash, 遍历数组, 对象中的属性值为 true时 不添加

function unique(arr) {
    var result = [],
    hash = {};
    for(let ele of arr) {
        if(!hash[ele]) {
            result.push(ele);
            hash[ele] = true
        }
    }
    return result
}
var arr = [1, 23 ,34, 45, 1, 6, 4, 23];
unique(arr); // [1, 23, 34, 45, 6, 4]

方法二: 遍历数组 用 indexOf()/includes()
思路1: 新建一个数组 result, 遍历原数组, 当 arr[i]不存在于新数组中, 就添加 push进新数组, 得到的新数组就是不重复的

function unique(arr) {
    var result = [];
    for(var i = 0; i < arr.length; i++) {
        if(result.indexOf(arr[i] == -1) ) {
        // indexOf 等于 -1 时 代表数组中没有该值
            result.push(arr[i]);
        }
    }
        return result;
}
var arr = [1, 23 ,34, 45, 1, 6, 4, 23];
unique(arr); // [1, 23, 34, 45, 6, 4]

思路2: 新建一个数组 result, 如果新数组中该值 ele 不存在, 则将原数组内容添加 push(i)

function unique(arr) {
    var result = [];
    for(let ele of arr) {
        !result.includes(ele) && result.push(ele)
    } 
    return result
}
var arr = [1, 23 ,34, 45, 1, 6, 4, 23];
unique(arr); // [1, 23, 34, 45, 6, 4]

方法三: 数组下标判断法
思路1: 利用indexOf 返回的时钟是第一个相同数值的下标, 如果新增的内容在原来数组中的下标和现在的下标不同, 那么就证明它是重复的

function unique(arr) {
    var result = [];
    for(var i = 0; i < arr.length; i++){
        if(arr.indexOf(arr[i]) == i) {
            // 元素的下标与检索出的下标相同 代表第一次出现
            result.push(arr[i]);
        }
    }
        return result;
}
var arr = [1, 23 ,34, 45, 1, 6, 4, 23];
unique(arr); // [1, 23, 34, 45, 6, 4]

思路2: 直接删除重复的数, 对比从前往后查和从后往前差的索引

function unique(arr) {
    var result = [];
    for(var i = 0; i < arr.length; i++) {
        if(arr.indexOf(arr[i]) == arr.lastIndexOf(arr[i])) {
            result.push(arr[i])
        }
    }
    return result;
}
var arr = [1, 23 ,34, 45, 1, 6, 4, 23];
unique(arr); // [34, 45, 6, 4]

方法四: 排序, 去除相邻的重复值
思路: 给数组排序, 排序后相同的值会相邻, 遍历排序后的数组时, 新数组只加入不与前值相同的值

function unique(arr) {
    arr.sort();
    var result = [arr[0]];
    for(var i = 1; i < arr.length; i++) {
        arr[i] !== arr[i - 1] && result.push(arr[i])
    }
    return result
}
var arr = [1, 23 ,34, 45, 1, 6, 4, 23];
unique(arr); // [1, 23, 34, 45, 6, 4]

方法五: 双层循环遍历
思路1: 有重复值时 终止当前循环

function unique(arr) {
    var result = [];
    for(var i = 0; i < arr.length; i++) {
        for(var j = i + 1; j < arr.length; j++) {
            // 如果前后值相同 直接进入外层的 i+1
            if(arr[i] === arr[j]) {
                i++;
            }
        }
        result.push(arr[i]);
    }
    return result;
}
var arr = [1, 23 ,34, 45, 1, 6, 4, 23];
unique(arr); // [34, 45, 1, 6, 4, 23]

思路2: 两层循环遍历, 如果有重复的值, 则用 splice() 删除

function unique(arr) {
    for(let i = 0; i< arr.length; i++) {
        for(let j = i + 1; j < arr.length; j++) {
            if(arr[i] == arr[j]) {
                arr.splice(j, 1);
                arr.length --;
                j--;
            }
        }
    }
    return arr
}
var arr = [1, 23 ,34, 45, 1, 6, 4, 23];
unique(arr); // [1, 23, 34, 45, 6, 4]

方法六: ES6 的 Set 结构(高性能)
思路: Set结构成员的值都是唯一的, Set函数可以接受一个数组作为参数, 用来初始化

function unique(arr) {
    var x = new Set(arr);
    return [...x]
    // 或者简化为 return Array.from(new Set(arr))
}
var arr = [1, 23 ,34, 45, 1, 6, 4, 23];
unique(arr); // [1, 23, 34, 45, 6, 4]

方法七: ES6的 Array.filter()
思路: 利用 Array.filter() 方法的过滤方法, 将数组进行过滤, 筛选条件是数组下标与检索标签一致
concat() 方法 用于连接两个或多个数组, 该方法不会改变现有的数组, 而会返回被链接数组的一个副本
filter() 方法 通过检查指定数组中复合条件的所有元素, 不会改变原始数组, 会创建一个新数组

function unique(arr) {
    return arr.filter((item, index) => {
        return arr.indexOf(item) === index
    })
}
var arr = [1, 23 ,34, 45, 1, 6, 4, 23];
unique(arr); // [1, 23, 34, 45, 6, 4]