實現防抖函式

防抖函式原理：在事件被觸發n秒後再執行回撥，如果在這n秒內又被觸發，則重新計時

// func是使用者傳入需要防抖的函式// wait是等待時間const debounce = (func, wait = 50) => {  // 快取一個定時器id  let timer = 0  // 這裡返回的函式是每次使用者實際呼叫的防抖函式  // 如果已經設定過定時器了就清空上一次的定時器  // 開始一個新的定時器，延遲執行使用者傳入的方法  return function(...args) {    if (timer) clearTimeout(timer)    timer = setTimeout(() => {      func.apply(this, args)    }, wait)  }}

適用場景：

實現節流函式

節流函式原理:規定在一個單位時間內，只能觸發一次函式。如果這個單位時間內觸發多次函式，只有一次生效

// func是使用者傳入需要防抖的函式// wait是等待時間const throttle = (func, wait = 50) => {  // 上一次執行該函式的時間  let lastTime = 0  return function(...args) {    // 當前時間    let now = +new Date()    // 將當前時間和上一次執行函式時間對比    // 如果差值大於設定的等待時間就執行函式    if (now - lastTime > wait) {      lastTime = now      func.apply(this, args)    }  }}

適用場景：

拖拽場景：固定時間內只執行一次，防止超高頻次觸發位置變動縮放場景：監控瀏覽器resize動畫場景：避免短時間內多次觸發動畫引起效能問題深克隆

function deepClone(obj){  //判斷是否是簡單資料型別  if(typeof obj === 'object'){    //複雜資料型別    let res = obj.constructor === Array ? [] : {};    for(let i in obj){      res[i] = typeof obj[i] === 'object' ? deepClone(obj[i]): obj[i]    }    return res;  }else{    // 簡單資料型別    var res = obj;  }  return res;}

實現instanceOf

function myInstanceOf(left, right){  let proto = Object.getPrototypeOf(left)  while(true){    if(proto === null) return false;    if(proto === right) return true;        proto = Object.getPrototypeOf(proto)  }}

模擬new

function myNew(fn, ...args){  let instance = Object.create(fn.prototype)  let res = fn.apply(instance, args)    return typeof res === 'object' ? res : instance;}

解析 URL Params 為物件

let url = 'http://www.domain.com/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&enabled';parseParam(url)/* 結果{ user: 'anonymous',  id: [ 123, 456 ], // 重複出現的 key 要組裝成陣列，能被轉成數字的就轉成數字型別  city: '北京', // 中文需解碼  enabled: true, // 未指定值得 key 約定為 true}*/

function parseParam(url) {  const paramsStr = /.+\?(.+)$/.exec(url)[1]; // 將 ? 後面的字串取出來  const paramsArr = paramsStr.split('&'); // 將字串以 & 分割後存到陣列中  let paramsObj = {};  // 將 params 存到物件中  paramsArr.forEach(param => {    if (/=/.test(param)) { // 處理有 value 的引數      let [key, val] = param.split('='); // 分割 key 和 value      val = decodeURIComponent(val); // 解碼      val = /^\d+$/.test(val) ? parseFloat(val) : val; // 判斷是否轉為數字      if (paramsObj.hasOwnProperty(key)) { // 如果物件有 key，則新增一個值        paramsObj[key] = [].concat(paramsObj[key], val);      } else { // 如果物件沒有這個 key，建立 key 並設定值        paramsObj[key] = val;      }    } else { // 處理沒有 value 的引數      paramsObj[param] = true;    }  })  return paramsObj;}

轉化為駝峰命名

var s1 = "get-element-by-id"// 轉化為 getElementByIdvar f = function(s) {    return s.replace(/-\w/g, function(x) {        return x.slice(1).toUpperCase();    })}

查詢字串中出現最多的字元和個數

例: abbcccddddd -> 字元最多的是d，出現了5次

let str = "abcabcabcbbccccc";let num = 0;let char = ''; // 使其按照一定的次序排列str = str.split('').sort().join('');// "aaabbbbbcccccccc"// 定義正則表示式let re = /(\w)\1+/g;str.replace(re,($0,$1) => {    if(num < $0.length){        num = $0.length;        char = $1;            }});console.log(`字元最多的是${char}，出現了${num}次`);