常见手写函数实现

apply

Function.prototype._apply = function (context = window, args = []) {
  const fnKey = "tmp_" + Date.now();
  context[fnKey] = this;
  const res = context[fnKey](...args);
  Reflect.deleteProperty(context, fnKey);
  return res;
};

call

Function.prototype._call = function (context = window, ...args) {
  const fnKey = "tmp_" + Date.now();
  context[fnKey] = this;
  const res = context[fnKey](...args);
  Reflect.deleteProperty(context, fnKey);
  return res;
};

bind

Function.prototype._bind = function (context = window, ...args) {
  const self = this;

  return function () {
    return self.apply(context, args);
  };
};

new

function _new(fn, ...args) {
  let obj = {};
  obj.__proto__ = fn.prototype;
  let ret = fn.apply(obj, args);
  return ret instanceof Object ? ret : obj;
}

防抖

function debounce(fn, delay) {
  let timer = null;

  return function () {
    timer && clearTimeout(timer);

    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  };
}

节流

function throttle(fn, delay) {
  let canRun = true;

  return function () {
    if (!canRun) return;

    canRun = false;
    setTimeout(() => {
      fn.apply(this, arguments);
      canRun = true;
    }, delay);
  };
}

数值千分位

let num = 2333333333333;
num.toLocaleString(); // "2,333,333,333,333"

let num = 2333333333333;
num
  .toString()
  .split("")
  .reverse()
  .reduce((acc, cur, idx) => {
    return (idx % 3 ? cur : cur + ",") + acc;
  }); // "2,333,333,333,333"

url 参数获取

function getQuery() {
  let searchParams = new URLSearchParams(location.search);
  let query = Object.fromEntries(searchParams);

  return query;
}

function getQuery() {
  const searchStr = location.search;
  if (!searchStr.startsWith("?")) return null;

  let query = {};
  searchStr
    .substring(1)
    .split("&")
    .forEach((item) => {
      let queryItem = item.split("=");
      query[queryItem[0]] = queryItem[1];
    });

  return query;
}

flat

function _flat(arr) {
  while (arr.some((item) => Array.isArray(item))) {
    arr = [].concat(...arr);
  }

  return arr;
}

function _flat(arr) {
  return arr.reduce((acc, cur) => {
    return Array.isArray(cur) ? [...acc, ..._flat(cur)] : [...acc, cur];
  }, []);
}

function _flat(arr) {
  return arr
    .join(",")
    .split(",")
    .map((item) => Number(item));
}

事件代理

function delegate(ele, selector, type, fn) {
  function callback(e) {
    e = e || window.event;
    const target = e.target || e.srcElement;
    let selectors = ele.querySelectorAll(selector);
    selectors = [].slice.call(selectors);
    if (selectors.includes(target)) {
      fn.call(target, e);
    }
  }
  ele.addEventListener(type, callback, false);
}

delegate(document.querySelector("body"), "li", "click", function () {
  console.log("li 点击事件");
});