前端常用算法_排序问题,二分查找

更新日期: 2022-03-24阅读: 806标签: 特性

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


1、排序问题

1.1冒泡排序

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

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快速排序

//快速排序
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二路归并

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

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、二分查找

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

// 非递归实现
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,要是随手写一坨自己回过头都看不懂代码,那多尴尬。


链接: https://fly63.com/article/detial/11292

CSS新特性contain,控制页面的重绘与重排

contain 属性允许我们指定特定的 DOM 元素和它的子元素,让它们能够独立于整个 DOM 树结构之外。目的是能够让浏览器有能力只对部分元素进行重绘、重排,而不必每次都针对整个页面。

Html5、Css3、ES6的新特性

Html5的新特性语义化标签:有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重。表单新特性,多媒体视频(video)和音频(audio)

ES6新特性--var、let、const

var不存在块级作用域,具有变量提升机制。 let和const存在块级作用域,不存在变量提升。在同一作用域内只能声明一次。const在声明时需要赋值且无法修改,但如果常量是对象,则对象的属性可以修改。

Js即将到来的3个新特性

Optional Chaining(可选链式调用);Nullish coalescing(空值合并);Pipeline operator(管道运算符)通过三个函数对字符串进行处理;

Angular 8的新特性介绍

在今天早些时候Angular团队发布了8.0.0稳定版。其实早在NgConf 2019大会上,演讲者就已经提及了从工具到差分加载的许多内容以及更多令人敬畏的功能。下面是我对8.0.0一些新功能的简单介绍,希望可以帮助大家快速了解新版本

使用 React 要懂的 Js特性

与我使用的其他框架相比,我最喜欢 React 的原因之一就是它对 JavaScript 的暴露程度。没有模板DSL( JSX 编译为合理的 JavaScript),组件 API 只是通过添加 React Hooks 变得更简单,并且该框架为解决的核心 UI 问题提供非常少的抽象概念

ES2019 新特性汇总

最近 ECMAScript2019,最新提案完成:tc39 Finished Proposals,我这里也是按照官方介绍的顺序进行整理,如有疑问,可以查看官方介绍啦~另外之前也整理了 《ES6/ES7/ES8/ES9系列》,可以一起看哈。

Js的用途和特性

JavaScript 最初的目的是为了“赋予网页生命”。这种编程语言我们称之为脚本。它们可以写在 HTML 中,在页面加载的时候会自动执行。脚本作为纯文本存在和执行。它们不需要特殊的准备或编译即可运行。

十个超级实用的 JS 特性

你可能刚上手 JavaScript,或者只是曾经偶尔用过。不管怎样,JavaScript 改变了很多,有些特性非常值得一用。 这篇文章介绍了一些特性,在我看来,一个严肃的 JavaScript 开发者每天都多多少少会用到这些特性

解密HTTP/2与HTTP/3 的新特性

HTTP/2 相比于 HTTP/1.1,可以说是大幅度提高了网页的性能,只需要升级到该协议就可以减少很多之前需要做的性能优化工作,当然兼容问题以及如何优雅降级应该是国内还不普遍使用的原因之一。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!