我來閱讀lodash源碼——Math（一）

levinit 發(fā)布于2019-08-21 17:48 / 2061人閱讀

摘要：首先是通過創(chuàng)建一個函數(shù)，然后向其傳遞參與計算的值，也就是說應該是返回一個函數(shù)，并且有兩個參數(shù)。事實上就是這樣，返回值是一個，是被加數(shù)，是加數(shù)。

源碼注釋版

這一組函數(shù)都是數(shù)學計算相關的，主要分為三類：

加減乘除：add、subtract、multiply、divide

求最大最小平均值：max、maxBy、min、minBy、sum、sumBy、mean、meanBy

小數(shù)的四舍五入：ceil、floor、round

加減乘除

在加減乘除的源碼中可以看到這四個函數(shù)都引用了一個 createMathOpeartion 這個函數(shù)，然后是這樣使用這個函數(shù)的：

// 加法
const add = createMathOperation((augend, addend) => augend + addend, 0)
// 減法
const subtract = createMathOperation((minuend, subtrahend) => minuend - subtrahend, 0)
// 乘法
const multiply = createMathOperation((multiplier, multiplicand) => multiplier * multiplicand, 1)
// 除法
const divide = createMathOperation((dividend, divisor) => dividend / divisor, 1)

可以發(fā)現(xiàn)，它們的實現(xiàn)方式都是一樣的，向 createMathOperation 傳遞一個函數(shù)，這個函數(shù)就是原生的加減乘除，所以主要的還是要看看 createMathOperation 是啥。

createMathOperation

源碼注釋版

/**
 * Creates a function that performs a mathematical operation on two values.
 *
 * @private
 * @param {Function} operator The function to perform the operation.
 * @param {number} [defaultValue] The value used for `undefined` arguments.
 * @returns {Function} Returns the new mathematical operation function.
 */

從這個函數(shù)說明中可以看出，這個函數(shù)有兩個參數(shù)：

operator：原生四則運算函數(shù)

defaultValue：默認值，當未傳遞參數(shù)時返回的（原生計算中一般返回 NaN）

我們拿 add 來舉例。

const add = createMathOperation((augend, addend) => augend + addend, 0)
const result = add(5, 3)
console.log(result) // 8

首先是通過 createMathOperation 創(chuàng)建一個 add 函數(shù)，然后向其傳遞參與計算的值，也就是說 createMathOperation 應該是返回一個函數(shù)，并且有兩個參數(shù)。事實上就是這樣，返回值是一個 function(value, other)，value 是被加數(shù)，other 是加數(shù)。

在進行加減乘除運算的時候，還需要考慮一點的就是參與計算的兩個值的數(shù)據(jù)類型，是字符串還是數(shù)字？或者是 undefined？這里的實現(xiàn)方法滿足以下幾個規(guī)則：

兩個值都為 undefined 時，返回 defaultValue

其中一個值為 undefined 時，返回另一個值

有一個值為字符串時，用 baseToString 將兩個值都轉換成 string 進行計算

其它情況，用 baseToNumber 將兩個值都轉換成 number 進行計算

undefined 和 null 在四則運算中的區(qū)別

我注意到代碼中是判斷 value === undefined，是 ===，說明這里嚴格區(qū)分 undefined 和 null ，這是之前沒注意到的地方。這是為什么呢？

我拿原生的加減乘除做了個實驗：

console.log(1 + undefined) // NaN
console.log(1 + null) // 1
console.log(1 - undefined) // NaN
console.log(1 - null) // 1
console.log(1 * undefined) // NaN
console.log(1 * null) // 0
console.log(1 / undefined) // NaN
console.log(1 / null) // Infinity

undefined 參與計算的結果都是 NaN，null 參與計算是將它看作 0。

嗯，我們不一樣，每個人都有不同的境遇 ~

But，why？為啥我們不一樣？

我們知道 undefined 和 null 其中有一個區(qū)別是：

undefined 是定義了但是沒有賦值

null 是為定義

如果按照這個區(qū)別，應該把 undefined 當作 0 啊，但是結果貌似不是這樣，查查規(guī)范咯

在這就看得比較清楚了，ToNumber 運算符會將 undefined 轉換成 NaN，而將 null 轉換成 +0。

baseToString

源碼注釋版

/**
 * The base implementation of `toString` which doesn"t convert nullish
 * values to empty strings.
 *
 * @private
 * @param {*} value The value to process.
 * @returns {string} Returns the string.
 */

規(guī)則：

如果 typeof 返回 string，則直接返回 value

如果是數(shù)組，則遞歸對數(shù)組中的每一項都執(zhí)行 baseToString，直到不是數(shù)組為止，返回的是一個不含 [] 的字符串，相當于 [].join("") 的結果

如果 isSymbol 判斷為 true，則用 toString.call 來轉換

其它情況，就直接用模板字符串的方式返回字符串

對于 isSymbol，感覺還沒理解到位，先不展開說了。。。

GPU云服務器云服務器源碼閱讀 webrtc源碼閱讀 hbase源碼閱讀如何閱讀java源碼

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/90035.html

Lodash源碼講解-chunk函數(shù)

摘要：原文首發(fā)于源碼講解這是我們閱讀源碼的第篇博客，在這篇文章里我們來學習一下的方法。好啦，關于函數(shù)暫時就先講到這里啦。與惡龍纏斗過久自身亦成為惡龍凝視深淵過久深淵將回以凝視。原文首發(fā)于Lodash源碼講解這是我們閱讀Lodash源碼的第2篇博客，在這篇文章里我們來學習一下Lodash的chunk方法。 chunk函數(shù)內(nèi)部依賴其他的函數(shù)，依賴的函數(shù)如下所示； slice 按照慣例，我們先...

ISherry 2019-08-21 11:59 評論0 收藏0
聊聊lodash的debounce實現(xiàn)

摘要：同時，這里會設置一個定時器，在等待后會執(zhí)行，的主要作用就是觸發(fā)。最后，如果不再有函數(shù)調(diào)用，就會在定時器結束時執(zhí)行。問題就出在對于定時器的控制上。本文同步自我的Blog 前段時間團隊內(nèi)部搞了一個代碼訓練營，大家組織在一起實現(xiàn) lodash 的 throttle 和 debounce，實現(xiàn)起來覺得并不麻煩，但是最后和官方的一對比，發(fā)現(xiàn)功能的實現(xiàn)上還是有差距的，為了尋找我的問題，把官方源碼...

junfeng777 2019-08-21 17:43 評論0 收藏0
lodash源碼分析之chunk的尺與刀

摘要：萬條數(shù)據(jù)依賴讀源碼之從看稀疏數(shù)組與密集數(shù)組原理的原理歸結起來就是切割和放置。尺在切割之前，需要用尺確定切割的數(shù)量。容器的長度剛好與塊的數(shù)量一致。當與塊的數(shù)量相等時，表示已經(jīng)切割完畢，停止切割，最后將結果返回。以不正義開始的事情，必須用罪惡使它鞏固?！勘葋啞尔溈税住? 最近很多事似乎印證了這句話，一句謊言最后要用一百句謊言來圓謊。本文為讀 lodash 源碼的第二篇，后續(xù)文章會...

ZweiZhao 2019-08-21 17:56 評論0 收藏0
30秒就能理解的 Javascript 代碼片段 --- Array篇

摘要：而這個秒就能理解的代碼片段，摒棄了許多不必要的代碼，只實現(xiàn)了最核心的部分，不像和那樣，考慮參數(shù)邊界值問題，例如，參數(shù)的類型是否符合預期等。使用根據(jù)斷言函數(shù)對數(shù)組進行過濾，返回條件為真值的對象。之前翻譯過一篇文章，《我喜歡的5個編程技巧》，里面的一個技巧是借鑒一個網(wǎng)站的代碼片段，好奇的小手點下鏈接后，發(fā)現(xiàn)是一個有 47000 多star的倉庫，30-seconds-of-code。倉...

fox_soyoung 2019-08-26 10:26 評論0 收藏0
「讀懂源碼系列2」我從 lodash 源碼中學到的幾個知識點

摘要：今天要講的，是我從的源碼實現(xiàn)文件中學到的幾個很基礎，卻又容易被忽略的知識點。在函數(shù)式編程中，函數(shù)是一等公民，它可以只是根據(jù)參數(shù)，做簡單的組合操作，再作為別的函數(shù)的返回值。所以，閱讀源碼，是一種很棒的重溫基礎知識的方式。 showImg(https://segmentfault.com/img/bVbpTSY?w=750&h=422); 前言上一篇文章「前端面試題系列8」數(shù)組去重(1...

Amio 2019-08-26 13:38 評論0 收藏0