JavaScript面试题：实现数组去重

数组去重

对这个数组进行去重：var arr = [2,3,1,4,2,5,3,7,2];

方式一 indexOf()方法

/*
    方式一：indexOf方法
    原理是：
        indexOf方法找到指定值时返回元素下标，未找到时返回-1。
    过程：
        定义一个空数组array，对这个空数组array使用indexOf()方法判断是不是存在指定元素
        这个指定元素是外部数组中传进来的元素
        array中不存在，返回-1，存在，则返回元素对应的下标
        indexOf方法返回的值是-1时，将传进来的元素添加进这个array数组中
        返回的值不是-1时，表示这个元素在array中已经存在，就不添加了
*/

function removeRepeat1(arr){
    var array = new Array();
    for(var i = 0; i<arr.length; i++){
        if(array.indexOf(arr[i]) == -1){
            array.push(arr[i]);
        }
    }
    return array;
}

var result1 = removeRepeat1(arr);
console.log(result1); //[ 2, 3, 1, 4, 5, 7 ]

方式二 先排序后去重

/* 
    方式二：先排序，然后去重
    去重原理是，拿一个数组存储去重后的元素，
    拿这个去重数组中最后一个元素和原数组中已经去重的元素的后面一个元素比较，
    不相同，则将原数组中的元素添加进去重数组。
 */

console.log(arr.sort()); // [1, 2, 2, 2, 3, 3, 4, 5, 7]

function removeRepeat2(arr){
    arr.sort((a,b)=>a-b); //从小到大排序
    // return arr;
    var array = [arr[0]];
    for(var i = 1; i<arr.length; i++){
        if(arr[i] !== array[array.length -1]){
            array.push(arr[i]);
        }
    }
    return array;
}


console.log(removeRepeat2(arr)); //[ 1, 2, 3, 4, 5, 7 ]

方式三 ES6中的Set集合去重

ES6 的Set 集合 去重 （高性能） set可以接受一个数组参数并返回一个不重复的对象。Array.form从类数组对象或者可迭代对象中创建一个新的数组实例。

function removeRepeat3(arr){
    return Array.from(new Set(arr));
}
console.log(removeRepeat3(arr)); //[ 2, 3, 1, 4, 5, 7 ]

方式四 过滤器fillter()方法

/*
	原理：filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
*/

// function removeRepeat4(arr){
//     return arr.filter(function(item,index){
//         return arr.indexOf(item) == index;
//     }).sort((a,b)=>a-b);
// }

function removeRepeat4(arr){
	//返回一个满足条件的数组
    return arr.filter((item,index)=>{
        return arr.indexOf(item) == index; 
        //重复元素第一次出现的索引和自身索引相同时才满足条件
    }).sort((a,b)=>a-b);
}

console.log(removeRepeat4(arr)); //[ 1, 2, 3, 4, 5, 7 ]

方式五 双重for循环解决（比较片面）

/* 
    原理是将元素后面有重复的值赋值置null
    需要注意的是，使用条件是数组中最开始并未存储null值
*/
function removeRepeat5(arr){
    var array = [];

    for(var i = 0; i<arr.length; i++){
        for(var j = i+1; j<arr.length; j++){
            if(arr[i] !== null && arr[i] === arr[j]){
                arr[j] = null;
            }
        }
        if(arr[i] !== null){
            array.push(arr[i]);
        }else{
            continue;
        }
    }
    return array;
}

console.log(removeRepeat5(arr)); //[ 2, 3, 1, 4, 5, 7 ]

方式六 使用布尔类型判断是否重复

/*
	思路：定义一个新数组，最开始存储原数组第一个值，定义一个布尔类型变量，存储判断是否重复的结果（true、false），然后拿原数组中的单独一个值和新数组所有值一一作比较，若该值是和新数组存储的值一样的值则布尔变量改变，跳过原数组当前元素，若不同，则将原数组当前值添加进新数组。
*/
var arr = [2,3,1,4,2,5,3,7,2];
function removeRepeat6(arr){
    var newArr = [arr[0]];
    for(var i = 1; i<arr.length; i++){
        var isRepeat = false;
        for(var j = 0; j<newArr.length; j++){
            if(arr[i] === newArr[j]){
                isRepeat = true;
                break;
            }
        }
        if(!isRepeat){
            newArr.push(arr[i]);
        }
    }
    return newArr;
}

console.log(removeRepeat6(arr)); //[ 2, 3, 1, 4, 5, 7 ]

方式七 使用数组原型对象上的 splice 方法

/*
/*
splice() 方法用于添加或删除数组中的元素，返回的是被删除或添加元素后的原始数组。
这种方法会改变原始数组。
语法为：array.splice(index,howmany,item1,.....,itemX)，其中howmany为删除元素个数
*/

var arr = [2,3,1,4,2,5,3,7,2];

function removeRepeat7(arr){
    var len = arr.length;
    for(var i = 0; i<len; i++){
        for(var j = i+1; j<len; j++){
            if(arr[i] == arr[j]){
                arr.splice(j,1); 
                len--;
                j--; //删除重复值的时候len改变了，所以j也要改变
            }
        }
    }
    return arr;
}
console.log(removeRepeat7(arr)); //[ 2, 3, 1, 4, 5, 7 ]

方式八 使用数组原型对象上的includes方法

/*
    includes()方法用于判断数组中是否包含某个指定元素
*/
function removeRepeat8(arr){
    var newArr = [];
    for(var i = 0; i<arr.length; i++){
        if(!newArr.includes(arr[i])){
            newArr.push(arr[i]);
        }
    }
    return newArr;
}

console.log(removeRepeat8(arr)); //[ 2, 3, 1, 4, 5, 7 ]

方式九 includes()+forEach()

/*
	forEach() 方法用于调用数组的每个元素，对每个元素进行操作
*/
function removeRepeat9(arr){
    var newArr = [];
    arr.forEach(function(elem){
        if(!newArr.includes(elem)){
            newArr.push(elem);
        }
    });
    return newArr;
}

console.log(removeRepeat9(arr)); //[ 2, 3, 1, 4, 5, 7 ]

方式十 利用对象不能存储重复属性的特性（哈希思想）

function removeRepeat10(arr){
    var obj = {} //定义一个空对象obj
    var newArr = [] //定义一个空数组
    for(var elemOfArr of arr){
        if(!obj[elemOfArr]){
          newArr.push(elemOfArr);
          obj[elemOfArr] = true;
        }
    }
    //等同于下面这个
    /*
    for(var i = 0; i<arr.length; i++){
        if(!obj[arr[i]]){
            obj[arr[i]] = 1
            newArr.push(arr[i]);
        }
    }
    */
    return newArr;
}
console.log(removeRepeat10(arr)); //[ 2, 3, 1, 4, 5, 7 ]

方式十一：reduce()+indexOf()

function removeRepeat11(arr) {
    return arr.reduce((pre, cur) => {
        if (pre.indexOf(cur) === -1) {
            pre.push(cur)
        }
        return pre
    }, [])
}

console.log(removeRepeat11(arr));