[[380969]]

函數在任何編程語言中都占據著主導地位。

而在js中，函數是另類的存在，本質上是特殊的Object，它可以設置屬性：

const fn = () => { }; 
fn.foo = "foo"; 
console.log(fn.foo); // 'foo' 

今天分享的是函數的一些操作：

• 函數的緩沖功能memoize
• 函數柯里化curry
• 截取參數處理arg
• 防抖節流
• 延遲函數執行delay
• 延遲函數調用defer
• 異步函數調用compose
• 函數只被調用一次once
• 判斷函數是否可以執行
• 檢查對象屬性checkProp
• 鏈式調用函數

函數的緩沖功能memoize

關于memoize的思考來源于reack的Hook文檔中，memoize的特性就是「 利用函數的特性做緩存 」。

不知道你做算法的時候，是否考慮過遞歸是怎么緩存結果，層層儲存的。

如下的斐波那契，每一次計算的結果緩存在哪里呢?

const fibonacci = (n) => { 
    return n < 2 ? n : fibonacci(n - 1) + fibonacci(n - 2); 
}; 

我們可以簡單模擬一下memoize的實現：

const memoize = function (fn) { 
  const cache = {}; 
  return function () { 
    const key = JSON.stringify(arguments); 
    var value = cache[key]; 
    if (!value) { 
      // 為了了解過程加入的log，正式場合應該去掉 
      console.log('新值，執行中...');  
      // 放在一個數組中，方便應對undefined，null等異常情況 
      value = [fn.apply(this, arguments)];   
      cache[key] = value; 
    } else { 
      console.log('來自緩存');   
    } 
    return value[0]; 
  } 
} 

測試一下：

const memoizeFibonacci = memoize(fibonacci); 
 
const log = console.log; 
log(memoizeFibonacci(45)); 
// 新值，執行中...;    1134903170  // 等待時間比較長 
log(memoizeFibonacci(45)); 
// 來自緩存;    1134903170 
log(memoizeFibonacci(45)); 
// 來自緩存;    1134903170 
log(memoizeFibonacci(45)); 
// 來自緩存;    1134903170 
log(memoizeFibonacci(45)); 

函數柯里化curry

柯里化的概念就是「 把接受多個參數的函數變換成接受一個單一參數的函數 」。

const curry = (fn, arity = fn.length, ...args) => 
  arity <= args.length ? fn(...args) : curry.bind(null, fn, arity, ...args); 
 
curry(Math.pow)(2)(10); // 1024 
curry(Math.min, 3)(10)(50)(2); // 2 

這個bind用得非常好，借助它積累每次傳進來的參數，等到參數足夠時，再調用。

有了柯里化，還有反柯里化，它的概念是「 把多個接受多個參數的函數層層鋪平 」。

const uncurry = (fn, n = 1) => (...args) => { 
  const next = acc => args => args.reduce((x, y) => x(y), acc); 
  if (n > args.length) throw new RangeError('Arguments too few!'); 
  return next(fn)(args.slice(0, n)); 
}; 
 
const add = x => y => z => x + y + z; 
const uncurriedAdd = uncurry(add, 3); 
uncurriedAdd(1, 2, 3); // 6 

截取函數參數ary

「 截取指定函數參數做操作 」;ary的第二個參數接收一個索引參數，表示只截取得到n的位置。

// ary 截取指定參數處理 
const ary = (fn, n) => (args) => fn(args.slice(0, n)); 
 
// 如果處理的數據是字符串 
const checkPe = (arg) => { 
  if (arg && arg.indexOf('pe') > -1) { 
    return arg.indexOf('pe') 
  } 
  return -1 
} 
const getPe = ary(checkPe, 5); 
const numsPe = ['wpe', 'wwperr', 'wwepe'].map(x => getPe(x)); 
 
console.log(numsPe, 'numsPe') 
// [1, 2, 3] 

如果是數組的話，需要使用擴展運算符。

// 如果處理的數據是數組 
const ary = (fn, n) => (...args) => fn(...args.slice(0, n)); 
 
const firstTwoMax = ary(Math.max, 3); 
const nums = [[2, 6, 9, 'a'], [6, 4, 8], [10]].map(x => firstTwoMax(...x)); 
 
console.log(nums, 'nums') 
// [9, 8, 10] 

防抖節流

關于防抖和節流的區別可以參考我之前的文章《電梯與地鐵之說》。

const debounce = (fn, ms = 0) => { 
  let timeoutId; 
  return function(...args) { 
    clearTimeout(timeoutId); 
    timeoutId = setTimeout(() => fn.apply(this, args), ms); 
  }; 
}; 
 
window.addEventListener( 
  'resize', 
  debounce(() => { 
    console.log(window.innerWidth); 
    console.log(window.innerHeight); 
  }, 250) 

傳入高頻次調用的函數和時間間隔，返回一個已防抖的函數。

節流會稀釋函數的執行頻率。在wait秒內只執行一次。

const throttle = (fn, wait) => { 
  let inThrottle, lastFn, lastTime; 
  return function() { 
    const context = this, 
      args = arguments; 
    if (!inThrottle) { 
      fn.apply(context, args); 
      lastTime = Date.now(); 
      inThrottle = true; 
    } else { 
      clearTimeout(lastFn); 
      lastFn = setTimeout(function() { 
        if (Date.now() - lastTime >= wait) { 
          fn.apply(context, args); 
          lastTime = Date.now(); 
        } 
      }, Math.max(wait - (Date.now() - lastTime), 0)); 
    } 
  }; 
}; 
 
window.addEventListener( 
  'resize', 
  throttle(function(evt) { 
    console.log(window.innerWidth); 
    console.log(window.innerHeight); 
  }, 250) 
); // Will log the window dimensions at most every 250ms 

延遲函數執行delay

delay字面意思：「 延遲執行 」。

const delay = (fn, wait, ...args) => setTimeout(fn, wait, ...args); 
 
delay( 
  function (text) { 
    console.log(text); 
  }, 
  1000, 
  'later' 
); // Logs 'later' after one second. 

延遲函數調用defer

defer字面意思：「 延遲調用 」。

可適用于推遲 cpu 密集型計算，以免阻塞渲染引擎工作。使用setTimeout(超時時間為1ms)將函數參數添加到瀏覽器事件隊列末尾。

const defer = (fn, ...args) => setTimeout(fn, 1, ...args); 
 
// Example A: 
defer(console.log, 'a'), console.log('b'); // logs 'b' then 'a' 

異步函數compose

compose函數是「 從右向左去實現的數據執行流 」。它的真正意義在于邏輯分層。利用reduce方法實現函數的“洋蔥”包裹。

const compose = (...fns) => fns.reduce((f, g) => (...args) => f(g(...args))); 
 
const substract3 = x => x - 3; 
const add5 = x => x + 5; 
const multiply = (x, y) => x * y; 
const multiplyAndAdd5AndSubstract3 = compose( 
  substract3, 
  add5, 
  multiply 
); 
multiplyAndAdd5AndSubstract3(5, 2); // 12 

要想實現從左向右執行也非常簡單，把f和g的位置互調一下。

函數只被調用一次once

因為 JavaScript 是單線程執行環境，不需要考慮并發環境，直接一個內部變量存到閉包中，每次調用前判斷，并在第一次調用時，修改其值，讓后續調用全部失效。

const once = (fn) => { 
  let called = false; 
  return function (...args) { 
    if (called) return; 
    called = true; 
    return fn.apply(this, args); 
  }; 
}; 
 
const startApp = function (event) { 
  console.log(this, event); // document.body, MouseEvent 
}; 
document.body.addEventListener("click", once(startApp)); 

判斷函數是否可以執行

第一個參數為函數是否可以執行的判斷條件，第二個參數為執行的函數。

const when = (pred, whenTrue) => (x) => (pred(x) ? whenTrue(x) : x); 
 
const doubleEvenNumbers = when( 
  (x) => x % 2 === 0, 
  (x) => x * 2 
); 
doubleEvenNumbers(2); // 4 
doubleEvenNumbers(1); // 1 

檢查對象屬性

「 判斷某個對象是否具備要求 」。用!!強制轉化為布爾類型。

const checkProp = (predicate, prop) => (obj) => !!predicate(obj[prop]); 
 
const lengthIs4 = checkProp((l) => l === 4, "length"); 
lengthIs4([]); // false 
lengthIs4([1, 2, 3, 4]); // true 
 
const sizeIs4 = checkProp((l) => l === 4, "size"); 
sizeIs4(new Set([1, 2, 3, 4])); // true 
 
const session = { obj: { active: true, disabled: false } }; 
const validUserSession = checkProp((u) => u.active && !u.disabled, "obj"); 
 
validUserSession(session); // true 

鏈式調用

將函數數組轉換為有決策權的鏈式函數調用。

const chainAsync = (fns) => { 
  let curr = 0; 
  const last = fns[fns.length - 1]; 
  const next = () => { 
    const fn = fns[curr++]; 
    fn === last ? fn() : fn(next); 
  }; 
  next(); 
}; 
 
chainAsync([ 
  (next) => { 
    console.log("0 seconds"); 
    setTimeout(next, 1000); 
  }, 
  (next) => { 
    console.log("1 second"); 
    setTimeout(next, 1000); 
  }, 
  () => { 
    console.log("2 second"); 
  }, 
]); 

 本文轉載自微信公眾號「驚天碼盜」，可以通過以下二維碼關注。轉載本文請聯系驚天碼盜公眾號。