javascript經常使用方法

類型判斷

此方法爲jquery判斷函數類型的方式，經過事先緩存全部全部類型的結果，而後進行object的key值查找

var class2type = {}
var toString = class2type.toString
var str =
  'String Number Boolean Symbol Null Object Array Date RegExp Function Error'
var arr = str.split(' ')
arr.forEach(function(name) {
  class2type['[object ' + name + ']'] = name.toLowerCase()
})

function type(obj) {
  if (obj === null) return obj + ''
  return typeof obj === 'object' || typeof obj === 'function'
    ? class2type[toString.call(obj)] || 'object'
    : typeof obj
}
複製代碼

獲取類型的簡單方式

const type = obj => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase()
複製代碼

防抖函數

防抖函數原理：在事件被觸發n秒後再執行回調，若是在這n秒內又被觸發，則從新計時。

const debounce = (fn, delay, immediate) => {
  let timeout
  return function(...args) {
    let context = this
    let callNow = immediate && !timeout
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      timeout = null
      if (!immediate) fn.apply(context, args)
    }, delay)
    callNow && fn.apply(context, args)
  }
}
複製代碼

使用場景：

• 防止按鈕屢次提交，只執行最後提交的一次
• 表單驗證須要服務端驗證，只執行一段連續的輸入事件的最後一次
• 搜索聯想詞

節流函數

節流函數原理:規定在一個單位時間內，只能觸發一次函數。若是這個單位時間內觸發屢次函數，只有一次生效。

const throttle = (fn, delay) => {
  let flag = false
  return function(...args) {
    if (!flag) return
    flag = true
    setTimeout(() => {
      fn.apply(this, args)
      flag = false
    }, delay)
  }
}
複製代碼

使用場景：

• 拖拽場景：固定時間內只執行一次，防止超高頻次觸發位置變更
• 縮放場景：監控瀏覽器resize
• 動畫場景：避免短期內屢次觸發動畫引發性能問題

函數柯里化

函數柯里化指的是將可以接收多個參數的函數轉化爲接收單一參數的函數，而且返回接收餘下參數且返回結果的新函數的技術。

函數柯里化的主要做用和特色就是參數複用、提早返回和延遲執行。

// 柯里化
const curry = fn => {
  if (fn.length <= 1) return fn;
  const generator = args =>
    args.length === fn.length ?
    fn(...args) :
    arg => generator([...args, arg]);
  return generator([], fn.length);
};
複製代碼

使用場景： 假設有一個方法，接收三個參數，第一個參數爲name，咱們能夠肯定name爲固定的，那麼，可使用柯里化，先傳入一個參數，做爲默認使用函數，避免後續的重複傳參。

判斷多個條件都爲true

function isAllTrue() {
  var sum = 0
  for (var i = 0; i < arguments.length; i++) {
    if (arguments[i]) {
      sum += arguments[i]
    }
  }
  // sum的數量爲true的個數
  return sum === arguments.length
}
複製代碼

使用場景：

• 判斷多個條件都爲true的情況

博客地址 gitbook小冊