[toc]

必赛三六科技发展有限公司面试题（北京）

1.请实现一个模块math，支持链式调用math.add(2,4).minus(3).times(2);

  1. class Math {
  2.  constructor(value) {
  3.   let hasInitValue = true;
  4.   if (value === undefined) {
  5.    value = NaN;
  6.    hasInitValue = false;
  7.   }
  8.   Object.defineProperties(this, {
  9.    value: {
  10.     enumerable: true,
  11.     value: value,
  12.    },
  13.    hasInitValue: {
  14.     enumerable: false,
  15.     value: hasInitValue,
  16.    },
  17.   });
  18.  }
  20.  add(...args) {
  21.   const init = this.hasInitValue ? this.value : args.shift();
  22.   const value = args.reduce((pv, cv) => pv + cv, init);
  23.   return new Math(value);
  24.  }
  26.  minus(...args) {
  27.   const init = this.hasInitValue ? this.value : args.shift();
  28.   const value = args.reduce((pv, cv) => pv - cv, init);
  29.   return new Math(value);
  30.  }
  32.  times(...args) {
  33.   const init = this.hasInitValue ? this.value : args.shift();
  34.   const value = args.reduce((pv, cv) => pv * cv, init);
  35.   return new Math(value);
  36.  }
  38.  divide(...args) {
  39.   const init = this.hasInitValue ? this.value : args.shift();
  40.   const value = args.reduce((pv, cv) => pv / cv, init);
  41.   return new Math(value);
  42.  }
  44.  toJSON() {
  45.   return this.valueOf();
  46.  }
  48.  toString() {
  49.   return String(this.valueOf());
  50.  }
  52.  valueOf() {
  53.   return this.value;
  54.  }
  56.  [Symbol.toPrimitive](hint) {
  57.   const value = this.value;
  58.   if (hint === 'string') {
  59.    return String(value);
  60.   } else {
  61.    return value;
  62.   }
  63.  }
  64. }
  66. export default new Math();

2.请简述ES6代码转成ES5代码的实现思路。

  • 将代码字符串解析成抽象语法树，即所谓的 AST
  • 对 AST 进行处理，在这个阶段可以对 ES6 代码进行相应转换，即转成 ES5 代码
  • 根据处理后的 AST 再生成代码字符串

比如，可以使用 @babel/parser 的 parse 方法，将代码字符串解析成 AST；使用 @babel/core 的 transformFromAstSync 方法，对 AST 进行处理，将其转成 ES5 并生成相应的代码字符串；过程中，可能还需要使用 @babel/traverse 来获取依赖文件等。

3.请实现一个深拷贝。

  1. <!--普通的深层拷贝函数： -->
  2. function deepCopy( source ) {
  3.     if (!isObject(source)) return source; //如果不是对象的话直接返回
  4.     let target = Array.isArray( source ) ? [] : {} //数组兼容
  5.     for ( var k in source ) {
  6.         if (source.hasOwnProperty(k)) {
  7.             if ( typeof source[ k ] === 'object' ) {
  8.                 target[ k ] = deepCopy( source[ k ] )
  9.             } else {
  10.                 target[ k ] = source[ k ]
  11.             }
  12.         }
  13.     }
  14.     return target
  15. }
  17. function isObject(obj) {
  18.     return typeof obj === 'object' && obj !== null
  19. }
  21. // 缺点：（1）无法保持引用（2）当数据的层次很深，会栈溢出
  22. <!--防栈溢出函数-->
  23. function cloneLoop(x) {
  24.     const root = {};
  26.     // 栈
  27.     const loopList = [
  28.         {
  29.             parent: root,
  30.             key: undefined,
  31.             data: x,
  32.         }
  33.     ];
  35.     while(loopList.length) {
  36.         // 深度优先
  37.         const node = loopList.pop();
  38.         const parent = node.parent;
  39.         const key = node.key;
  40.         const data = node.data;
  42.         // 初始化赋值目标，key为undefined则拷贝到父元素，否则拷贝到子元素
  43.         let res = parent;
  44.         if (typeof key !== 'undefined') {
  45.             res = parent[key] = {};
  46.         }
  48.         for(let k in data) {
  49.             if (data.hasOwnProperty(k)) {
  50.                 if (typeof data[k] === 'object') {
  51.                     // 下一次循环
  52.                     loopList.push({
  53.                         parent: res,
  54.                         key: k,
  55.                         data: data[k],
  56.                     });
  57.                 } else {
  58.                     res[k] = data[k];
  59.                 }
  60.             }
  61.         }
  62.     }
  64.     return root;
  65. }
  67. <!--最简单的深拷贝方式-->
  68. function clone(obj) {
  69.     return JSON.parse(JSON.stringify(obj));
  70. }

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

  1. 防抖和节流都是指防止用户短时间内多次重复触发某一行为
  2. 区别在于：防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。
  3. 高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率。
  1. <!--防抖-->
  2. function debounce (func, wait = 50, immediate = true) {
  3.   let timer, context, args
  5.   // 延迟执行函数
  6.   const later = () => setTimeout(() => {
  7.     // 延迟函数执行完毕，清空缓存的定时器序号
  8.     timer = null
  9.     // 延迟执行的情况下，函数会在延迟函数中执行
  10.     // 使用到之前缓存的参数和上下文
  11.     if (!immediate) {
  12.       func.apply(context, args)
  13.       context = args = null
  14.     }
  15.   }, wait);
  17.   // 这里返回的函数是每次实际调用的函数
  18.   return function(...params) {
  19.     // 如果没有创建延迟执行函数（later），就创建一个
  20.     if (!timer) {
  21.       timer = later()
  22.       // 如果是立即执行，调用函数
  23.       // 否则缓存参数和调用上下文
  24.       if (immediate) {
  25.         func.apply(this, params)
  26.       } else {
  27.         context = this
  28.         args = params
  29.       }
  30.     // 如果已有延迟执行函数（later），调用的时候清除原来的并重新设定一个
  31.     // 这样做延迟函数会重新计时
  32.     } else {
  33.       clearTimeout(timer)
  34.       timer = later()
  35.     }
  36.   }
  37. }
  39. <!--节流-->
  40. function throttle(fn) {
  41.     let canRun = true; // 通过闭包保存一个标记
  42.     return function () {
  43.         if (!canRun) return; // 在函数开头判断标记是否为 true，不为 true 则 return
  44.         canRun = false; // 立即设置为 false
  45.         // 将外部传入的函数的执行放在 setTimeout 中
  46.         setTimeout(() => { 
  47.          fn.apply(this, arguments);
  48.          // 最后在 setTimeout 执行完毕后再把标记设置为 true(关键) 
  49.          //表示可以执行下一次循环了。当定时器没有执行的时候
  50.          //标记永远是 false，在开头被 return 掉
  51.          canRun = true;
  52.         }, 500);
  53.     };
  54. }

5.如何实现函数柯里化？

在计算机科学中，柯里化（英语：Currying），又译为卡瑞化或加里化，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。———— from 维基百科

  1. <!--方法一-->
  2. const curry = ( fn, arr = []) => {
  3.   return (...args) => { 
  5.     //判断参数总数是否和fn参数个数相等
  6.     if([...arr, ...args].length === fn.length){
  7.       return fn(...arr, ...args) //拓展参数，调用fn
  8.     }else{
  9.       return curry(fn,[...arr, ...args]) //迭代，传入现有的所有参数
  10.     }
  12.   }
  13. }
  14. <!--方法二-->
  15. const curry = ( fn, arr = []) => (...args) => ( a => a.length === fn.length? fn(...a) : curry(fn, a))([...arr, ...args])

6.[“1”,”2”,”3”,”4”,”5”,6,7,8,9,10,11,12,13,14,15].map(parselnt);

  1. [1, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, 9, 11, 13, 15, 17, 19]
  2. <!--parseInt(数字, 该数字为几进制的数)-->