前端進階: 總結幾個常用的 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}}]}