22 道高频 JavaScript 手写面试题及答案

实现防抖函数（debounce）

防抖函数原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

那么与节流函数的区别直接看这个动画实现即可。

手写简化版:

// 防抖函数

const debounce = (fn, delay) => {

  let timer = null;

  return (...args) => {

    clearTimeout(timer);

    timer = setTimeout(() => {

      fn.apply(this, args);

    }, delay);

  };

};

适用场景：

• 按钮提交场景：防止多次提交按钮，只执行最后提交的一次
• 服务端验证场景：表单验证需要服务端配合，只执行一段连续的输入事件的最后一次，还有搜索联想词功能类似

生存环境请用lodash.debounce

实现节流函数（throttle）

防抖函数原理:规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

// 手写简化版

// 节流函数

const throttle = (fn, delay = 500) => {

  let flag = true;

  return (...args) => {

    if (!flag) return;

    flag = false;

    setTimeout(() => {

      fn.apply(this, args);

      flag = true;

    }, delay);

  };

};

适用场景：

• 拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动
• 缩放场景：监控浏览器resize
• 动画场景：避免短时间内多次触发动画引起性能问题

深克隆（deepclone）

简单版：

const newObj = JSON.parse(JSON.stringify(oldObj));

局限性：

1. 他无法实现对函数 、RegExp等特殊对象的克隆

2. 会抛弃对象的constructor,所有的构造函数会指向Object

3. 对象有循环引用,会报错

面试版:

/**

 * deep clone

 * @param  {[type]} parent object 需要进行克隆的对象

 * @return {[type]}        深克隆后的对象

 */

const clone = parent => {

  // 判断类型

  const isType = (obj, type) => {

    if (typeof obj !== "object") return false;

    const typeString = Object.prototype.toString.call(obj);

    let flag;

    switch (type) {

      case "Array":

        flag = typeString === "[object Array]";

        break;

      case "Date":

        flag = typeString === "[object Date]";

        break;

      case "RegExp":

        flag = typeString === "[object RegExp]";

        break;

      default:

        flag = false;

    }

    return flag;

  };

  // 处理正则

  const getRegExp = re => {

    var flags = "";

    if (re.global) flags += "g";

    if (re.ignoreCase) flags += "i";

    if (re.multiline) flags += "m";

    return flags;

  };

  // 维护两个储存循环引用的数组

  const parents = [];

  const children = [];

  const _clone = parent => {

    if (parent === null) return null;

    if (typeof parent !== "object") return parent;

    let child, proto;

    if (isType(parent, "Array")) {

      // 对数组做特殊处理

      child = [];

    } else if (isType(parent, "RegExp")) {

      // 对正则对象做特殊处理

      child = new RegExp(parent.source, getRegExp(parent));

      if (parent.lastIndex) child.lastIndex = parent.lastIndex;

    } else if (isType(parent, "Date")) {

      // 对Date对象做特殊处理

      child = new Date(parent.getTime());

    } else {

      // 处理对象原型

      proto = Object.getPrototypeOf(parent);

      // 利用Object.create切断原型链

      child = Object.create(proto);

    }

    // 处理循环引用

    const index = parents.indexOf(parent);

    if (index != -1) {

      // 如果父数组存在本对象,说明之前已经被引用过,直接返回此对象

      return children[index];

    }

    parents.push(parent);

    children.push(child);

    for (let i in parent) {

      // 递归

      child[i] = _clone(parent[i]);

    }

    return child;

  };

  return _clone(parent);

};

局限性:

1. 一些特殊情况没有处理: 例如Buffer对象、Promise、Set、Map
2. 另外对于确保没有循环引用的对象，我们可以省去对循环引用的特殊处理，因为这很消耗时间

　　

　　模板引擎实现