JavaScript專題系列20篇正式完結！

冴羽發表於2017-10-25
JavaScript

寫在前面

JavaScript 專題系列是我寫的第二個系列，第一個系列是 JavaScript 深入系列。

JavaScript 專題系列共計 20 篇，主要研究日常開發中一些功能點的實現，比如防抖、節流、去重、型別判斷、拷貝、最值、扁平、柯里、遞迴、亂序、排序等，特點是研(chao)究(xi) underscore 和 jQuery 的實現方式。

JavaScript 專題系列自 6 月 2 日釋出第一篇文章，到 10 月 20 日釋出最後一篇，感謝各位朋友的收藏、點贊，鼓勵、指正。

20 篇下來，我們已經跟著 underscore 寫了 debounce、throttle、unique、isElement、flatten、findIndex、findLastIndex、sortedIndex、indexOf、lastIndexOf、eq、partial、compose、memorize 共 14 個功能函式，跟著 jQuery 寫了 type、isArray、isFunction、isPlainObject、isWindow、isArrayLike、extend、each 共 8 個功能函式，自己實現了 shallowCopy、deepCopy、curry、shuffle 共 4 個功能函式，加起來共有 26 個功能函式，除此之外，最後一篇還研究了 V8 的排序原始碼，真心希望讀者能從這個系列中收穫頗豐。

順便宣傳一下該部落格的 Github 倉庫：github.com/mqyqingfeng…，歡迎 star，鼓勵一下作者。

而此篇，作為專題系列的總結篇，除了彙總各篇文章，作為目錄篇之外，還希望跟大家聊聊，我為什麼要寫這個系列？

我為什麼寫專題系列？

如果說深入系列是為了瞭解 JavaScript 這門語言本身，專題系列就是為了用 JavaScript 具體實現一些功能，我希望它抽離於實踐，無關乎 DOM、BOM，能對大家有所幫助，一想到這些，映入腦海的竟是那些年做過的前端面試題……

是的，回顧整個系列，你會發現，防抖、節流、去重、深淺拷貝、陣列扁平化、亂序、柯里化等等不都是面試的經典嗎？我還記得曾經為了準備面試，死記硬背了一個去重的函式，卻從來沒有研究過其他去重的方法，也從來沒有想過它們之前的區別，防抖和節流更是傻傻分不清楚，深淺拷貝反正有 jQuery 的 extend 呢，陣列扁平化，我也就有一個遞迴的思路，具體怎麼實現我還真是不清楚，亂序我就沒有思路了……哎，都是一知半解或是隻是有所耳聞。

想著想著，便不知不覺寫下了很多待研究的課題，研究的方法也隨之浮現，那就是研究 underscore 以及 jQuery 的實現方式，曾經它們看起來很是神祕，也知道閱讀起來並非難事，可還是想一探究竟。

然而研究的過程確實是十分的艱難，因為要做到看懂原始碼，理解實現的原理，然而，一段原始碼的實現往往會牽涉到多個地方，結果為了看懂某一個函式的具體實現，還要一連串的看多個函式，在理解原始碼的過程中，也會有很多的疑惑，我會告訴自己去理解每一個產生疑惑的地方，這句話說起來簡單，做起來很難，我來舉個例子吧，在陣列亂序中，有一個方法是：

arr.sort(function(){
    return Math.random() - 0.5;
});複製程式碼

然而，這個方法的實現是有問題的，它並不能做到真正的亂序。很多文章中，只是用 demo 驗證了這種方法有問題，卻從來沒有說過這個方法究竟哪裡有問題，然而我就是對此感到非常疑惑，因為我覺得這個方法很不錯呀，思路巧妙，初見時，還有點小驚豔呢……可是為什麼會有問題呢？我百思不得其解，搜了很多文章，也無果，最終，為了解決這個困惑，去看了 v8 的 sort 原始碼，然而這段原始碼也並不是很容易看的，資料少之又少，先要理解插入排序，快速排序，再去理解 v8 做的諸多優化，結果為了解決這個疑惑，看完了 v8 的 sort 原始碼，理解了 sort 的原理後，以陣列 [1, 2, 3] 為例，細細分析這種亂序方法在 v8 下具體的排序過程，最後算出來 [1, 2, 3] 亂序後的 6 種結果的概率分別是多少，結果 3 還在原位置的概率有 50%! 到此，才算是心滿意足的解決了這個困惑。

關於這個困惑的具體內容，可以檢視該系列的第 19 篇文章。

除此之外，所有的函式我都會自己實現一遍，然而即便看懂了原理，實現也並非能一蹴而就，畢竟如果是你寫，怎麼能一開始就想得如此完善呢？所以我都是從一個簡單的寫法開始，向著 underscore 和 jquery 的最終實現方式，一個功能一個功能的迭代實現，你看這個系列很多的文章，都會跟大家講解如何從零實現，一版一版的程式碼其實就是迭代實現時的記錄。

感嘆一下，寫文章不容易呀~

全目錄

  1. JavaScript專題之跟著underscore學防抖
  2. JavaScript專題之跟著underscore學節流
  3. JavaScript專題之陣列去重
  4. JavaScript專題之型別判斷(上)
  5. JavaScript專題之型別判斷(下)
  6. JavaScript專題之深淺拷貝
  7. JavaScript專題之從零實現jQuery的extend
  8. JavaScript專題之如何求陣列的最大值和最小值
  9. JavaScript專題之陣列扁平化
  10. JavaScript專題之學underscore在陣列中查詢指定元素
  11. JavaScript專題之jQuery通用遍歷方法each的實現
  12. JavaScript專題之如何判斷兩個物件相等
  13. JavaScript專題之函式柯里化
  14. JavaScript專題之偏函式
  15. JavaScript專題之惰性函式
  16. JavaScript專題之函式組合
  17. JavaScript專題之函式記憶
  18. JavaScript專題之遞迴
  19. JavaScript專題之亂序
  20. JavaScript專題之解讀v8排序原始碼

致歉

有些讀者給我的文章留言，或感謝，或討論，或指正，因為各種各樣的原因，沒能回覆或及時回覆，對此致以歉意。

下期預告

在我 Github 部落格倉庫的描述中，說到我預計寫四個系列：JavaScript深入系列、JavaScript專題系列、ES6系列、React系列。專題系列完結，本來應該是寫 ES6 系列，可是有一個朋友跟我說，寫了這麼多函式，可是該如何組織這些函式，形成自己的工具函式庫呢？

對呀，既然都寫了這麼多工具函式，為什麼不再進一步，將它們以某種方式組織起來呢？

我首先想到的便是借鑑 underscore，underscore 是如何組織程式碼的？又是如何實現鏈式呼叫的？又是如何實現擴充的？有很多值得研究的地方，所以我決定，在 ES6 系列之前，再進一步，寫一個 underscore 系列，旨在幫助大家寫出一個自己的 “underscore”。

感謝大家的閱讀和支援，我是冴羽，underscore 系列再見啦！[]~(￣▽￣)~**

相關文章