前端到底要不要演算法？

1+1=2的問題，我們都知道。但是市場上面依然能看到一句繆論「前端不需要演算法」，這個不可否認，是不需要太多的演算法，因為一個合理的產品，對於展示層的表現，應該注重的是視覺的還原和細節，但是！演算法在某些情況下，對於性能的優化，有著很顯著的提升。

舉個例子，假設後端沒有給你提供排序好的數據，這些數據有10萬條，要求你根據這些數據提取前20條，可能會根據時間排序。（這是一個很極端的例子），從軟體的設計角度來看，這個事情放在前端是不合理的，但就是在這種極端條件下，你該如何提取這20條呢？

正常循環，先排序，然後取前20

有沒有想過利用work？來分組計算，先以1000條數據為一組，分100組，計算這100組裡的TOP ONE，最後提取TOP ONE 再分組，逐漸縮小範圍

你看，這樣的方式，是不是明顯比正常循環，先排序，要高效的多。這就是演算法對於程序帶來的提升。可能你會說，這樣的設計是不合理的。對，我也認可，這樣的計算應該放在後端，那麼我們再來看一個小例子。

我們有一組n個元素的價格表，其實在展示邏輯里，我們有一個價格，想要在這個價格表中找到比對，如果沒有在價格表中，則說明這個價格是一個錯誤的價格，需要在前端展示一個紅色的標註。

正常情況下，可以直接使用indexOf來處理這個問題，那麼你能知道indexOf自己的實現嗎？假設沒有這個indexOf，我們該如何來處理？這個時候，其實二分查找，就能很好的解決這個問題，這是一個很高效搜索的方法，這都談不上演算法，是一個很常見的方式。

從中間元素開始搜索，如果命中，退出循環

如果目標元素大於中間元素，則往大於的方向搜索，重複第一步

如果目標元素小於中間元素，則往小於的方向搜索，重複第一步

如果都沒有找到，設置一個邊界條件，返回-1，退出循環。於是，你就可以在前端的展示中，用紅色來標記一個提示了。

可見，前端還是很需要了解演算法和數據結構的，只有了解這些，你才能更好的去選擇方案，知道哪些可以做，哪些不能做，也知道哪些可以做的更好。

想想React或者Vue吧，如果沒有良好的數據結構設計，我們能想到用虛擬DOM的方式來開發Web應用嗎？並且這樣的數據結構，甚至擴展到了Web之外，看看RN和Weex，這就很好的說明了問題。

你也可以關注我的新浪微博，搜索i_icepy，很期待和大家交流。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！