JavaScript&ES6----数组去重的多种方法

方法一 --- 双层for循环

利用双层for循环，前一个循环前一项，后一个循环后一项，两两比对，如果发现重复的就用splice()属性，把重复的元素从数组arr中删除

let arr = [2,5,1,5,3,2,'hello','1',4]

let unique = (arr) =>{
    // 第一层for循环   循环数组前一项
    for(i = 0;i < arr.length;i++){
        //第二层for循环   循环数组后一项
        for(j = i+1;j < arr.length;j++){
            if(arr[i] === arr[j]){
           //splice(index,howmany)  j是索引值  1是要删除的个数
                arr.splice(j,1);
                //每删除一个元素，数组长度相应减一
                j--;
            }
        } 
    }
    return arr
}

console.log(unique(arr));  //[ 2, 5, 1, 3, 'hello', '1', 4 ]

方法二 ---- indexOf

要先声明一个新数组，利用indexOf，找到重复的元素则返回索引值，找不到返回-1，并push进新数组里

let arr = [2,5,1,5,3,2,'hello','1',4]
let unique1 = (arr) =>{
    // 声明一个新数组
    let newArr = [];
    for(i = 0;i< arr.length;i++){
  //等于-1则表示新数组里不存在该元素 符合条件 将该元素放入新数组 
     if(newArr.indexOf(arr[i]) === -1){
            newArr.push(arr[i])
        }
    }
    return newArr
}
console.log(unique1(arr));  //[ 2, 5, 1, 3, 'hello', '1', 4 ]

方法三 ---- includes

利用ES6中的includes属性

在ES6中，Array.prototype.includes();
includes是否包含某个元素，返回true/false

// 数组去重  第三种方法
let arr = [2,5,1,5,3,2,'hello','1',4]
let unique2 = (arr) =>{
    // 声明一个新数组
    let newArr = [];
    for(i = 0;i< arr.length;i++){
 //如果新数组newArr不包含该元素，则符合条件 放入新数组   
    if(!newArr.includes(arr[i])){
            newArr.push(arr[i])
        }
    }
    return newArr
}
console.log(unique2(arr));  //[ 2, 5, 1, 3, 'hello', '1', 4 ]

方法四 ----- Set() （比较常用）

在ES6中，Set类似于数组，但是成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成 Set 数据结构展。Set 构造函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化

// 数组去重的第四种方法 
let arr = [2,5,1,5,3,2,'hello','1',4]
let set = new Set(arr)
let [...a] = set   //数组解构的方法
console.log(set);  //Set(7) { 2, 5, 1, 3, 'hello', '1', 4 }
console.log(a);  //[ 2, 5, 1, 3, 'hello', '1', 4 ]

方法封装后

// 利用ES6 Set去重（ES6中最常用）
let arr = [2,5,1,5,3,2,'hello','1',4]
function unique1(arr) {
    return Array.from(new Set(arr))
}
console.log(unique1(arr));//[ 2, 5, 1, 3, 'hello', '1', 4 ]
 

方法五 ----- 利用sort()

let arr = [2, 5, 1, 5, 3, 2, 'hello', '1', 4]
function unique2(arr) {
    //如果传入的不是数组就返回错误信息
    if (!Array.isArray(arr)) {
        console.log('type error');
        return
    }
    //将数组排序
    arr = arr.sort()
    //把原数组的第一项放入新数组
    let newArr = [arr[0]]
    //遍历
    for (var i = 1; i < arr.length; i++) {
        //如果数组的后一项和前一项值和类型不等 就放进新数组
        if (arr[i] !== arr[i - 1]) {
            newArr.push(arr[i])
        }
    }
    //返回新数组
    return newArr
}
//返回的是一个去重且排好序的数组
console.log(unique2(arr));//[ 1, '1', 2, 3, 4, 5, 'hello' ]

方法六 ----- 利用hasOwnProperty

let arr = [2, 5, 1, 5, 3, 2, 'hello', '1', 4]
let unique4 = (arr) => {
    let obj = {}
    return arr.filter(function (item, index, arr) {
        //console.log(item); //是arr中的元素
        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
    })
}
console.log(unique4(arr));// [1, '1', 2, 3, 4, 5, 'hello' ]

方法七 ----- 利用filter

let arr = [2, 5, 1, 5, 3, 2, 'hello', '1', 4]
function unique5(arr) {
    return arr.filter(function (item, index, arr) {
        // console.log(index); //0 1 2 3 4 5 6 7 8 9
        //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
        return arr.indexOf(item, 0) === index
    })
}
console.log(unique5(arr));//[ 1, '1', 2, 3, 4, 5, 'hello' ]

方法八 -----利用递归去重

let arr = [2, 5, 1, 5, 3, 2, 'hello', '1', 4]
function unique6(arr) {
    arr.sort(function (a, b) {
        return a - b
    })
    function loop(index) {
        if (index >= 1) {
            if (arr[index] === arr[index - 1]) {
                arr.splice(index, 1)
            }
            //递归loop 然后数组去重
            loop(index - 1)
        }
    }
    loop(arr.length - 1)
    return arr
}
console.log(unique6(arr));//[ 1, '1', 2, 3, 4, 5, 'hello' ]

方法九 -----利用Map数据结构去重

原理：创建一个空Map数据结构，遍历需要去重的数组，把数组的每一个元素作为key存到Map中。由于Map中不会出现相同的key值，所以最终得到的就是去重后的结果

// 利用Map数据结构去重
let arr = [2, 5, 1, 5, 3, 2, 'hello', '1', 4]
function unique7(arr) {
    let map = new Map()
    let newArr = new Array()
    for (let i = 0; i < arr.length; i++) {
        // 判断 map 中是否已有该 key 值
        if (map.has(arr[i])) {
            // 后面的true 代表该 key 值在原始数组中重复了，false反之
            map.set(arr[i], true)
            // console.log('true',map);

        } else {
            // 如果 map 中没有该 key 值，添加进新数组
            map.set(arr[i], false)
            newArr.push(arr[i])
            // console.log('false',map);

        }
    }
    return newArr
}
console.log(unique7(arr)); //[ 1, '1', 2, 3, 4, 5, 'hello' ]

方法十 ----- 利用reduce+includes

let arr = [2, 5, 1, 5, 3, 2, 'hello', '1', 4]
function unique8(arr) {
    return arr.reduce((prev, cur) => prev.includes(cur) ? prev : [...prev, cur], [])
}
console.log(unique8(arr));//[ 1, '1', 2, 3, 4, 5, 'hello' ]