黑马程序员技术交流社区

标题: 【西安校区】前端必备的几种数组排序和去重的方法 [打印本页]

作者: 逆风TO    时间: 2019-10-14 16:11
标题: 【西安校区】前端必备的几种数组排序和去重的方法
前端开发避免不了对各种数据类型的处理,其中数组的排序和去重是必备的技能,往往面试时也也会经常遇到。

数组排序:
1.简单的sort排序:
var arr=[1,5,3,87,23];
arr.sort(function(a,b){
        return a-b;
})
console.log(arr)//输出:[1,23,3,5,87]

注:若返回b-a可获得从大到小的排序;
数组的sort方法只能实现简单的按位排序,并不精确。如下:

var arr=[1,2,4,5,11,22];
arr.sort(function(a,b){
        return a-b;
})
console.log(arr)//输出:[1,11,2,22,4,5]

2.冒泡排序
var arr=[1,5,2,6,3,3,4,56,7,5,5,5,6,7,8];

function fn(arr){   //冒泡排序(以从小到大为例)
    for(var i=0;i<arr.length-1;i++){ //控制比较的轮数
        for(var j=0;j<arr.length-1-i;j++){ //内层每轮比较的次数
            if(arr[j]>arr[j+1]){  
                var temp=arr[j];  //交换这两个值的位置
                arr[j]=arr[j+1];
                arr[j+1]=temp;
            }
        }
    }
    return arr;
}

3.选择排序
function fn(arr){ //选择排序
    //用这个数分别和别的数相比较,改变的是索引的位置,每轮结束后才交换为位置
    for(var i=0;i<arr.length-1;i++){  //控制外层比较的轮数
        var minIndex=i;  //先假定一个最小值,定义变量minIndex指向该值的索引
        for(var j=i+1;j<arr.length;j++){
            if(arr[minIndex]>arr[j]){
                minIndex=j;  //改变最小索引的指向
            }
        }
        var temp=arr[i];   //每轮比较结束,将最初假定的最小值和实际最小值交换
        arr[i]=arr[minIndex];
        arr[minIndex]=temp;
    }
    return arr;  //将排序后的数组返回
}

数组去重:
1.数组sort加splice截取去重(推荐)
原理:使用sort进行简单排序,将相同项放一起,然后循环比较截取

var arr1=[1,3,6,6,6,4];

function noRepeat(arr){
        arr.sort()//使用sort进行简单排序,将相同项放一起
    for(var i=0;i<arr.length;i++){ //控制外层循环
            if(arr[i]==arr[i+1]){
                arr.splice(i+1,1); //从数组中删除元素,此时数组发生改变
                i--;  //此时原数组的索引都向前减了1,因此i--z再去比较一次
            }
    }
    return arr;
}
console.log(noRepeat(arr1));

2.数组splice截取方法去重
var arr1=[1,3,6,6,6,4];

function noRepeat(arr){
    for(var i=0;i<arr.length;i++){ //控制外层循环
        for(var j=i+1;j<arr.length;j++){ //控制内层
            if(arr[i]==arr[j]){
                arr.splice(j,1); //从数组中删除元素,此时数组发生改变
                j--;  //此时原数组的索引都向前减了1,因此j--z再去比较一次
            }
        }
    }
    return arr;
}
console.log(noRepeat(arr1));

3.数组indexOf方法去重(推荐)
原理:若数组中不包含某一元素则它的indexOf值为-1,若为-1则将该元素放入新数组中,最终返回新数组即为去重后的数组

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;
    }

4.借助对象的特性去重(推荐)
原理:若object里不存在某一属性,其值为undefined;把数组中的元素当对象的属性来判断
先声明一个空数组和一个空对象,然后遍历数组,判断对象中是否含有该属性,若为undefined则将该元素放入新数组中,并给与该属性一个属性值1,最终返回新数组即为去重后的数组

var arr1=[1,3,6,6,6,4];

function noRepeat(arr){  //利用数组和对象结合的方式去重
    var newArr=[];
    var obj={};
    for(var i=0;i<arr.length;i++){
        //把数组中的元素当成对象的属性
        if(obj[arr[i]]==undefined){  //如果第一次出现会得到undefined
            newArr.push(arr[i]);  //将第一次出现的值加入到新数组中
            obj[arr[i]]=1;  //给obj对象的属性赋值,使其重复的值得到的结果不为undefined
        }
    }
    return newArr;
}
console.log(noRepeat(arr1));

Es6新增方法
5.set与解构赋值去重
function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    return [...new Set(arr)]
}

6.Array.from与set去重
function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    return Array.from(new Set(arr))
}

7.利用filter的数组去重
var r;
var arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];

r = arr.filter(function (element, index, self) {
    return self.indexOf(element) === index;
  });

alert(r);

以上提供了多种数组去重方法,可自行选择使用,也可自行测试这几种方法的耗时性能。







欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2