本文實現方法都是看效果倒推實現方法，並進行一些拓展和思考，和源碼無關。lodash這個庫的文檔更像一個題庫，給出了題目讓我們刷題的
能收穫什麼
1、修煉代碼基本功，瞭解常見的套路
2、瞭解到一些操作的英文命名和規範
3、積累經驗，面對複雜邏輯問題可以迅速解決
4、也許可以查到自己的js基礎知識的漏洞
我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定製課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習乾貨，各種框架都有整理，送給每一位前端小夥伴，想要獲取的可以關注我的頭條號並在後臺私信我：前端，即可免費獲取。
⚠️注意：
- 三星難度以上的會具體拓展和講解
- 文中使用的基本都是數組原生api以及es6+函數式編程，代碼簡潔且過程清晰
- 如果說性能當然是命令式好，實現起來稍微麻煩一些而且比較枯燥無味
- 時代在進步，人生苦短，我選擇語法糖和api。面臨大數據的性能瓶頸，才是考慮命令式編程的時候
函數系列的總體難度比之前的數組、集合系列都要大一些。恰好，lodash函數系列的方法是面試中經常會問到的
bind
- _.bind(func, thisArg, [partials])創建一個函數 func，這個函數的 this 會被綁定在 thisArg。並且任何附加在 _.bind 的參數會被傳入到這個綁定函數上。這個 _.bind.placeholder 的值，默認是以 _ 作為附加部分參數的佔位符。
- 注意: 不同於原生的 Function#bind，這個方法不會設置綁定函數的 length 屬性。
- 參數：func (Function)是要綁定的函數。thisArg ()的這個 this 會被綁定給 func。[partials] (...)指附加的部分參數
- 返回值 (Function)：新的綁定函數
- 難度係數：★★★★
- 建議最長用時：12min
var greet = function(greeting, punctuation) {
return greeting + ' ' + this.user + punctuation;
};
var object = { 'user': 'fred' };
var bound = _.bind(greet, object, 'hi');
bound('!');
// => 'hi fred!'
// 使用了佔位符
var bound = _.bind(greet, object, _, '!');// 填了第二個參數
bound('hi'); // 再傳第一個參數
// => 'hi fred!'
var bound = _.bind(greet, object, _, "!");// 填了第二個參數
bound(_, "hi")// 填了第2個參數，第一個參數`_`補上初始參數第一個空格，第二個參數hi接在後面
// => 'fred!'
參考代碼
const _ = {
bind(f, thisArg, ...rest) {
return function(...args) {
// 參數有空格，走新的邏輯
return f.apply(thisArg, (rest.includes(_) || args.includes(_))? _.mergeArgs(rest, args): [...rest, ...args])
}
},
toString() {
return '' // 隱式轉換
},
mergeArgs(init, args) {
return init.map((arg) => {
// 執行時傳入的參數作為填補
if (arg === _ && args.length) {
return args.shift()
}
return arg
}).concat(args) // 剩下的參數都接到後面
}
}
實現一個bind倒是很簡單，但是lodash的bind還有填空格的操作。把lodash自己填進去就是一個空格，而且我們還可以從console.log(bound(_, "hi"))發現，它具有隱式轉換：_ + '' === ''。實現lodash的bind的時候，除了兼容正常的函數bind之外，還要兼容傳入_的時候的空格的case，並merge初始化參數和調用時參數
curry
正向柯里化
- _.curry(func, [arity=func.length])創建一個函數，該函數接收一個或多個 func 的參數。當該函數被調用時,如果 func 所需要傳遞的所有參數都被提供，則直接返回 func 所執行的結果。否則繼續返回該函數並等待接收剩餘的參數。可以使用 func.length 強制需要累積的參數個數。
- 這個 _.curry.placeholder 的值，默認是以 _ 作為附加部分參數的佔位符。
- 注意: 這個方法不會設置 "length" 到 curried 函數上。
- 參數: func (Function)是需要 curry 的函數。[arity=func.length] (number)是指需要提供給 func 的參數數量
- 返回 curry 後的函數
- 難度係數：★★★★★
- 建議最長用時：15min
// example
var abc = function(a, b, c) {
return [a, b, c];
};
var curried = _.curry(abc);
curried(1)(2)(3);
// => [1, 2, 3]
curried(1, 2)(3);
// => [1, 2, 3]
curried(1, 2, 3);
// => [1, 2, 3]
// 使用了佔位符
curried(1)(_, 3)(2);
// => [1, 2, 3]
參考代碼：
const _ = {
curry(f, arity = f.length) {
return function(...initValues) {
// 每次執行，都是一個新的閉包，executes的位置要放這裡
let executes = initValues
function curried(...args) {
// 兼容空格
const newArgs = _.mergeArgs(executes, args)
executes = newArgs
// 過濾空格的真實長度
if (_.getReallLength(newArgs) < arity) {
return curried
}
const ret = f.apply(null, newArgs)
return ret
}
return curried
}
},
toString() {
return ''
},
mergeArgs(init, args) {
// 有沒有空格
if (!init.includes(_)) {
return [...init, ...args]
}
return init.map((arg) => {
if (arg === _ && args.length) {
return args.shift()
}
return arg
}).concat(args)
},
getReallLength(args) {
// 獲取真實長度
return args.filter(arg => arg !== _).length
}
}
function curry(f, arity = f.length) {
const executes = []
function curried(...args) {
executes.push(...args)
if (executes.length < arity) {
return curried
}
const ret = f.apply(null, executes)
executes.length = 0
return ret
}
return curried
}
家喻戶曉的柯里化，可能很多人都會寫。但是在這裡還要考慮到lodash的空格以及柯里化函數多次複用
反向柯里化
原理一樣，只是取參數的時候從右邊往左邊取
- 難度係數：★★★★★★(如果已經實現了正向柯里化curry，難度降為1星)
- 建議最長用時：18min
example
var abc = function(a, b, c) {
return [a, b, c];
};
var curried = _.curryRight(abc);
curried(3)(2)(1);
// => [1, 2, 3]
curried(2, 3)(1);
// => [1, 2, 3]
curried(1, 2, 3);
// => [1, 2, 3]
// 使用了佔位符
curried(3)(1, _)(2);
// => [1, 2, 3]
參考代碼：
// 只需要把上文的mergeArgs方法改一下即可
_.mergeArgs = function(init, args) {
if (!init.includes(_)) {
// 就改這裡，換個位置
return [...init, ...args]
}
return init.map((arg) => {
if (arg === _ && args.length) {
return args.shift()
}
return arg
}).concat(args)
},
debounce
- _.debounce(func, [wait=0] debounce, [options])創建一個防抖動函數。該函數會在 wait 毫秒後調用 func 方法。該函數提供一個 cancel 方法取消延遲的函數調用以及 flush 方法立即調用。可以提供一個 options 對象決定如何調用 func 方法， options.leading 與|或 options.trailing 決定延遲前後如何觸發。func 會傳入最後一次傳入的參數給防抖動函數。隨後調用的防抖動函數返回是最後一次 func 調用的結果。
- 注意: 如果 leading 和 trailing 都設定為 true。則 func 允許 trailing 方式調用的條件為: 在 wait 期間多次調用防抖方法。
- 參數
- func (Function)
- 要防抖動的函數
- [wait=0] (number)
- 需要延遲的毫秒數
- [options] (Object)
- 選項對象
- [options.leading=false] (boolean)
- 指定調用在延遲開始前
- [options.maxWait] (number)
- 設置 func 允許被延遲的最大值
- [options.trailing=true] (boolean)
- 指定調用在延遲結束後
- 返回值 (Function)
- 返回具有防抖動功能的函數
- 難度係數：★★★★★★
- 建議最長用時：20min
我相信，80%的人可以1分鐘內寫出trailing模式的debounce方法(定時器到了就執行函數，在定時器還沒到期間重複執行函數，定時器重置)，但是同時支持options配置和leading模式的話，難度大大增加了
參考代碼：
// 執行方式：delay前、delay後、delay前後
function execute(f, timeout, ref, { isDelay, isDirectly }) {
if (!ref.last && isDirectly) {
// 調用上一次保存下來的方法
ref.isExecute = true
ref.last = f
f()
}
return setTimeout(() => {
if (isDirectly) {
// 調用了就清掉
ref.last = null
}
ref.isExecute = true
if (isDelay) {
f()
}
}, timeout);
}
function debounce(func, wait = 0, options = {}) {
const { leading, maxWait, trailing = true } = options
const ref = {
t: undefined,
isExecute: false, // 給maxWait用的標記
maxWaitTimer: undefined,
last: undefined, // leading模式用的
}
return function(...args) {
const main = () => func.apply(null, args)
// 最大超時時間設置
if ('maxWait' in options && !ref.maxWaitTimer) {
ref.maxWaitTimer = setTimeout(() => {
if (!ref.isExecute) {
ref.maxWaitTimer = undefined
return main()
}
}, maxWait);
}
clearTimeout(ref.t)
// 支持trailing、leading模式選擇
ref.t = execute(main, wait, ref, { isDelay: trailing, isDirectly: leading })
}
}
throttle
- _.throttle(func, [wait=0], [options])創建一個節流函數，在 wait 秒內最多執行 func 一次的函數。該函數提供一個 cancel 方法取消延遲的函數調用以及 flush 方法立即調用。可以提供一個 options 對象決定如何調用 func 方法， options.leading 與|或 options.trailing 決定 wait 前後如何觸發。func 會傳入最後一次傳入的參數給這個函數。隨後調用的函數返回是最後一次 func 調用的結果。
- 注意: 如果 leading 和 trailing 都設定為 true。則 func 允許 trailing 方式調用的條件為: 在 wait 期間多次調用。
- 參數:
- func (Function)
- 要節流的函數
- [wait=0] (number)
- 需要節流的毫秒
- [options] (Object)
- 選項對象
- [options.leading=true] (boolean)
- 指定調用在節流開始前
- [options.trailing=true] (boolean)
- 指定調用在節流結束後
- 返回值 (Function)
- 返回節流的函數
- 難度係數：★★★★★
- 建議最長用時：15min
參考代碼：
function throttle(func, wait = 0, options = {}) {
const { leading = true, maxWait, trailing } = options
const ref = {
t: undefined,
isExecute: false,
maxWaitTimer: undefined,
last: undefined,
}
return function(...args) {
const main = () => func.apply(null, args)
if ('maxWait' in options && !ref.maxWaitTimer) {
ref.maxWaitTimer = setTimeout(() => {
if (!ref.isExecute) {
ref.maxWaitTimer = undefined
return main()
}
}, maxWait);
}
if (!ref.isExecute) {
if (leading) {
ref.isExecute = true
main()
}
if (!ref.last && trailing) {
// 先記錄下等下trailing模式要執行的函數
ref.last = main
}
}
if (ref.t === undefined) {
ref.t = setTimeout(() => {
// wait時間內只能執行一次
ref.isExecute = false
ref.t = undefined
if (ref.last && trailing) {
// 執行記錄下來的函數
ref.isExecute = true
ref.last()
ref.last = undefined
}
}, wait);
}
}
}
memorize
- _.memoize(func, [resolver])創建一個會緩存 func 結果的函數。如果提供了 resolver，就用 resolver 的返回值作為 key 緩存函數的結果。默認情況下用第一個參數作為緩存的 key。func 在調用時 this 會綁定在緩存函數上。
- 注意: 緩存會暴露在緩存函數的 cache 上。它是可以定製的，只要替換了 _.memoize.Cache 構造函數，或實現了 Map 的 delete， get， has， 以及 set方法。
- 參數
- func (Function)
- 需要緩存化的函數
- [resolver] (Function)
- 這個函數的返回值作為緩存的 key
- 返回值 (Function)
- 返回緩存化後的函數
- 難度係數：★★
- 建議最長用時：6min
// example
var object = { 'a': 1, 'b': 2 };
var other = { 'c': 3, 'd': 4 };
var values = _.memoize(_.values);
values(object);
// => [1, 2]
values(other);
// => [3, 4]
object.a = 2;
values(object);
// => [1, 2]
// 修改結果緩存
values.cache.set(object, ['a', 'b']);
values(object);
// => ['a', 'b']
// 替換 `_.memoize.Cache`
_.memoize.Cache = WeakMap;
參考代碼：
function memoize(func, resolver) {
const cache = new Map()
function f(...args) {
const key = typeof resolver === 'function' ? resolver.apply(null, args) : args[0]
if (!cache.get(key)) {
const ret = func.apply(null, args)
cache.set(key, ret)
return ret
} else {
return cache.get(key)
}
}
f.cache = cache
return f
}
其他
其他方法都比較簡單，不需要20行代碼即可實現。需要注意的點是，執行傳入的函數的時候，要call、apply一下null，默認沒有this，這是基本操作。為什麼呢？如果執行的那個函數內部依賴this，那傳入的必須是箭頭函數或者bind過this的函數。如果開發者傳入的不是箭頭函數或者bind過this的函數，框架代碼裡面執行傳入的函數的時候又沒有call、apply一下null的話，那框架本身就對業務代碼造成了汙染了。另外，如果不依賴this，那為何改他的this呢。我們可以看看丟失的this的例子：
// 內部依賴this的函數，不bind的話，this指向改變了導致報錯
const { getElementById } = document
getElementById('id')
// Uncaught TypeError: Illegal invocation
// 正確的做法
const getElementById = document.getElementById.bind(document)
getElementById('id')
分享到:
閱讀更多 小白沖沖沖沖 的文章
