前端面试笔记

类型判断

typeof

不能区分 Object,Array, null, 都会返回 object
null 在设计之初就是对象

instanceof

检查右边构造函数的prototype属性，是否在左边对象的原型链上。

JS中一切皆对象，每个对象（除了null和undefined）都有自己的原型 proto ，指向对应的构造函数的 prototype 属性，只有函数有 prototype 属性。

只能用于对象，适合用于判断自定义的类实例对象，能够区分Array、Object和Function，但是Array和Function也可以是Object。
有一种特殊情况，当左边对象的原型链上只有null对象，instanceof判断会失真。

Object.prototype.toString.call() 精准判断数据类型。

var type = function (o){
  var s = Object.prototype.toString.call(o);
  return s.match(/\[object (.*?)\]/)[1].toLowerCase();
};
type({}); // "object"
type([]); // "array"
type(10); // "number"
type(null); // "null"
type(); // "undefined"
type(/abcdef/); // "regex"
type(new Date()); // "date"

防抖和节流

image.png

函数被触发的频率太高，出于性能考虑，不希望回调函数被频繁调用。如window.onresize事件，mousemove事件，上传进度，频繁提交表单，输入搜索联想等。

防抖（debounce）

函数被触发执行后，如果单位时间内又被触发，不会执行，且重新计时。

/**
 * @description debounce 非立即执行版 适用场景：resize, input search
 * @param {Function} fn
 * @param {Number} interval
 */
const debounce = (fn, interval) => {
    let timer = null;
    // 箭头函数没有arguments，需要手动调用...args
    return (...args) => {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
            fn(...args);
        }, interval);
    }
}

function debounce (fn, interval) {
    let timer = null;
    return function () {
        let context = this;
        let args = arguments;
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(context, args);
        }, interval);
    }
}

立即执行版，触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。

节流（throttle）

function throttle (fn, delay) {
    let previous = 0;
    return function() {
        let now = Date.now();
        let _this = this;
        let args = arguments;
        if (now - previous > delay) {
            fn.apply(_this, args);
            previous = now;
        }
    }
}

定时器版

/**
 * @description throttle
 * @param {Function} fn
 * @param {Number} interval
 */
const throttle = (fn, interval) => {
    let timer = null;
    return (...args) => {
        if (!timer) {
            timer = setTimeout(() => {
                timer = null;
                fn(...args);
            }, interval);
        }
    }
}

function throttle(fn, interval) {
    let timer = null;
    return funtion () {
      let context = this;
      let args = arguments;
      if (!timer) {
          timer = setTimeout(() => {
             timer = null;
             fn.apply(this, args);
          }, interval);
      }
    }
}