前端八股文之手写系列

王昭君   in 徐州

面试中常常会遇到同样的问题，大多数面经都将其整理成“面试八股文”以供背诵，尤其是技术乱七八糟一大堆的前端，八股文现象尤为显著

所以面试中击败你的，不光是 985 博士和海龟等精英，还有很多“八股文选手”

本着打不过就加入的原则，本篇文章会持续更新前端八股文系列

# 快排

这里给出分治+递归的写法 代码比较短，方便记忆

const sort = (array) => {
  if (array.length < 2) {
    return array
  }

  const mid = array.splice(Math.floor(array.length / 2), 1)[0]
  const left = []
  const right = []

  array.forEach((item) => {
    if (item < mid) {
      left.push(item)
    } else {
      right.push(item)
    }
  })

  return [...sort(left), mid, ...sort(right)]
}

# 数组扁平化

建议背前 3 个，后面的可以理解下思路（如果面试官问到别的方法的话）

递归（推荐） 元素可以是任意类型

const flatArray = (array) => {
  const result = []
  array.forEach((item) => {
    if (Array.isArray(item)) {
      result.push(...flatArray(item))
    } else {
      result.push(item)
    }
  })
  return result
}

循环+concat（推荐） 元素可以是任意类型

const flatArray = (array) => {
  while (array.some((item) => Array.isArray(item))) {
    array = [].concat(...array)
  }
  return array
}

reduce（推荐） 元素可以是任意类型

const flatArray = (array) => {
  return []
    .concat(array)
    .reduce(
      (item, next) =>
        item.concat(Array.isArray(array) ? flatArray(next) : next),
      []
    )
}

toString+split（不推荐） 代码短但是数组元素只能是number或者同一种类型的基本类型

const flatArray = (array) => {
  return array
    .toString()
    .split(',')
    .map((item) => Number(item))
}

join+split（不推荐） 优缺点同上，join 也可以转字符串

const flatArray = (array) => {
  return array
    .join(',')
    .split(',')
    .map((item) => Number(item))
}

JSON+正则（不推荐） 优缺点同上，正则不太好记忆

const flatArray = (array) => {
  return JSON.stringify(array)
    .replace(/(\[|\])/g, '')
    .split(',')
    .map((item) => Number(item))
}

ES6 自带的 flat（不推荐） 千万别写（就是考你 flat 实现的，你直接调了现成的。。。） 但是要了解一下 ES6 这个新引入的函数

const flatArray = (array) => {
  while (array.some((item) => Array.isArray(item))) {
    array = array.flat()
  }
  return array
}

# call、apply、bind

# call

  • 判断null和undefined时指向全局对象
  • 对基本类型装箱：new Object(...)
Function.prototype._call = function(context) {
  if (context === undefined || context === null) {
    context = globalThis
  }

  context = new Object(context)

  context.fn = this
  const args = []

  Array.prototype.forEach.call(
    Array.prototype.slice.call(arguments, 1),
    (item) => args.push(item)
  )

  const result = context.fn(...args)

  delete context.fn
  return result
}

# apply

类似 call 的实现，传参方式不同

Function.prototype._apply = function(context, args) {
  if (context === undefined || context === null) {
    context = globalThis
  }

  context = new Object(context)
  context.fn = this

  const result = context.fn(...args)

  delete context.fn
  return context
}

# bind

简易版 存在问题：返回的函数不能构造器调用（new xxx()）

Function.prototype._bind = function(...args) {
  const fn = this
  const that = args[0]
  const bindArgs = args.slice(1)

  return (...args) => {
    fn.apply(that, [...bindArgs, ...args])
  }
}

类似 MDN 的实现

Function.prototype._bind = function(context) {
  if (typeof this !== 'function') {
    throw new Error(
      'Function.prototype.bind - what is trying to be bound is not callable'
    )
  }

  const fn = this
  const args = Array.prototype.slice.call(arguments, 1)
  const noop = function() {}
  const result = function() {
    const bindArgs = Array.prototype.slice.call(arguments)
    return fn.apply(this instanceof noop ? this : context, args.bindArgs)
  }

  noop.prototype = fn.prototype
  result.prototype = new noop()
  return result
}

# 数组去重

有很多种思路，这里只列出几种代码较少的

利用 Set 利用 Set 的不可重复特性（ES6）

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

利用 Map 将元素设置为 Map 的键再检索（ES6)

const unique = (array) => {
  const map = new Map()
  return array.filter((item) => !map.has(item) && map.set(item, 1))
}

reduce

const unique = array =>
    array.reduce((item, next) =>
        item.includes(next) ? item : [...item, next], [])
}

ES5 对象 这个方法会将'1'和1看做相同

const unique = (array) => {
  const map = {}
  return array.filter((item) => !map.hasOwnProperty(item) && (map[item] = 1))
}

# 防抖、节流

# 防抖

const debounce = (fn, time) => {
  let timer = null
  return function() {
    clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, arguments)
    }, time)
  }
}

# 节流

const throttle = (fn, time) => {
  let flag = true
  return function() {
    if (!flag) {
      return
    }
    flag = false
    setTimeout(() => {
      fn.apply(this, arguments)
      flag = true
    }, time)
  }
}

# 函数柯里化

实现 add 函数，使得add(1,2,3)、add(1)(2)(3)和add(1,2)(3)都得到正确结果

function add() {
  const args = [...arguments]

  function fn() {
    args.push(...arguments)
    return fn
  }

  fn.toString = function() {
    return args.reduce((item, next) => item + next)
  }

  return fn
}

# 类数组转数组

类数组是指具有 length 属性，但不具有数组方法，索引都为非负整数的对象

Array.from

const trans = Array.from

Array.slice

const transform = (likeArray) => Array.prototype.slice.call(likeArray)

concat

const transform = (likeArray) => Array.prototype.concat.apply([], likeArray)

# 深/浅拷贝

# 深拷贝

利用 JSON 对函数、undefined、Symbol元素无效

const deepCopy = (obj) => JSON.parse(JSON.stringify(obj))

递归

const deepCopy = (obj) => {
  let objNew = Array.isArray(obj) ? [] : {}
  if (obj && typeof obj === 'object') {
    for (key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (obj[key] && typeof obj[key] === 'object') {
          objNew[key] = deepCopy(obj[key])
        } else {
          objNew[key] = obj[key]
        }
      }
    }
  }
  return objNew
}

# 浅拷贝

循环判断

const shallowCopy = (obj) => {
  let newObj = obj instanceof Array ? [] : {}
  for (key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = obj[key]
    }
  }
  return newObj
}

Object.assign

const shallowCopy = (obj) => Object.assign({}, obj)

# 链式调用

class Person {
  constructor() {
    this._name = ''
    this._age = 0
  }

  name(name) {
    this._name = name
    return this
  }

  age(age) {
    this._age = age
    return this
  }
}

// 使用
let person = new Person().name('王昭君').age(21)
快排
数组扁平化
call、apply、bind
call
apply
bind
数组去重
防抖、节流
防抖
节流
函数柯里化
类数组转数组
深/浅拷贝
深拷贝
浅拷贝
链式调用