js数组去重方法包括Es6(方法有很多,但是需要考虑兼容性和数据类型场景)

1、Es6提供的方法

<script type="text/javascript">
    //ES6里新添加了两个方法,set(set是一种新的数据结构,它可以接收一个数组或者是类数组对象,自动去重其中的重复项目)
    //Array.from(类数组对象、可迭代对象转化为数组)。
    var arr = [1, 2, 3, 2, 4, 5, 5, null, null, undefined, undefined, NaN, NaN]
    const item = new Set(arr);
    const newArr = Array.from(item);
    console.log(newArr, '去重后的数组')//[1, 2, 3, 4, 5, null, undefined, NaN] "去重后的数组"
    const arr1 = [1,1,2,3,4,4,3,5,5,5,6,7,8,8];
    console.log(noRepeat(arr1,'去重后'))//[1, 2, 3, 4, 5, 6, 7, 8]
    //ES6方法去重封装(目前主流的浏览器,Chrome,Firfox,Opera,Safari,包括微软的Edge,都是支持的,唯独IE系列不支持,所以慎用 )
    function noRepeat(arr) { 
        return Array.from(new Set(arr));
    }
</script>
<script type="text/javascript">
    var arr = [NaN,NaN,undefined,undefined,false,false,true,true,1,1,2,3,4,5,33,33,4,5,6];
    arr = [...new Set(arr)];
    console.log(arr,'去重后');//[NaN, undefined, false, true, 1, 2, 3, 4, 5, 33, 6] "去重后"
</script>

2.下标查询(通常简单做法)

<script type="text/javascript">
    //(普通做法)
    const list = [1,2,3,4,5,3,4,5,3,6];
    console.log(noRepeat(list),'去重后');//[1, 2, 3, 4, 5, 6] "去重后"
  //ie8以下不支持indexOf()方法 function noRepeat(arr) {   var newArr = [];   for(var i = 0; i < arr.length; i++) {     if(newArr.indexOf(arr[i]) == -1) {   newArr.push(arr[i]);   } } return newArr; } </script>
<script type="text/javascript">
   //下标检索 //实现思路:如果当前数组的第i项在当前数组中第一次出现的位置不是i, //那么表示第i项是重复的,忽略掉。否则存入结果数组。 function noRepeat(arr) { var temp = []; for(var i = 0; i < arr.length; i++) { //如果当前数组的第i项在当前数组中第一次出现的位置是i,才存入数组;否则代表是重复的 if(arr.indexOf(arr[i]) == i) { temp.push(arr[i]) } } return temp; } var list = [1,2,3,33,33,2,3,2,3,4,6,7,9]; console.log(noRepeat(list),'去重后');//[1, 2, 3, 33, 4, 6, 7, 9] 去重后 </script>

3.用对象属性去重

<script type="text/javascript">
    //每次取出原数组的元素,然后再对象中访问这个属性,如果存在就说明重复;
    var arr = [1, 2, 3, 3, '1', '1', '去掉', '去掉', NaN, NaN, false, false];
    var obj = {};
    var temp = [];
    for(var i = 0; i < arr.length; i++) {
        var type = Object.prototype.toString.call(arr[i]); //加类型判断数据类型 如区分 1 '1'  
        if(!obj[arr[i] + type]) {
            temp.push(arr[i]);
            obj[arr[i] + type] = true; //这里给true利于代码阅读和判断,如果给 0,'' ,false ,undefined 都会在if那里判断为 false不利于代码阅读
        }
    }
    console.log(temp, '去重') //[1, 2, 3, "1", "去掉", NaN, false] "去重"
</script>
<script type="text/javascript">
    //封装一下;
    function noRepeat(arr) {
        var newArr = [];
        var obj = {};
        for(var i = 0; i < arr.length; i++) {  
            var type = Object.prototype.toString.call(arr[i]); //加类型判断数据类型 如区分 1 '1'  
            if(!obj[arr[i] + type]) {    
                newArr.push(arr[i]);    
                obj[arr[i] + type] = true; //这里给true利于代码阅读和判断,如果给 0,'' ,false ,undefined 都会在if那里判断为 false不利于代码阅读    
            }  
        }
        return newArr;
    }
    var list = [1, 2, 2, 3, 4, '3', '3', NaN, NaN, false, false, true, true];
    console.log(noRepeat(list), '去重后')//[1, 2, 3, 4, "3", NaN, false, true] "去重后"
</script>

4.先排序再去重

<script type="text/javascript">
    var list = [1, 2, 3, 3, '0', '0', '2', '测试', '测试', NaN, NaN, false, false];
    function noRepeat(arr) {
        arr.sort();
        var temp = [];
        while(arr.length > 0) {
            if(Object.is(arr[0], arr[1])) { //Object.is() 用于比较2个值, 比===更靠谱  例如 Object.is(NaN,NaN) 会判断true
                arr.shift();
            } else {
                temp.push(arr.shift());
            }
        } //此方法会清空原数组,可以复制一个数组,再进行操作
        return temp
    }
    console.log(noRepeat(list), '去重后')//["0", 1, 2, "2", 3, NaN, false, "测试"] "去重后"
</script>

5.for in + array.includes(ES6判断)

<script type="text/javascript">
    var arr = [1,3, 3, '1', '1', '1','重复', '重复', NaN, NaN, false, false,undefined,undefined];
    function noRepeat(arr) {
        var temp = [];
        for(var i = 0; i < arr.length; i++) {
            if(!temp.includes(arr[i])) { //includes检测数组是否有某个值 内部调用Object.is()利用判断NaN
                temp.push(arr[i]);
            }
        }
        return temp
    }
    console.log(noRepeat(arr), '去重后'); //[1, 3, "1", "重复", NaN, false, undefined] "去重后"
</script>

 

posted @ 2019-01-10 11:34  鱼樱前端  阅读(4068)  评论(0编辑  收藏  举报