30 道高频 JavaScript 手写实现汇总

30 道高频 JavaScript 手写实现汇总 | 极客日志

// 函数防抖的实现
function debounce(fn, wait) {
  let timer = null;
  return function () {
    let context = this, args = arguments;
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
    timer = setTimeout(() => {
      fn.apply(context, args);
    }, wait);
  };
}

// 函数节流的实现
function throttle(fn, delay) {
  let curTime = Date.now();
  return function () {
    let context = this, args = arguments, nowTime = Date.now();
    if (nowTime - curTime >= delay) {
      curTime = Date.now();
      return fn.apply(context, args);
    }
  };
}

// 函数节流的实现
const throttle = (fn, delay = 500) => {
  let flag = true;
  return (...args) => {
    if (!flag) return;
    flag = false;
    setTimeout(() => {
      fn.apply(this, args);
      flag = true;
    }, delay);
  };
};

// 使用 JSON 处理方法
const newObj = JSON.parse(JSON.stringify(obj));

// 递归实现深拷贝
function deepCopy(obj, dep = 0) {
  if (typeof obj !== "object" || dep < 1) {
    return typeof obj === "object" ? Object.assign({}, obj) : obj;
  }
  let clone = Array.isArray(obj) ? [] : {};
  for (const key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      if (obj[key] && typeof obj[key] === "object") {
        clone[key] = deepCopy(obj[key], dep - 1);
      } else {
        clone[key] = obj[key];
      }
    }
  }
  return clone;
}

function create(obj) {
  function F() {}
  F.prototype = obj;
  return new F();
}

// instanceof 的实现
function myInstanceof(left, right) {
  // 获取对象原型
  let __proto__ = Object.getPrototypeOf(left),
    prototype = right.prototype;
  // 获取构造函数的 prototype
  while (__proto__) {
    if (__proto__ === prototype) {
      return true;
    }
    __proto__ = Object.getPrototypeOf(__proto__);
  }
  return false;
}

function objectFactory(constructor, ...rest) {
  let newObject = null,
    result = null;
  // 判断参数是否是一个函数
  if (typeof constructor !== "function") {
    console.error("type error");
    return;
  }
  // 新建一个空对象，对象的原型为构造函数的 prototype 对象
  newObject = Object.create(constructor.prototype);
  // 将 this 指向新建对象，并执行函数
  result = constructor.apply(newObject, ...rest);
  // 判断返回对象
  let flag = result && (typeof result === "object" || typeof result === "function");
  // 判断返回结果
  return flag ? result : newObject;
}

// call 函数实现
Function.prototype.myCall = function (context) {
  // 判断调用对象
  if (typeof this !== "function") {
    console.error("type error");
  }
  // 获取参数
  let args = [...arguments].slice(1),
    result = null;
  // 判断 context 是否传入，如果未传入则设置为 window
  context = context || window;
  // 将调用函数设为对象的方法
  context.fn = this;
  // 调用函数
  result = context.fn(...args);
  // 将属性删除
  delete context.fn;
  return result;
};

// apply 函数实现
Function.prototype.myApply = function (context) {
  // 判断调用对象是否为函数
  if (typeof this !== "function") {
    throw new TypeError("Error");
  }
  let result = null;
  // 判断 context 是否存在，如果未传入则为 window
  context = context || window;
  // 将函数设为对象的方法
  context.fn = this;
  // 调用方法
  if (arguments[1]) {
    result = context.fn(...arguments[1]);
  } else {
    result = context.fn();
  }
  // 将属性删除
  delete context.fn;
  return result;
};

// bind 函数实现
Function.prototype.myBind = function (context) {
  // 判断调用对象是否为函数
  if (typeof this !== "function") {
    throw new TypeError("Error");
  }
  // 获取参数
  var args = [...arguments].slice(1),
    fn = this;
  return function Fn() {
    // 根据调用方式，传入不同绑定值
    return fn.apply(this instanceof Fn ? this : context, args.concat(...arguments));
  };
};

function curry(fn, args) {
  // 获取函数需要的参数长度
  let length = fn.length;
  args = args || [];
  return function () {
    let subArgs = args.slice(0);
    // 拼接得到现有的所有参数
    for (let i = 0; i < arguments.length; i++) {
      subArgs.push(arguments[i]);
    }
    // 判断参数的长度是否已经满足函数所需参数的长度
    if (subArgs.length >= length) {
      // 如果满足，执行函数
      return fn.apply(this, subArgs);
    } else {
      // 如果不满足，递归返回柯里化的函数，等待参数的传入
      return curry.call(this, fn, subArgs);
    }
  };
}

function currying(exeFunc) {
  let args = [];
  let currFunc = function (...rest) {
    args.push(...rest);
    if (rest.length <= 0) {
      return exeFunc(args);
    } else {
      return currFunc;
    }
  };
  return currFunc;
}

function curry(fn, ...args) {
  return fn.length <= args.length ? fn(...args) : curry.bind(null, fn, ...args);
}

const SERVER_URL = "/server";
let xhr = new XMLHttpRequest();
// 创建 Http 请求
xhr.open("GET", SERVER_URL, true);
// 设置状态监听函数
xhr.onreadystatechange = function () {
  if (this.readyState !== 4) return;
  // 当请求成功时
  if (this.status === 200) {
    handle(this.response);
  } else {
    console.error(this.statusText);
  }
};
// 设置请求失败时的监听函数
xhr.onerror = function () {
  console.error(this.statusText);
};
// 设置请求头信息
xhr.responseType = "json";
xhr.setRequestHeader("Accept", "application/json");
// 发送 Http 请求
xhr.send(null);

var PromisePolyfill = (function () {
  // 和 reject 不同的是 resolve 需要尝试展开 thenable 对象
  function tryToResolve(value) {
    if (this === value) {
      // 主要是防止下面这种情况
      // let y = new Promise(res => setTimeout(res(y)))
      throw TypeError("Chaining cycle detected for promise!");
    }
    // 根据规范 2.32 以及 2.33 对对象或者函数尝试展开
    // 保证 S6 之前的 polyfill 也能和 ES6 的原生 promise 混用
    if (value !== null && (typeof value === "object" || typeof value === "function")) {
      try {
        // 这里记录这次 then 的值同时要被 try 包裹
        // 主要原因是 then 可能是一个 getter, 也也就是说
        // 1. value.then 可能报错
        // 2. value.then 可能产生副作用 (例如多次执行可能结果不同)
        var then = value.then;
        // 另一方面，由于无法保证 then 确实会像预期的那样只调用一个 onFullfilled / onRejected
        // 所以增加了一个 flag 来防止 resolveOrReject 被多次调用
        var thenAlreadyCalledOrThrow = false;
        if (typeof then === "function") {
          // 是 thenable 那么尝试展开
          // 并且在该 thenable 状态改变之前 this 对象的状态不变
          then.bind(value)(
            // onFullfilled
            function (value2) {
              if (thenAlreadyCalledOrThrow) return;
              thenAlreadyCalledOrThrow = true;
              tryToResolve.bind(this, value2)();
            }.bind(this),
            // onRejected
            function (reason2) {
              if (thenAlreadyCalledOrThrow) return;
              thenAlreadyCalledOrThrow = true;
              resolveOrReject.bind(this, "rejected", reason2)();
            }.bind(this)
          );
        } else {
          // 拥有 then 但是 then 不是一个函数 所以也不是 thenable
          resolveOrReject.bind(this, "resolved", value)();
        }
      } catch (e) {
        if (thenAlreadyCalledOrThrow) return;
        thenAlreadyCalledOrThrow = true;
        resolveOrReject.bind(this, "rejected", e)();
      }
    } else {
      // 基本类型 直接返回
      resolveOrReject.bind(this, "resolved", value)();
    }
  }

  function resolveOrReject(status, data) {
    if (this.status !== "pending") return;
    this.status = status;
    this.data = data;
    if (status === "resolved") {
      for (var i = 0; i < this.resolveList.length; ++i) {
        this.resolveList[i]();
      }
    } else {
      for (i = 0; i < this.rejectList.length; ++i) {
        this.rejectList[i]();
      }
    }
  }

  function Promise(executor) {
    if (!(this instanceof Promise)) {
      throw Error("Promise can not be called without new !");
    }
    if (typeof executor !== "function") {
      // 非标准 但与 Chrome 谷歌保持一致
      throw TypeError("Promise resolver " + executor + " is not a function");
    }
    this.status = "pending";
    this.resolveList = [];
    this.rejectList = [];
    try {
      executor(tryToResolve.bind(this), resolveOrReject.bind(this, "rejected"));
    } catch (e) {
      resolveOrReject.bind(this, "rejected", e)();
    }
  }

  Promise.prototype.then = function (onFullfilled, onRejected) {
    // 返回值穿透以及错误穿透，注意错误穿透用的是 throw 而不是 return，否则的话
    // 这个 then 返回的 promise 状态将变成 resolved 即接下来的 then 中的 onFullfilled
    // 会被调用，然而我们想要调用的是 onRejected
    if (typeof onFullfilled !== "function") {
      onFullfilled = function (data) {
        return data;
      };
    }
    if (typeof onRejected !== "function") {
      onRejected = function (reason) {
        throw reason;
      };
    }
    var executor = function (resolve, reject) {
      setTimeout(function () {
        try {
          // 拿到对应的 handle 函数处理 this.data
          // 并以此为依据解析这个新的 Promise
          var value =
            this.status === "resolved"
              ? onFullfilled(this.data)
              : onRejected(this.data);
          resolve(value);
        } catch (e) {
          reject(e);
        }
      }.bind(this));
    };
    // then 接受两个函数返回一个新的 Promise
    // then 自身的执行永远异步与 onFullfilled/onRejected 的执行
    if (this.status !== "pending") {
      return new Promise(executor.bind(this));
    } else {
      // pending
      return new Promise(function (resolve, reject) {
        this.resolveList.push(executor.bind(this, resolve, reject));
        this.rejectList.push(executor.bind(this, resolve, reject));
      }.bind(this));
    }
  };

  // for prmise A+ test
  Promise.deferred = Promise.defer = function () {
    var dfd = {};
    dfd.promise = new Promise(function (resolve, reject) {
      dfd.resolve = resolve;
      dfd.reject = reject;
    });
    return dfd;
  };

  // for prmise A+ test
  if (typeof module !== "undefined") {
    module.exports = Promise;
  }
  return Promise;
})();

PromisePolyfill.all = function (promises) {
  return new Promise((resolve, reject) => {
    const result = [];
    let cnt = 0;
    for (let i = 0; i < promises.length; ++i) {
      promises[i].then(
        (value) => {
          cnt++;
          result[i] = value;
          if (cnt === promises.length) resolve(result);
        },
        reject
      );
    }
  });
};

PromisePolyfill.race = function (promises) {
  return new Promise((resolve, reject) => {
    for (let i = 0; i < promises.length; ++i) {
      promises[i].then(resolve, reject);
    }
  });
};

function parseToMoney(num) {
  num = parseFloat(num.toFixed(3));
  let [integer, decimal] = String.prototype.split.call(num, ".");
  integer = integer.replace(/\d(?=(\d{3})+$)/g, "$&,");
  return integer + "." + (decimal ? decimal : "");
}

class Subject {
  constructor() {
    this.ObserverList = [];
  }
  add(observer) {
    this.ObserverList.push(observer);
  }
  remove(observer) {
    this.ObserverList = this.ObserverList.filter((item) => item !== observer);
  }
  notify(...arg) {
    this.ObserverList.forEach((cb) => cb.update(...arg));
  }
}

class Observer {
  constructor(name) {
    this.name = name;
  }
  update() {
    console.log(this.name);
  }
}

/**
 * 发布/订阅模式组件
 */
// 定义发布/订阅类
class Pubsub {
  constructor() {
    this.topics = {};
    this.subUid = -1;
  }
  // 发布事件
  publish(topic, args) {
    if (!this.topics[topic]) return false;
    let subscribers = this.topics[topic];
    let len = subscribers ? subscribers.length : 0;
    while (len--) {
      subscribers[len].func(topic, args);
    }
    return this;
  }
  // 订阅事件
  subscribe(topic, func) {
    if (!this.topics[topic]) this.topics[topic] = [];
    let token = (++this.subUid).toString();
    this.topics[topic].push({
      token: token,
      func: func,
    });
    return token;
  }
  // 取消订阅
  unsubscribe(token) {
    for (let m in this.topics) {
      if (this.topics[m]) {
        for (let i = 0; i < this.topics[m].length; i++) {
          if (this.topics[m][i].token == token) {
            this.topics[m].splice(i, 1);
            return token;
          }
        }
      }
    }
    return this;
  }
}

function mySetInterval(fn, timeout) {
  setTimeout(() => {
    fn();
    mySetInterval(fn, timeout);
  }, timeout);
}

source = [
  { id: 1, pid: 0, name: "body" },
  { id: 2, pid: 1, name: "title" },
  { id: 3, pid: 2, name: "div" },
];

tree = [
  {
    id: 1,
    pid: 0,
    name: "body",
    children: [
      {
        id: 2,
        pid: 1,
        name: "title",
        children: [
          {
            id: 3,
            pid: 2,
            name: "div",
          },
        ],
      },
    ],
  },
];

function jsonToTree(data) {
  // 初始化结果数组，并判断输入数据的格式
  let result = [];
  if (!Array.isArray(data)) {
    return result;
  }
  // 使用 map，将当前对象的 id 与当前对象对应存储起来
  let map = {};
  data.forEach((item) => {
    map[item.id] = item;
  });
  data.forEach((item) => {
    let parent = map[item.pid];
    if (parent) {
      (parent.children || (parent.children = [])).push(item);
    } else {
      result.push(item);
    }
  });
  return result;
}

function timeout(delay) {
  return new Promise((resolve) => {
    setTimeout(resolve, delay);
  });
}

function sleep(time, fn) {
  let curDate = Date.now();
  while (Date.now() - curDate < time); // eslint-disable-line no-empty
  fn();
}

// 数组扁平化示例
let arr = [
  [22, [1, 2, [5, 8], [9, 2]], [2, 7, 1, [9, 0, [1, 6]]]],
  [2],
];

function flatten(arr, dep) {
  return dep > 1
    ? arr.reduce((pre, cur) => pre.concat(Array.isArray(cur) ? flatten(cur, dep - 1) : cur), [])
    : Array.prototype.slice.call(arr);
}

function flatten2(arr, dep = 0) {
  if (dep < 1) {
    return arr.slice();
  }
  while (dep && arr.some((item) => Array.isArray(item))) {
    arr = [].concat(...arr);
    dep--;
  }
  return arr;
}

function flatten3(arr, dep = 0) {
  if (dep < 1) {
    return Array.prototype.slice.call(arr);
  }
  let result = [];
  arr.forEach((element) =>
    Array.isArray(element) ? result.push.apply(result, flatten3(element, dep - 1)) : result.push(element)
  );
  return result;
}

function flatten4(arr) {
  return arr.toString().split(",").map((item) => +item);
}

function flatten5(arr, dep = 0) {
  let stack = [...arr];
  let result = [];
  while (stack.length) {
    let data = stack.pop();
    if (Array.isArray(data)) {
      stack.push(...data);
    } else {
      result.push(data);
    }
  }
  return result.reverse();
}

Object.myAssign = function (target, ...source) {
  if (target == null) {
    throw new TypeError("Cannot convert undefined or null to object");
  }
  let ret = Object(target);
  source.forEach(function (obj) {
    if (obj != null) {
      for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
          ret[key] = obj[key];
        }
      }
    }
  });
  return ret;
};

for (var i = 0; i < 5; i++) {
  (function (i) {
    setTimeout(function () {
      console.log(i);
    }, i * 1000);
  })(i);
}

for (let i = 0; i < 5; i++) {
  setTimeout(function () {
    console.log(i);
  }, i * 1000);
}

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("=");
      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;
}

function jsonStringify(obj) {
  let type = typeof obj;
  if (type !== "object") {
    if (/string|undefined|function/.test(type)) {
      obj = '"' + obj + '"';
    }
    return String(obj);
  } else {
    let json = [];
    let arr = Array.isArray(obj);
    for (let k in obj) {
      let v = obj[k];
      let type = typeof v;
      if (/string|undefined|function/.test(type)) {
        v = '"' + v + '"';
      } else if (type === "object") {
        v = jsonStringify(v);
      }
      json.push((arr ? "" : '"' + k + '":') + String(v));
    }
    return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}");
  }
}

let json = '{"name":"cxk", "age":25}';
let obj = eval("(" + json + ")");

function inheritPrototype(subType, superType) {
  // 创建对象，创建父类原型的一个副本
  let prototype = Object.create(superType.prototype);
  // constructor 属性为子类构造函数
  prototype.constructor = subType;
  // 指定对象，将新创建的对象赋值给子类的原型
  subType.prototype = prototype;
}

class Rectangle {
  // constructor
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}
const rectangle = new Rectangle(40, 20);
console.log(rectangle.area); // 输出 800

// 继承
class Square extends Rectangle {
  constructor(len) {
    // 子类没有 this，必须先调用 super
    super(len, len);
    // 如果子类中存在构造函数，则需要在使用"this"之前首先调用 super()
    this.name = "SquareIng";
  }
  get area() {
    return this.height * this.width;
  }
}
const square = new Square(20);
console.log(square.area); // 输出 400

function _inherits(subType, superType) {
  // 创建对象，创建父类原型的一个副本
  // 增强对象，弥补因重写原型而失去的默认的 constructor 属性
  // 指定对象，将新创建的对象赋值给子类的原型
  subType.prototype = Object.create(superType && superType.prototype, {
    constructor: {
      value: subType,
      enumerable: false,
      writable: true,
      configurable: true,
    },
  });
  if (superType) {
    Object.setPrototypeOf
      ? Object.setPrototypeOf(subType, superType)
      : (subType.__proto__ = superType);
  }
}

const isCycleObject = (obj, parent) => {
  const parentArr = parent || [obj];
  for (let i in obj) {
    if (typeof obj[i] === "object") {
      let flag = false;
      parentArr.forEach((pObj) => {
        if (pObj === obj[i]) {
          flag = true;
        }
      });
      if (flag) return true;
      flag = isCycleObject(obj[i], [...parentArr, obj[i]]);
      if (flag) return true;
    }
  }
  return false;
};

function unique(array) {
  // res 用来存储结果
  var res = [];
  for (var i = 0, arrayLen = array.length; i < arrayLen; i++) {
    for (var j = 0, resLen = res.length; j < resLen; j++) {
      if (array[i] === res[j]) {
        break;
      }
    }
    // 如果 array[i] 是唯一的，那么执行完循环，j 等于 resLen
    if (j === resLen) {
      res.push(array[i]);
    }
  }
  return res;
}

function unique(arr) {
  return [...new Set(arr)];
}

function unique_(arr) {
  return arr.filter((item, index) => arr.indexOf(item) === index);
}

function unique__(arr) {
  return arr.reduce((pre, cur) => (pre.includes(cur) ? pre : pre.concat(cur)), []);
}

function unique___(arr) {
  let mp = new Map();
  arr.forEach((element) => {
    if (!mp.has(element)) {
      mp.set(element, 1);
    }
  });
  return [...mp.keys()];
}

function unique(array) {
  var res = [];
  var sortedArray = array.slice().sort();
  var seen;
  for (var i = 0, len = sortedArray.length; i < len; i++) {
    // 如果是第一个元素或者相邻的元素不相同
    if (!i || seen !== sortedArray[i]) {
      res.push(sortedArray[i]);
    }
    seen = sortedArray[i];
  }
  return res;
}

let imgList = [...document.querySelectorAll("img")];
let length = imgList.length;
const imgLazyLoad = (function () {
  let count = 0;
  return function () {
    let deleteIndexList = [];
    imgList.forEach((img, index) => {
      let rect = img.getBoundingClientRect();
      if (rect.top < window.innerHeight) {
        img.src = img.dataset.src;
        deleteIndexList.push(index);
        count++;
        if (count === length) {
          document.removeEventListener("scroll", imgLazyLoad);
        }
      }
    });
    imgList = imgList.filter((img, index) => !deleteIndexList.includes(index));
  };
})();
// 加上防抖处理
document.addEventListener("scroll", debounce(imgLazyLoad, 200));

function shuffle(arr) {
  for (let i = 0; i < arr.length; i++) {
    let randomIndex = i + Math.floor(Math.random() * (arr.length - i));
    [arr[i], arr[randomIndex]] = [arr[randomIndex], arr[i]];
  }
  return arr;
}

const jsonp = ({ url, params, callbackName }) => {
  const generateUrl = () => {
    let dataSrc = "";
    for (let key in params) {
      if (params.hasOwnProperty(key)) {
        dataSrc += `${key}=${params[key]}&`;
      }
    }
    dataSrc += `callback=${callbackName}`;
    return `${url}?${dataSrc}`;
  };
  return new Promise((resolve, reject) => {
    const scriptEle = document.createElement("script");
    scriptEle.src = generateUrl();
    document.body.appendChild(scriptEle);
    window[callbackName] = (data) => {
      resolve(data);
      document.removeChild(scriptEle);
    };
  });
};

30 道高频 JavaScript 手写实现汇总

JavaScript 手写实现合集

1. 手写防抖函数

2. 手写节流函数

使用时间戳实现

使用标记实现

3. 手写深拷贝

使用 JSON 方法

递归实现深拷贝

4. 手写 Object.create

5. 手写 instanceof

6. 手写 new 操作符

7. 手写 Function.prototype.call 方法

8. 手写 Function.prototype.apply 方法

9. 手写 Function.prototype.bind 方法

10. 手写函数柯里化

实现方式 1

实现方式 2

ES6 实现

11. 手写 AJAX 请求

12. 手写 A+ 规范的 Promise

13. 手写千位分隔符

14. 手写观察者模式

15. 发布/订阅模式

16. 使用 setTimeout 实现 setInterval

17. 将 JS 对象转化为树形结构

18. 实现 sleep 函数

使用 Promise 封装 setTimeout

使用时间戳阻塞线程

19. 手写 ES6 的 flat(数组扁平化)

方法 1: reduce + concat

方法 2: some + concat + 解构

方法 3: push + apply

方法 4: toString (仅适用于数字)

方法 5: 栈实现

20. 手写 Object.assign

21. 实现每隔一秒打印 1,2,3,4

使用闭包实现

使用 let 块级作用域

22. JS 解析 URL Params 为对象

23. 实现一个 JSON.stringify

24. 实现 JSON.parse

25. 手写 JS 的继承

寄生组合式继承

ES6 class 的 extends

26. 判断对象是否存在循环引用

27. 数组的去重

双重循环

ES6 Set

filter + indexOf

reduce + includes

Map 实现

排序后去重

28. 图片懒加载

29. 洗牌算法

30. 手写 JSONP

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具