前端进阶: 总结几个常用的 JS 搜索算法和性能对比

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"前言"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"今天让我们来继续聊一聊 JS 算法，通过接下来的讲解，我们可以了解到"},{"type":"text","marks":[{"type":"strong"}],"text":"搜索算法"},{"type":"text","text":"的基本实现以及各种实现方法的性能，"},{"type":"text","marks":[{"type":"strong"}],"text":"进而发现 for 循环，forEach，While 的性能差异"},{"type":"text","text":"，我们还会了解到如何通过 Web Worker 做算法分片，极大的提高算法的性能。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"同时我还会简单介绍一下经典的"},{"type":"text","marks":[{"type":"strong"}],"text":"二分算法"},{"type":"text","text":"，"},{"type":"text","marks":[{"type":"strong"}],"text":"哈希表查找算法"},{"type":"text","text":"，但这些不是本章的重点，之后我会推出相应的文章详细介绍这些高级算法，感兴趣的朋友可以关注我的专栏，或一起探讨。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"对于算法性能，我们还是会采用上一章 "},{"type":"link","attrs":{"href":"http:\/\/mp.weixin.qq.com\/s?__biz=MzU2Mzk1NzkwOA==&mid=2247483663&idx=1&sn=2552e119ca1990f6cd3a570447288c07&chksm=fc5318f4cb2491e2965fd27e5faf4b54e5a6f9f5e89c58ca8431866b7d11ba31ead5a0537321&scene=21#wechat_redirect","title":"","type":null},"content":[{"type":"text","text":"《前端算法系列》如何让前端代码速度提高60倍"}]},{"type":"text","text":" 中的getFnRunTime 函数，大家感兴趣的可以查看学习，这里我就不做过多说明。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在上一章 "},{"type":"link","attrs":{"href":"http:\/\/mp.weixin.qq.com\/s?__biz=MzU2Mzk1NzkwOA==&mid=2247483663&idx=1&sn=2552e119ca1990f6cd3a570447288c07&chksm=fc5318f4cb2491e2965fd27e5faf4b54e5a6f9f5e89c58ca8431866b7d11ba31ead5a0537321&scene=21#wechat_redirect","title":"","type":null},"content":[{"type":"text","text":"《前端算法系列》如何让前端代码速度提高60倍"}]},{"type":"text","text":" 我们模拟了 19000 条数据，这章中为了让效果更明显，我将伪造 170 万条数据来测试，不过相信我，对js来说这不算啥。。。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"1. for 循环搜索"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"基本思路：通过 for 循环遍历数组，找出要搜索的值在数组中的索引，并将其推进新数组"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"代码实现如下："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"const getFnRunTime = require('.\/getRuntime');\n\n \/**\n * 普通算法-for循环版\n * @param {*} arr \n * 耗时：7-9ms\n *\/\n function searchBy(arr, value) {\n let result = [];\n for(let i = 0, len = arr.length; i < len; i++) {\n if(arr[i] === value) {\n result.push(i);\n }\n }\n return result\n }\n getFnRunTime(searchBy, 6)"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"测试 n 次稳定后的结果如图："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/bb\/06\/bbc4aeaf3f6fd455a709c4ecf71ebc06.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"2. forEach 循环"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"基本思路和 for 循环类似："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\/**\n * 普通算法-forEach循环版\n * @param {*} arr \n * 耗时：21-24ms\n *\/\n function searchByForEach(arr, value) {\n let result = [];\n arr.forEach((item,i) => {\n if(item === value) {\n result.push(i);\n }\n })\n return result\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"耗时 21-24 毫秒，可见性能不如 for 循环（先暂且这么说哈，本质也是如此）。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"3. while 循环"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"代码如下："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\/**\n * 普通算法-while循环版\n * @param {*} arr \n * 耗时：11ms\n *\/\n function searchByWhile(arr, value) {\n let i = arr.length,\n result = [];\n while(i) {\n if(arr[i] === value) {\n result.push(i);\n }\n i--;\n }\n \n return result\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}