[JavaScript知识库]JavaScript手写代码（不定期更新）

手写深拷贝

function deepClone(obj) {
  // 过滤特殊情况
  if (obj === null) return null
  if (typeof obj !== 'object') return obj
  if (obj instanceof RegExp) {
    return new RegExp(obj)
  }
  if (obj instanceof Date) {
    return new Date(obj)
  }
  if (obj instanceof Function) {
    return new Function(obj)
  }
  // let newObj
  // if (obj instanceof Array) {
  //   newObj = []
  // } else {
  //   newObj = {}
  // }
  // 不直接创建空对象或数组
  // 让克隆的结果和之前的保持相同的所属类
  let newObj = new obj.constructor()
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = deepClone(obj[key])
    }
  }
  return newObj
}

手写判断数组

arr instanceof Array
arr.constructor === Array
Object.prototype.toString.call(arr) // [object Array]

通过 class 手写一个简易 jQuery

class JQuery {
  constructor(selector) {
    const result = document.querySelectorAll(selector)
    const length = result.length
    for (let i = 0; i < length; i++) {
      this[i] = result[i]
    }
    this.length = length
    this.selector = selector
  }
  get(index) {
    return this[index]
  }
  each(fn) {
    for (let i = 0; i < this.length; i++) {
      const elem = this[i]
      fn(elem)
    }
  }
  on(type, fn) {
    return this.each((elem) => {
      elem.addEventListener(type, fn, false)
    })
  }
}

手写 bind 函数

Function.prototype.bind1 = function () {
  // 将参数拆解为数组
  const args = Array.prototype.slice.call(arguments)
  // 获取 this（数组第一项
  const t = args.shift()
  // fn1.bind(...) 中的 fn1 调用的函数对象
  const self = this
  // 返回一个函数
  return function () {
    return self.apply(t, args)
  }
}

手写防抖和节流

/**
 * @description 函数防抖（频繁触发只执行最后一次）
 * @param {Function} fn 需要执行函数防抖的函数
 * @param {Number} interval 指定间隔时间
 */
function debounce(fn, interval = 300) {
  let timer = null
  return function () {
    clearInterval(timer)
    timer = setTimeout(() => {
      fn.apply(this, arguments)
    }, interval)
  }
}
/**
 * @description 函数节流（频繁触发指定间隔触发）
 * @param {Function} fn 需要执行函数节流的函数
 * @param {Number} interval 指定间隔时间
 */
function throttle(fn, interval = 300) {
  let timer = null
  return function () {
    if (timer) {
      return
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments)
      timer = null
    }, interval)
  }
}

手写深度比较函数

// 判断是否是对象或者是数组
function isObject(obj) {
  if (typeof obj == 'object' && obj !== null) {
    return true
  }
}
// 全相等
function isEqual(obj1, obj2) {
  // 如果都是值类型 直接进行比较
  if (!isObject(obj1) || !isObject(obj2)) {
    return obj1 === obj2
  }
  // 如果都是同一个对象或数组，直接比较
  if (obj1 === obj2) {
    return true
  }

  // 两个都是对象或数组，而且不相等
  // 1.先取出 obj1 和 obj2 的 keys，比较个数
  const obj1KeyArr = Object.keys(obj1)
  const obj2KeyArr = Object.keys(obj2)
  if (obj1KeyArr.length !== obj2KeyArr.length) {
    return false
  }
  // 2.以 obj1 为基准，和 obj2 依次递归比较
  for (let key in obj1) {
    const res = isEqual(obj1[key], obj2[key])
    if (!res) {
      return false
    }
  }

  // 全相等
  return true
}
const obj1 = {
  a: 100,
  b: {
    x: 100,
    y: 200,
  },
}
const obj2 = {
  a: 100,
  b: {
    x: 100,
    y: 200,
  },
}
console.log(isEqual(obj1, obj2))