Index – 前端面试题

如何准确检测一个值是null类型而不是其他类型隐式转换而来？

const getType = (value: any) => {
  const str: string = Object.prototype.toString.call(value)
  const typeStrArray = str.substring(1, str.length - 1).split(' ')
  return typeStrArray[1].toLowerCase()
}

手写防抖节流？

防抖（debounce）：每次触发定时器后，取消上一个定时器，然后重新触发定时器。防抖一般用于用户未知行为的优化，比如搜索框输入实时提示。

function debounce(func, time) {
  let timer;
  return function() {
    const [that, args] = [this, arguments]; // 因为有可能是方法在调用，所以保留指针
    clearTimeout(timer)
    // setTimeout内的函数中的this往往指向全局
    // 因为setTimeout里调用这个回调只是普通调用，那么此时的环境是window
    // 箭头函数会帮你把this绑定到声明时的上下文->debounce的上下文->onInputChange的上下文，就不是很有意义了
    timer = setTimeout(() => {
      func.apply(that, args);
    }, time);
  }
}
 
onInputChange = debounce((text) => {
  // 获取实时提示
}, 1000)

节流（throttle）：每次触发定时器后，直到这个定时器结束之前无法再次触发该函数。一般用于可预知的用户行为的优化，比如限制按钮点击的触发频率，防止重复的提交。

function throttle(func, time) {
  let previous = 0;
  return function() {
    const [that, args] = [this, arguments];
    const now = Date.now();
    if (now - previous > time) {
      previous = now;
      func.apply(that, args);
    }
  }
}

手写一个Loader？

// 解析css文件并插入到dom中
module.exports = function (content) {
  let str = `
    var style = document.createElement("style");
    style.innerHTML = ${JSON.stringify(content)};
    document.head.appendChild(style);
  `;
  return str;
};
// test: /\.css$/,
// use: [resolve(__dirname, "../loader/testSytleLoader.js")],

手写一个Plugin插件

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';
class ConsoleLogOnBuildWebpackPlugin {
  constructor(options) {
    console.log("current plugin option is" + JSON.stringify(options))
  }
  apply(compiler) { // apply 方法是一个插件所必须的
    // compiler 继承自 tapable
    // tapable  提供了多种 hooks  https://github.com/webpack/tapable#hook-types
    // run      是 AsyncSeriesHook实例 [tapable提供的多种hooks的一种]
    compiler.hooks.run.tap(pluginName, compilation => {
      console.log('webpack 构建过程开始！');
    });
  }
}
 
module.exports = ConsoleLogOnBuildWebpackPlugin

如何获取时区差值？

首先，我们需要获取本地时区与其他时区之间的时间差值。JavaScript提供了一个Date对象，可以获取本地时间和UTC时间之间的差值。我们可以利用这个差值得到本地时间和其他时区时间之间的差值。

// 获取本地时间与UTC时间之间的差值（单位为分钟）
var offset = new Date().getTimezoneOffset();
 
// 计算将本地时间转换为指定时区所需要加上的分钟数
var timeZoneOffset = offset / 60 + timeZoneDiff; // timeZoneDiff为目标时区与UTC时间之间的差值（单位为小时）

有了时区差值，我们就可以将其他时区的时间转换为本地时间了。

// 获取指定时区的本地时间字符串表示形式
function getLocalTimeInTimeZone(timeZoneDiff) {
  var localTime = new Date().getTime() + timeZoneDiff * 60 * 60 * 1000;
  var localTimeStr = new Date(localTime).toLocaleString();
  return localTimeStr;
}
 
// 转换到目标时区的本地时间
var timeZoneDiff = 8; // 假设目标时区为东八区
var localTimeInTimeZone = getLocalTimeInTimeZone(timeZoneDiff);

HTML Inhert