前端面试JavaScript高频手写大全

下面是我对“前端面试JavaScript高频手写大全”的完整攻略：

理解面试手写题的重要性

在前端面试中，手写题经常出现。这类题目不仅考察了我们的语法基础能力，更是考察了我们的逻辑思维能力。因此，提前准备面试手写题可以帮助我们快速掌握JavaScript的基础语法和常见面试题目，并能在面试中游刃有余地回答问题。

建立自己的笔记库

我们可以看到，大部分的手写题是一些经典问题或者常见问题的变形，因此建立自己的笔记库能帮助我们记录这些问题以及解答，形成一个自己的小册子。这样，在面试前自己可以复习这个笔记本，加深对JavaScript基础语法和面试题目的理解。另外，建立笔记本的过程也是一个不断学习的过程，可以使自己的JavaScript技能更加全面。

掌握适当的代码优化技巧

在手写题过程中，优化代码是很重要的环节。最好的优化就是避免不必要的代码。这有助于提高代码执行效率，同时也能减少代码出错的概率。例如，可以使用缓存优化递归函数，使用正则表达式优化字符串替换操作等。通过掌握代码优化技巧，我们能够最大程度地优化JavaScript应用程序，提高应用程序的性能表现。

案例一：手写Promise

class Promise {
  constructor (executor) {
    this.state = 'pending'
    this.value = undefined
    this.reason = undefined
    this.onFulfilledCallbacks = []
    this.onRejectedCallbacks = []

    const resolve = value => {
      if (this.state === 'pending') {
        this.state = 'fulfilled'
        this.value = value
        this.onFulfilledCallbacks.forEach(cb => cb(this.value))
      }
    }

    const reject = reason => {
      if (this.state === 'pending') {
        this.state = 'rejected'
        this.reason = reason
        this.onRejectedCallbacks.forEach(cb => cb(this.reason))
      }
    }

    try {
      executor(resolve, reject)
    } catch (error) {
      reject(error)
    }
  }

  then (onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value
    onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason }

    const promise2 = new Promise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        setTimeout(() => {
          try {
            const x = onFulfilled(this.value)
            resolvePromise(promise2, x, resolve, reject)
          } catch (error) {
            reject(error)
          }
        })
      }

      if (this.state === 'rejected') {
        setTimeout(() => {
          try {
            const x = onRejected(this.reason)
            resolvePromise(promise2, x, resolve, reject)
          } catch (error) {
            reject(error)
          }
        })
      }

      if (this.state === 'pending') {
        this.onFulfilledCallbacks.push(() => {
          setTimeout(() => {
            try {
              const x = onFulfilled(this.value)
              resolvePromise(promise2, x, resolve, reject)
            } catch (error) {
              reject(error)
            }
          })
        })

        this.onRejectedCallbacks.push(() => {
          setTimeout(() => {
            try {
              const x = onRejected(this.reason)
              resolvePromise(promise2, x, resolve, reject)
            } catch (error) {
              reject(error)
            }
          })
        })
      }
    })

    return promise2
  }

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

// 静态方法
Promise.resolve = function (value) {
  return new Promise(resolve => {
    resolve(value)
  })
}

Promise.reject = function (reason) {
  return new Promise((resolve, reject) => {
    reject(reason)
  })
}

function resolvePromise (promise2, x, resolve, reject) {
  if (promise2 === x) {
    return reject(new TypeError('Chaining cycle detected for promise'))
  }

  let called = false

  if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
    try {
      const then = x.then

      if (typeof then === 'function') {
        then.call(
          x,
          y => {
            if (called) return
            called = true
            resolvePromise(promise2, y, resolve, reject)
          },
          r => {
            if (called) return
            called = true
            reject(r)
          }
        )
      } else {
        resolve(x)
      }
    } catch (error) {
      if (called) return
      called = true
      reject(error)
    }
  } else {
    resolve(x)
  }
}

上面是手写Promise的代码。Promise是一个时间延迟的对象，它是异步编程的一种解决方案。Promise的主要优点是解决了回调地狱的问题，并且比较规范化，可以将异步操作和同步操作区分开。在日常开发工作中，Promise使用非常广泛，而在面试中也时常会遇到关于手写Promise的问题。

案例二：手写深拷贝

function cloneDeep (source, hash = new Map()) {
  if (!isObject(source)) return source
  if (hash.has(source)) return hash.get(source)

  const target = Array.isArray(source) ? [] : {}
  hash.set(source, target)

  const symbols = Object.getOwnPropertySymbols(source)
  for (let i = 0; i < symbols.length; i++) {
    const symbol = symbols[i]
    if (isObject(source[symbol])) {
      target[symbol] = cloneDeep(source[symbol], hash)
    } else {
      target[symbol] = source[symbol]
    }
  }

  for (let key in source) {
    if (Object.prototype.hasOwnProperty.call(source, key)) {
      if (isObject(source[key])) {
        target[key] = cloneDeep(source[key], hash)
      } else {
        target[key] = source[key]
      }
    }
  }

  return target
}

function isObject (obj) {
  return typeof obj === 'object' && obj !== null
}

上面是手写深拷贝的代码。深拷贝是一个非常常见的问题，它的作用是将一个对象完全复制一份，包括所有的子对象。由于JavaScript是一种引用型语言，所以对于对象类型的数据在复制时需要注意，否则会影响到原始数据。因此，在日常开发中，手写深拷贝也是一项非常必要的技能。

以上是我对“前端面试JavaScript高频手写大全”的完整攻略，希望可以对你有所帮助！