这一次彻底搞懂这些常考的 JS 手写题
XPoet 前端鼓励师
  2022-01-06 20:59:55 2022-01-06 20:59    3.7k Words  16 Mins  

现在的前端招聘圈，对前端程序员的能力要求真的是越来越高了（内卷真的太厉害了），出去找工作面试，哪怕是家小公司，大概率都会考一些 JS 手写题，你不会但别人会，自然就被卷死了。

其实，对一个前端工程师来说，JS 本就重中之重，我们要掌握的可不仅仅是这些手写题。

当然，你不会这些手写题也不能代表你的 JS 编程能力不好，我觉得那是因为你不熟悉而已。

现在就跟着作者来一步一步学习，彻底搞懂这些常考的 JS 手写题，无论是在业务开发还是求职面试中都很实用。

image

截止目前，市面上超过 98% 的浏览器支持 ES6，ES6 (ECMAScript 2015) 都已经是 2015 年的标准了，所以这些手写题里面能使用 ES6 实现的均采用 ES6 实现。以下的每一道手写题，都经过作者反复检验，也配备了测试代码，小伙伴放心大胆学起来。

如发现错误或者有更好的实现方式，欢迎大家指正。

手写类型判断

const myTypeOf = (data) => Object.prototype.toString.call(data).slice(8, -1).toLowerCase()

// 测试
console.log(myTypeOf(1)) //--> number
console.log(myTypeOf('1')) //--> string
console.log(myTypeOf(true)) //--> boolean
console.log(myTypeOf([])) //--> array
console.log(myTypeOf({})) //--> object
console.log(myTypeOf(/^/)) //--> regexp
console.log(myTypeOf(new Date())) //--> date
console.log(myTypeOf(Math)) //--> math
console.log(myTypeOf(() => {})) //--> function

手写数组去重

const myUnique = array => [...new Set(array)]

// 测试
console.log(myUnique([1, 1, 2, 3])) //--> [1, 2, 3]

手写 Ajax 的 GET 方法

function myAjaxGet(url) {
  // 创建一个 Promise 对象
  return new Promise(function(resolve, reject) {
    const xhr = new XMLHttpRequest()

    // 新建一个 http 请求
    xhr.open('GET', url, true)

    // 设置响应的数据类型
    xhr.responseType = 'json'

    // 设置请求头信息
    xhr.setRequestHeader('Accept', 'application/json')

    // 设置状态的监听函数
    xhr.onreadystatechange = function() {
      if (this.readyState !== 4) return

      // 当请求成功或失败时，改变 Promise 的状态
      if (this.status === 200) {
        resolve(this.response)
      } else {
        reject(new Error(this.statusText))
      }
    }

    // 设置错误监听函数
    xhr.onerror = function() {
      reject(new Error(this.statusText))
    }

    // 发送 http 请求
    xhr.send(null)
  })
}

// 测试
myAjaxGet('https://api.github.com/users/XPoet').then(res => {
  console.log('res: ', res) //--> {...}
})

手写 EventBus

手写函数节流

定义：规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

使用场景：窗口 resize、scroll、输入框 input、频繁点击等

/**
 * @param fn 需要执行的函数
 * @param delay 间隔时间
 */
const throttle = (fn, delay = 1000) => {
  // 上一次执行 fn 的时间
  let prevTime = 0

  // 将 throttle 处理结果当作函数返回
  return function(...args) {
    // 获取当前时间，转换成时间戳，单位毫秒 ms
    const nowTime = Date.now()
    // 将当前时间和上一次执行函数的时间进行对比
    // 大于间隔时间就把 prevTime 设置为当前时间并执行函数 fn
    if (nowTime - prevTime > delay) {
      prevTime = nowTime
      fn.apply(this, args)
    }
  }
}

// 测试
const testFn = throttle(() => {
  console.log('函数节流测试 - fn 执行了')
}, 1000)

// 定时器每 100 毫秒执行一次 testFn 函数，但是只有间隔时间差大于 1000 毫秒时才会执行 fn
setInterval(testFn, 100) //--> 函数节流测试 - fn 执行了

手写函数防抖

定义：在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。
使用场景：搜索框输入搜索、点击提交等

function debounce(fn, wait) {
  let timer = null

  return function(...args) {
    const ctx = this

    // 如果此时存在定时器的话，则取消之前的定时器重新记时
    if (timer) {
      clearTimeout(timer)
      timer = null
    }

    // 设置定时器，使事件间隔指定事件后执行
    timer = setTimeout(() => {
      fn.apply(ctx, args)
    }, wait)
  }
}

// 测试
const testFn = debounce(() => {
  console.log('函数防抖测试 - fn 执行了')
}, 2000)

// 定时器每 1000 毫秒执行一次 testFn 函数，等待时间未大于 2000 毫秒，所以 fn 永远不会执行
setInterval(testFn, 1000)

// 定时器每 3000 毫秒执行一次 testFn 函数，等待时间大于 2000 毫秒，所以 fn 会隔 3000 执行一次
setInterval(testFn, 3000) //--> 函数防抖测试 - fn 执行了

手写深浅拷贝

浅拷贝

function shallowCopy(object) {
  // 只拷贝对象类型的数据
  if (!object || typeof object !== 'object') return

  // object 如果是数组类型就新建一个空数组，否则新建空对象
  const newObject = Array.isArray(object) ? [] : {}

  // 遍历 object，进行属性拷贝
  for (const key in object) {
    if (object.hasOwnProperty(key)) {
      newObject[key] = object[key]
    }
  }

  return newObject
}

// 测试
const obj1 = { x: 1, y: 2, z: 3 }
const obj2 = shallowCopy(obj1)
console.log(obj2) //--> { x: 1, y: 2, z: 3 }

const arr1 = [1, 2, 3]
const arr2 = shallowCopy(arr1)
console.log(arr2) //--> [1, 2, 3]

深拷贝

function deepCopy(object) {
  // 只拷贝对象类型的数据
  if (!object || typeof object !== 'object') return

  // object 如果是数组类型就新建一个空数组，否则新建空对象
  const newObject = Array.isArray(object) ? [] : {}

  for (const key in object) {
    if (object.hasOwnProperty(key)) {
      // object[key] 如果是对象类型，则使用递归继续遍历拷贝属性
      newObject[key] = typeof object[key] === 'object' ? deepCopy(object[key]) : object[key]
    }
  }

  return newObject
}

// 测试
const obj1 = { x: 1, y: { z: 3 } }
const obj2 = deepCopy(obj1)
console.log(obj2) //--> { x: 1, y: { z: 3 } }

const arr1 = [1, [2, 3]]
const arr2 = deepCopy(arr1)
console.log(arr2) //--> [1, [2, 3]]

手写 call、apply 和 bind 函数

在 JavaScript 中，call、apply 和 bind 是 Function 对象自带的三个方法，这三个方法的主要作用是改变函数中的 this 指向。

共同点：

  • apply 、 call 、bind 三者都是用来改变函数的 this 对象指向。
  • apply 、 call 、bind 三者第一个参数都是 this 要指向的对象，也就是想指定的上下文。（函数的每次调用都会拥有一个特殊值——本次调用的上下文（context），这就是 this 关键字的值。）
  • apply 、 call 、bind 三者都可以利用后续参数传参。

区别：

  • bind 是返回对应函数，便于稍后调用。
  • apply 、call 则是立即调用 。

call() 和 apply() 的作用是一样的，都是用于改变 this 的指向，区别在于 call 接受多个参数，而 apply 接受的是一个数组。

第一个参数的取值有以下 4 种情况：

  1. 不传，或者传 null、undefined，函数中的 this 指向 window 对象。
  2. 传递另一个函数的函数名，函数中的 this 指向这个函数的引用。
  3. 传递字符串、数值或布尔类型等基础类型，函数中的 this 指向其对应的包装对象，如 String、Number、Boolean。
  4. 传递一个对象，函数中的 this 指向这个对象。
function a() {
  console.log(this)
}

function b() {}

const c = { x: 1 }

a.call() //--> window
a.call(null) //--> window
a.call(undefined) //window
a.call(1) //--> Number {1}
a.call('') //--> String {''}
a.call(true) //--> Boolean {true}
a.call(b) //--> function b(){}
a.call(c) //--> {x: 1}

手写 call

call 函数的实现步骤：

  1. 判断调用对象是否为函数，即使我们是定义在函数的原型上的，但是可能出现使用 call 等方式调用的情况。
  2. 判断传入上下文对象是否存在，如果不存在，则设置为 window。
  3. 将函数作为上下文对象的一个属性。
  4. 使用上下文对象来调用这个方法，并保存返回结果。
  5. 删除刚才新增的属性。
  6. 返回结果。
Function.prototype.myCall = function(ctx, ...args) {
  // 判断调用对象
  if (typeof this !== 'function') {
    throw new TypeError('Type Error')
  }

  // 判断 ctx 是否传入，如果未传入则设置为 window
  ctx = ctx || window

  // 将调用函数设为对象的方法
  ctx.fn = this

  // 调用函数
  const result = ctx.fn(...args)

  // 将属性删除
  delete ctx.fn

  return result
}


// 测试
const obj = {
  test(a, b, c) {
    console.log(this, a, b)
  }
}
obj.test.myCall(obj, 4, 5) //--> {test: ƒ, fn: ƒ} 4 5

手写 apply

  1. 判断调用对象是否为函数，即使我们是定义在函数的原型上的，但是可能出现使用 call 等方式调用的情况。
  2. 判断传入上下文对象是否存在，如果不存在，则设置为 window。
  3. 将函数作为上下文对象的一个属性。
  4. 判断参数值是否传入。
  5. 使用上下文对象来调用这个方法，并保存返回结果。
  6. 删除刚才新增的属性。
  7. 返回结果。
Function.prototype.myApply = function(ctx) {
  // 判断调用对象是否为函数
  if (typeof this !== 'function') {
    throw new TypeError('Type Error')
  }

  let result = null

  // 判断 ctx 是否存在，如果未传入则为 window
  ctx = ctx || window

  // 将函数设为对象的方法
  ctx.fn = this

  // 调用方法
  if (arguments[1]) {
    result = ctx.fn(...arguments[1])
  } else {
    result = ctx.fn()
  }

  // 将属性删除
  delete ctx.fn

  return result
}

// 测试
const obj = {
  test(a, b, c) {
    console.log(this, a, b, c)
  }
}
obj.test.myApply(obj, [4, 5, 6]) //--> {test: ƒ, fn: ƒ} 4 5 6

手写 bind

  1. 判断调用对象是否为函数，即使我们是定义在函数的原型上的，但是可能出现使用 call 等方式调用的情况。
  2. 保存当前函数的引用，获取其余传入参数值。
  3. 创建一个函数返回。
  4. 函数内部使用 apply 来绑定函数调用，需要判断函数作为构造函数的情况，这个时候需要传入当前函数的 this 给 apply 调用，其余情况都传入指定的上下文对象。
Function.prototype.myBind = function(ctx, ...args) {
  // 判断调用对象是否为函数
  if (typeof this !== 'function') {
    throw new TypeError('Type Error')
  }

  const fn = this

  return function Fn() {
    // 根据调用方式，传入不同绑定值
    return fn.apply(
      this instanceof Fn ? this : ctx, args.concat(...arguments)
    )
  }
}

// 测试
const obj = {
  test(a, b, c) {
    console.log(this, a + b)
  }
}
obj.test.myBind(obj, 4, 5)() //--> {test: ƒ} 9

函数柯里化

函数柯里化指的是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。例如：add(1, 2, 3, 4, 5) 转换成 add(1)(2)(3)(4)(5)

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

// 测试
// 普通函数
function fn(a, b, c, d, e) {
  console.log(a, b, c, d, e)
}

// 生成的柯里化函数
const _fn = curry(fn)

_fn(1, 2, 3, 4, 5) //--> 1 2 3 4 5
_fn(1)(2)(3, 4, 5) //--> 1 2 3 4 5
_fn(1, 2)(3, 4)(5) //--> 1 2 3 4 5
_fn(1)(2)(3)(4)(5) //--> 1 2 3 4 5

看起来柯里化好像是把简答的问题复杂化了，但是复杂化的同时，我们在使用函数时拥有了更加多的自由度。 而这里对于函数参数的自由处理，正是柯里化的核心所在。 柯里化本质上是降低通用性，提高适用性。

手写 Promise

Promise 是异步编程的一种解决方案，比传统的解决方案回调函数和事件更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了 Promise 对象。

所谓 Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

下面我们用 ES6 语法来手写一个 Promise：

class MyPromise {

  // Promise/A+ 规范规定的三种状态
  PENDING = 'pending' // 等待状态
  FULFILLED = 'fulfilled'// 成功状态
  REJECTED = 'rejected' // 失败状态

  // 构造函数接收一个执行回调
  constructor(executor) {
    this._status = this.PENDING // Promise 初始状态
    this._value = undefined // then 回调的值
    this._resolveQueue = [] // resolve 时触发的成功队列
    this._rejectQueue = [] // reject 时触发的失败队列

    // 使用箭头函数固定 this（resolve 函数在 executor 中触发，不然找不到 this）
    const resolve = value => {
      const run = () => {
        // Promise/A+ 规范规定的 Promise 状态只能从 pending 触发，变成 fulfilled
        if (this._status === this.PENDING) {
          this._status = this.FULFILLED // 更改状态
          this._value = value // 储存当前值，用于 then 回调

          // 执行 resolve 回调
          while (this._resolveQueue.length) {
            const callback = this._resolveQueue.shift()
            callback(value)
          }
        }
      }
      // 把 resolve 执行回调的操作封装成一个函数，放进 setTimeout 里，以实现 Promise 异步调用的特性（规范上是微任务，这里是宏任务）
      setTimeout(run)
    }

    // 同 resolve
    const reject = value => {
      const run = () => {
        if (this._status === this.PENDING) {
          this._status = this.REJECTED
          this._value = value

          while (this._rejectQueue.length) {
            const callback = this._rejectQueue.shift()
            callback(value)
          }
        }
      }
      setTimeout(run)
    }

    // new Promise()时立即执行 executor，并传入 resolve 和 reject
    executor(resolve, reject)
  }

  // then 方法，接收一个成功的回调和一个失败的回调
  then(onFulfilled, onRejected) {
    // 根据规范，如果 then 的参数不是 function，则忽略它，让值继续往下传递，链式调用继续往下执行
    typeof onFulfilled !== 'function' ? onFulfilled = value => value : null
    typeof onRejected !== 'function' ? onRejected = error => error : null

    // then 返回一个新的 Promise
    return new MyPromise((resolve, reject) => {
      const resolveFn = value => {
        try {
          const x = onFulfilled(value)
          // 分类讨论返回值，如果是 Promise，那么等待 Promise 状态变更，否则直接 resolve
          x instanceof MyPromise ? x.then(resolve, reject) : resolve(x)
        } catch (error) {
          reject(error)
        }
      }

      const rejectFn = error => {
        try {
          const x = onRejected(error)
          x instanceof MyPromise ? x.then(resolve, reject) : resolve(x)
        } catch (error) {
          reject(error)
        }
      }

      switch (this._status) {
        case this.PENDING:
          this._resolveQueue.push(resolveFn)
          this._rejectQueue.push(rejectFn)
          break
        case this.FULFILLED:
          resolveFn(this._value)
          break
        case this.REJECTED:
          rejectFn(this._value)
          break
      }
    })
  }

  catch(onRejected) {
    return this.then(null, onRejected)
  }

  finally(callback) {
    return this.then(value => MyPromise.resolve(callback()).then(() => value), error => {
      MyPromise.resolve(callback()).then(() => error)
    })
  }

  // 静态 resolve 方法
  static resolve(value) {
    return value instanceof MyPromise ? value : new MyPromise(resolve => resolve(value))
  }

  // 静态 reject 方法
  static reject(error) {
    return new MyPromise((resolve, reject) => reject(error))
  }

  // 静态 all 方法
  static all(promiseArr) {
    let count = 0
    let result = []
    return new MyPromise((resolve, reject) => {
      if (!promiseArr.length) {
        return resolve(result)
      }
      promiseArr.forEach((p, i) => {
        MyPromise.resolve(p).then(value => {
          count++
          result[i] = value
          if (count === promiseArr.length) {
            resolve(result)
          }
        }, error => {
          reject(error)
        })
      })
    })
  }

  // 静态race 方法
  static race(promiseArr) {
    return new MyPromise((resolve, reject) => {
      promiseArr.forEach(p => {
        MyPromise.resolve(p).then(value => {
          resolve(value)
        }, error => {
          reject(error)
        })
      })
    })
  }
}

// 测试
function fn() {
  return new MyPromise((resolve, reject) => {
    if (Math.random() > 0.5) {
      setTimeout(() => {
        resolve(`resolve ***`)
      }, 500)
    } else {
      setTimeout(() => {
        reject(`reject ***`)
      }, 500)
    }
  })
}

fn().then(res => {
  console.log('resolve value: ', res)
}).catch(err => {
  console.log('reject value: ', err)
})

手写 JSONP

疯狂整理中….

  • Post title：这一次彻底搞懂这些常考的 JS 手写题
  • Post author：XPoet
  • Create time：2022-01-06 20:59:55
  • Post link：https://xpoet.cn/2022/01/这一次彻底搞懂这些常考的 JS 手写题/
  • Copyright Notice：All articles in this blog are licensed under BY-NC-SA unless stating additionally.
 Comments