黑马程序员技术交流社区

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

作者: 逆风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