做网站做哪个好,网页升级中,西安百度推广运营公司,cms管理前言今天让我们来继续聊一聊js算法#xff0c;通过接下来的讲解#xff0c;我们可以了解到搜索算法的基本实现以及各种实现方法的性能#xff0c;进而发现for循环#xff0c;forEach#xff0c;While的性能差异#xff0c;我们还会了解到如何通过web worker做算法分片通过接下来的讲解我们可以了解到搜索算法的基本实现以及各种实现方法的性能进而发现for循环forEachWhile的性能差异我们还会了解到如何通过web worker做算法分片极大的提高算法的性能。同时我还会简单介绍一下经典的二分算法哈希表查找算法但这些不是本章的重点之后我会推出相应的文章详细介绍这些高级算法感兴趣的朋友可以关注我的专栏或一起探讨。对于算法性能我们还是会采用上一章《前端算法系列》如何让前端代码速度提高60倍中的getFnRunTime函数大家感兴趣的可以查看学习这里我就不做过多说明。在上一章《前端算法系列》如何让前端代码速度提高60倍我们模拟了19000条数据这章中为了让效果更明显我将伪造170万条数据来测试不过相信我对js来说这不算啥。。。1.for循环搜索基本思路通过for循环遍历数组找出要搜索的值在数组中的索引并将其推进新数组代码实现如下const getFnRunTime require(./getRuntime);/*** 普通算法-for循环版* param {*} arr * 耗时7-9ms*/function searchBy(arr, value) {let result [];for(let i 0, len arr.length; i len; i) {if(arr[i] value) {result.push(i);}}return result}getFnRunTime(searchBy, 6)测试n次稳定后的结果如图2.forEach循环基本思和和for循环类似/*** 普通算法-forEach循环版* param {*} arr * 耗时21-24ms*/function searchByForEach(arr, value) {let result [];arr.forEach((item,i) {if(item value) {result.push(i);}})return result }耗时21-24毫秒可见性能不如for循环先暂且这么说哈本质也是如此。3.while循环代码如下/*** 普通算法-while循环版* param {*} arr * 耗时11ms*/function searchByWhile(arr, value) {let i arr.length,result [];while(i) {if(arr[i] value) {result.push(i);}i--;}return result }可见while和for循环性能差不多都很优秀但也不是说forEach性能就不好就不使用了。foreach相对于for循环代码减少了但是foreach依赖IEnumerable。在运行时效率低于for循环。但是在处理不确定循环次数的循环或者循环次数需要计算的情况下使用foreach比较方便。而且foreach的代码经过编译系统的代码优化后和for循环的循环类似。4.二分法搜索二分法搜索更多的应用场景在数组中值唯一并且有序的数组中这里就不比较它和for/while/forEach的性能了。基本思路从序列的中间位置开始比较如果当前位置值等于要搜索的值则查找成功若要搜索的值小于当前位置值则在数列的前半段中查找若要搜索的值大于当前位置值则在数列的后半段中继续查找直到找到为止代码如下/*** 二分算法* param {*} arr * param {*} value */function binarySearch(arr, value) {let min 0;let max arr.length - 1;while (min max) {const mid Math.floor((min max) / 2);if (arr[mid] value) {return mid;} else if (arr[mid] value) {max mid - 1;} else {min mid 1;}}return Not Found;}在数据量很大的场景下二分法效率很高但不稳定这也是其在大数据查询下的一点小小的劣势。5.哈希表查找哈希表查找又叫散列表查找通过查找关键字不需要比较就可以获得需要记录的存储位置它是通过在记录的存储位置和它的关键字之间建立一个确定的对应关系f使得每个关键字key对应一个存储位置fkey哈希表查找的使用场景 哈希表最适合的求解问题是查找与给定值相等的记录 哈希查找不适合同样的关键字对应多条记录的情况 * 不适合范围查找比如查找年龄18~22岁的同学在这我先给出一个最简版的hashTable方便大家更容易的理解哈希散列/*** 散列表* 以下方法会出现数据覆盖的问题*/ function HashTable() {var table [];// 散列函数var loseloseHashCode function(key) {var hash 0;for(var i0; ikey.length; i) {hash key.charCodeAt(i);}return hash % 37};// putthis.put function(key, value) {var position loseloseHashCode(key);table[position] value;}// getthis.get function(key) {return table[loseloseHashCode(key)]}// removethis.remove function(key) {table[loseloseHashCode(key)] undefined;} }该方法可能会出现数据冲突的问题不过也有解决方案由于这里涉及的知识点比较多后期我会专门推出一篇文章来介绍开放定址法二次探测法随机探测法使用web worker优化通过以上的方法我们已经知道各种算法的性能和应用场景了我们在使用算法时还可以通过web worker来优化让程序并行处理比如将一个大块数组拆分成多块让web worker线程帮我们去处理计算结果最后将结果合并通过worker的事件机制传给浏览器效果十分显著。总结对于复杂数组查询for/while性能高于forEach等数组方法二分查找法的O(logn)是一种十分高效的算法。不过它的缺陷也很明显必须有序我们很难保证我们的数组都是有序的。当然可以在构建数组的时候进行排序可是又落到了第二个瓶颈上它必须是数组。数组读取效率是O(1)可是它的插入和删除某个元素的效率却是O(n)。因而导致构建有序数组的时候会降低效率。哈希表查找的基本用法及使用场景。条件允许的话我们可以用web worker来优化算法让其在后台并行执行。好啦这篇文章虽然比较简单但十分重要希望大家对搜索算法有更加直观的认识也希望大家有更好的方法一起探讨交流。接下来会推出更多优秀的算法敬请期待哦最后欢迎加入前端技术群一起探讨前端的魅力更多推荐如何快速掌握es6新特性及核心语法前端开发中79条不可忽视的知识点汇总15条前端必备的性能优化方法你知道哪些如何用css3实现惊艳面试官的背景动画高级附源码用webpack4.0撸单页/多页脚手架(jquery,react,vue,typescript)《javascript高级程序设计》核心知识总结vue高级进阶系列——用typescript玩转vue和vuex