前端必备的几种数组排序和去重的方法

前端开发避免不了对各种数据类型的处理，其中数组的排序和去重是必备的技能，往往面试时也也会经常遇到。

数组排序：

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

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