JavaScript&ES6-multiple methods of deduplication of arrays

method one --- double for loop

uses a double-layer for loop, the previous one loops the previous item, the latter loops the next item, pairwise comparison, if you find duplicates, use the splice() attribute to delete the duplicate elements from the array 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 ]

Method Two ---- indexOf

must first declare a new array, use indexOf, return the index value if the duplicate element is found, return -1 if it is not found, and push into the new array

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 ]

Method Three ---- includes

uses the includes attribute in ES6

in ES6, Array.prototype.includes();
includes contains an element, return 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 ]

Method Four ----- Set()

In ES6, Set is similar to an array, but the values of the members are unique and there are no duplicate values. Set itself is a constructor, used to generate Set data structure exhibition. The Set constructor can accept an array (or other data structure with iterable interface) as a parameter to initialize

// 数组去重的第四种方法 
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 ]

After the method is encapsulated

// 利用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 ]
 

Method 5 ----- Use 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' ]

Method 6 ----- Use 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' ]

Method 7 ----- Use 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' ]

Method 8 -----Using recursion to remove duplicates

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' ]

Method 9 -----Using Map data structure to remove duplicates

principle : Create an empty Map data structures, arrays need to re-iterate, and put each element of the array as the key to save the Map. Since the same key value will not appear in the Map, the final result is the result after deduplication

// 利用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' ]

Method 10 ----- Use 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' ]