JavaScript 手写面试题及答案

面试中遇到的部分手写面试题

1.解析url中的queryString

问题：

输入：https://www.xxx.com?name=coder&age=20&callback=https%3A%2F%2Fxxx.com%3Fname%3Dtest&list[]=a&list[]=b&json=%7B%22str%22%3A%22abc%22,%22num%22%3A123%7D
 输出：
 {
  name: "coder",
  age: "20",
  callback: "https://xxx.com?name=test",
  list: ["a", "b"],
  json: {
      str: 'abc',
      num: 123
  }
 }

解答：

function queryString(urlStr) {
  
  let searchStr = urlStr.slice(urlStr.indexOf('?')+1);
  let queryArray = searchStr.split('&');
  let result = {};
  queryArray.forEach((vo) => {
      let [key, value] = vo.split('=');
      // 解码
      value = decodeURIComponent(value);
      // 数组
      if (key.indexOf('[]') > -1) {
          let subKey = key.replace('[]', '');
          let arr = result[subKey];
          if (!arr) {
              arr = result[subKey] = [];
          }
          arr.push(value)
      } else {
          try {
              result[key] = JSON.parse(value);
          } catch(e) {
              result[key] = value;
          }
      }
  });
  return result;
}

console.log(queryString('https://www.xxx.com?name=coder&age=20&callback=https%3A%2F%2Fxxx.com%3Fname%3Dtest&list[]=a&list[]=b&json=%7B%22str%22%3A%22abc%22,%22num%22%3A123%7D'))

2.监听浏览器窗口大小变化， 触发某回调函数，避免回调频繁触发

问题: 如何进行优化，使得当窗口大小停止变化 n 秒后触发回调以避免回调频繁触发

解答：

function fn(n) {

  let debound = (timeout, fn) => {
      let timer;
      return (...args) => {
          if (timer) {
              clearTimeout(timer);
          }
          timer = setTimeout(() => {
              fn(...args);
          }, timeout);
      }
  }

  let handleResize = () => {
      // 出发resize
  }
  handleResize = debound(n, handleResize);

  window.addEventListener('resize', handleResize);

}

写在最后： 如果有更好的解决方案， 欢迎评论；如果错误， 欢迎批评指正；后续总结的题会陆续补充