前端面试 Interview 总结

前端面试 Interview 总结

JS 基础

1. [‘1’, ‘2’, ‘3’].map(parseInt) what & why

// 此题主要讲的是 js的映射与解析
console.log(['1', '2', '3', '4'].map(parseInt));
console.log(['10', '10', '10', '10'].map(parseInt));
// [ 1, NaN, NaN, NaN ]
// [ 10, NaN, 2, 3 ]

此题变形:

let unary = fn => val => fn(val)
// let unary1 = fn => {
//   console.log(fn);
//   return function (val, index) {
//     console.log(val, 'val', index);
//     return fn(val)
//   }
// } 
let parse = unary(parseInt)
console.log(['1.1', '2', '0.6'].map(parse));
// [ 1, 2, 0 ]

2. 什么是防抖和节流? 有什么区别? 如何实现?

   防抖: 动作绑定事件, 动作绑定发生后一定时间后触发事件, 在这段事件内,如果该动作又发生, 则重新等待一定时间再触发事件

   /**
    * 函数防抖 (只执行最后一次点击)
    * @param fn
    * @param delay
    * @returns {Function}
    * @constructor
    */
   export const Debounce = (fn, t) => {
     let delay = t || 500;
     let timer;
     console.log(fn)
     return function () {
       let args = arguments;
       if(timer){
         clearTimeout(timer);
       }
       timer = setTimeout(() => {
         timer = null;
         fn.apply(this, args);
       }, delay);
     }
   };
   

   节流: 动作绑定事件, 动作发生后一段时间后触发, 在这段时间内, 如果动作又发生, 则无视该动作, 知道事件执行完后, 才能重新触发.

   /**
    * 函数节流
    * @param fn
    * @param interval
    * @returns {Function}
    * @constructor
    */
   export const Throttle = (fn, t) => {
     let last;
     let timer;
     let interval = t || 500;
     return function () {
       let args = arguments;
       let now = +new Date();
       if (last && now - last < interval) {
         clearTimeout(timer);
         timer = setTimeout(() => {
           last = now;
           fn.apply(this, args);
         }, interval);
       } else {
         last = now;
         fn.apply(this, args);
       }
     }
   }
   

​