千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > 前端常见算法

前端常见算法

来源:千锋教育
发布人:wjy
时间: 2022-06-02 13:27:00 1654147620

这里总结了一些前端常见的算法。

**1、排序问题**

**1.1冒泡排序**

该算法就是依次比较大小,小的的大的进行位置上的交换。

```js
var ex=[8,95,34,21,53,12];
 function sortarr(arr){
  for(i=0;i<arr.length-1;i++){
   for(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;
 }
 sortarr(ex);
 console.log(ex);
//当i=0的时候,里面的循环完整执行,从j=0执行到j=6,这也就是第一遍排序,结果是将最大的数排到了最后,这一遍循环结束后的结果应该是[8,34,21,53,12,95]
//当i=1的时候,里面的循环再次完整执行,由于最大的数已经在最后了,没有必要去比较数组的最后两项,这也是j<arr.length-1-i的巧妙之处,结果是[8,34,21,12,53,95]
//说到这里,规律就清楚了,每次将剩下数组里面最大的一个数排到最后面,当第一个循环执行到最后的时候,也就是i=6,此时,j=0,只需要比较数组的第一和第二项,比较完毕,返回。
```

前端常见算法

**1.2快速排序**

```js
//快速排序
var example=[1,4,3,8,9,6,2]
   
function quickSort(arr){
  if(arr.length<=1){
    return arr;
  }
  var left=[],right=[],current=arr.splice(0,1);
  for(let i=0;i<arr.length;i++){
    if(arr[i]<current){
      left.push(arr[i])
    }else{
      right.push(arr[i])
    }
  }
  return quickSort(left).concat(current,quickSort(right));
}
console.log(quickSort(example)); //[1, 2, 3, 4, 6, 8, 9]


//2.
function quickSort(arr,l,r){
    if(l < r){
        var i = l, j = r, x = arr[i];
        while(i<j){
            while(i<j && arr[j]>x)
                j--;
           
            if(i<j)
                //这里用i++,被换过来的必然比x小,赋值后直接让i自加,不用再比较,可以提高效率
                arr[i++] = arr[j];
           
            while(i<j && arr[i]<x)
                i++;
           
            if(i<j)
                //这里用j--,被换过来的必然比x大,赋值后直接让j自减,不用再比较,可以提高效率
                arr[j--] = arr[i];
        }
        arr[i] = x;
       
        quickSort(arr, l, i-1);
        quickSort(arr, i+1, r);
    }
}
```

**1.3二路归并**

将两个按值有序序列合并成一个按值有序序列,则称之为二路归并排序

```js
function marge(left,right){
  var result=[];
  il=0;
  ir=0;
  while(il<left.length && ir<right.length){
    if(left[il]<right[ir]){
      result.push(left[il++]);
    }else{
      result.push(right[ir++]);
    }
  }
  while(left[il]){
    result.push(left[il++]);
  }
  while(right[ir]){
    result.push(right[ir++]);
  }
  return result;
}
```

**2、二分查找**

是在有序数组中用的比较频繁的一种算法,优点是比较次数少,查找速度快、平均性能好;缺点是要求待查表为有序,且插入删除困难

```js
// 非递归实现
function binary_search(arr, key) {
    var low = 0,
        high = arr.length - 1;
    while(low <= high){
        var mid = parseInt((high + low) / 2);
        if(key == arr[mid]){
            return  mid;
        }else if(key > arr[mid]){
            low = mid + 1;
        }else if(key < arr[mid]){
            high = mid -1;
        }
    }
    return -1;
};
//递归实现
function binary_search2(arr, low, high, key) {
    if(low > high)
        return -1;
    var mid = parseInt((low + high)/2);
    if(key == arr[mid])
        return mid;
    else if(key > arr[mid])
        return binary_search2(arr, mid+1, high, key);
    else if(key < arr[mid])
        return binary_search2(arr, low, mid-1, key);
}
```

**算法在前端的地位**

算法简单来说,是一门研究计算机性能和资源分配的学科。前端或者说JS在算计方面表现得并不优秀,在讲为什么要学习它之前,我想先说说在前端领域什么比算法效率更加重要。

比如:

1.安全。web安全在前端已经占有一定比重,尤其是支付领域等。最常见的就是登录验证码。

2.用户体验。面向用户的东西必须用户体验优先。算法和用户体验也有关联,但通过算法在前端大幅度提高性能导致提高用户体验,是非常少的。

3.模块化和可拓展性。前端需要改代码的情况往往是比较多的,谁都不希望我要修改添加代码的时候会产生连锁反应,我明明要改的只是一个功能一个函数,却不得不因此改十几个函数,这多悲催。

4.语义化和可维护性。代码的可读性也非常重要,程序员很大一部分的时间都是在查修bug,要是随手写一坨自己回过头都看不懂代码,那多尴尬。

**- End -**

更多关于“web前端培训”的问题,欢迎咨询千锋教育在线名师。千锋已有十余年的培训经验,课程大纲更科学更专业,有针对零基础的就业班,有针对想提升技术的提升班,高品质课程助理你实现梦想。

tags:
声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT