前端面试题-手写

1.统计字符串中字符出现的次数

统计字符串中字符出现的次数

/**
 * @description 统计字符串中字符出现的次数
 * @param str
 * @returns {{}}
 */
function computeString(str) {
  const obj = {};
  for (let i = 0; i < str.length; i++) {
    const key = str[i];
    if (obj[key]) {
      obj[key]++;
    } else {
      obj[key] = 1;
    }
  }
  return obj;
}
computeString('12121111');

2. 函数防抖

函数防抖

/**
 * @description 函数防抖
 * @param func
 * @param wait
 * @returns {(function(...[*]): void)|*}
 */
function debounce(func, wait = 50) {
  // 缓存一个定时器id
  let timer = 0;
  // 这里返回的函数是每次用户实际调用的防抖函数
  // 如果已经设定过定时器了就清空上一次的定时器
  // 开始一个新的定时器，延迟执行用户传入的方法
  return function (...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}
const task = () => {
  console.log('run task');
};
const debounceTask = debounce(task, 1000);
window.addEventListener('scroll', debounceTask);

3. 函数节流

::: details 函数节流 @code :::

4. 手写数组去重

手写数组去重

/**
 * @description 手写数组去重
 * @param arr
 * @returns {*[]}
 */
function uniqueArray(arr) {
  const newArr = [];
  for (let i = 0; i < arr.length; i++) {
    if (newArr.indexOf(arr[i]) === -1) {
      newArr.push(arr[i]);
    }
  }
  return newArr;
}
uniqueArray([1, 2, 1, 2, 3, 1, 2]);

5. url 参数转换为 object

url 参数转换为 object

/**
 * @description url参数转换为object
 * @param str
 * @returns {{}}
 */
function urlToObj(str) {
  const obj = {};
  const strQuery = str.split('?');
  const strArray = strQuery[1] ? strQuery[1].split('&') : [];
  for (let i = 0; i < strArray.length; i++) {
    const info = strArray[i].split('=');
    obj[info[0]] = info[1];
  }
  return obj;
}

const url = 'http://www.baidu.com?a=1&b=2&c=3';
urlToObj(url);
urlToObj('http://www.baidu.com');