前端奇怪面试题总结

面试题总结

1. 不修改下面的代码进行正常解构

这道题考的是迭代器和生成器的概念

let [a,b] = {a:1,b:2}

答案
对象缺少迭代器，需要手动加上

Object.prototype[Symbol.iterator] = function* (){
 // return Object.values(this)[Symbol.iterator]()
 return yeild* Object.values(this)
}
ler [a,b] = {a:1,b:2}

2. 这行代码打印出什么？console.log(console.log.apply.call.call.call.apply((a) => a , [3,15]))

答案
console.log是个function所以可以调用apply.call

15

3. 游离节点造成的内存泄漏问题总结

浏览器对最后一个获取焦点的input框是不会执行内存回收的！这个是个浏览器bug。如果我们最后一个表单节点是个富文本怎么办？
解决办法：就是动态创建一个获取焦点的input框

4. 惰性函数

惰性函数说简单点就是对一开始只需要判断一次的方法并且里面有很复杂的逻辑进行确认话处理，减少浏览器的执行的时间

  let flag = false
  function getTableList(){
    if(flag){
      getTableList = () => {
        return `我变成了第一个函数${flag}`
      }
      // 第一次调用
      console.log(getTableList())
    }else{
      getTableList = () => {
        return `我变成了第二个函数${flag}`
      }
         // 第一次调用
      console.log(getTableList())
    }
  }
  console.log( getTableList())

也可以用高阶函数返回一个函数,效果是一样的

  let flag = false
  function getTableList(){
    if(flag){
     return () => {
        return `我变成了第一个函数${flag}`
      }
     
    }else{
      return  () => {
        return `我变成了第二个函数${flag}`
      }
    }
  }
  let getTable = getTableList()
  console.log( getTable())

5. 写一个防抖函数并大致说出它的原理

防抖函数原理就是利用setTimeOut 实现一个函数多次调用的时候只执行最后一次函数，前面的函数利用clearTimeout(timer)取消执行

  function debounce(fn,duration = 300){
    // 判断传入的是一个函数表达式
    if(typeof fn != 'function'){
      throw new TypeError ('请传入函数')
    }
    //利用闭包的原理实现定时器的清空
    let timer = null
    return function(...args){
      clearTimeout(timer)
     timer = setTimeout(() => {
      fn.apply(this,args)
     },duration)
    }

  }

6. 输出下面表达式的值

这道题主要考的是类型转换

([][[]]+[])[+!![]]+([]+{})[+!![]+!!{}]

答案:
([][[]]+[]) => ‘undefined’ [+!![]] => 1 结合起来就是 n
([] ={}) => ‘[object Object]’ [+!![] + !!{}] => 2 结合起来就是b

7. 不适用for循环之类的方法将一个数组求和

这道题主要考的是递归的用法

let arr = [1,2,3,4,5,6,7,8,9,10,11]
  function sum(arr){
    let i = 0;
    let sum = 0;
    function _fun(){
     if(i >= arr.length){
      return
     }
     sum += arr[i]
     i++
     _fun()
    }
    _fun()
    return sum
  }
  console.log(sum(arr))
// 第二种写法
let sum = 0;
function getSum (arr,index = 0){
  if(index >= arr.length){
    return
  }
  sum += arr[index]
  index ++
  getSum(arr,index)
  return sum
}

8. 写出一下表达式的值

"use strict";
letAPI;
(function (API) {
    API[API["user"] = 0] = "user";
    API[API["getAge"] = 1] = "getAge";
})(API || (API = {}));
console.log(API)  // {0: 'user', 1: 'getAge', user: 0, getAge: 1}

答案：
牢记一点 ‘=’ 右边只是给左边赋值！！！
先执行[] 里面的赋值 API[‘user’] = 0 执行完之后对象变成了 {user:0}; 在执行外面的API[API[‘user’]] 相当与 API[0] = ‘user’,所以会变成{0:‘user’,user:0}

9. vue中的hooks是什么

通俗的说就是把一类通用的方法或者组件配置、功能封装在一个模块中，方便重复使用，减少主页面的代码冗余。就是之前utils工具函数的细化版
以下是demo

import { ElMessage, ElMessageBox } from 'element-plus';
import { i18n } from '../i18n';

const { t } = i18n.global;

interface MessageImplements {
	info(title: string): void;
	wraning(title: string): void;
	success(title: string): void;
	error(title: string): void;
}

export function useMessage() {
	class MessageClass implements MessageImplements {
		// 普通提示
		info(title: string): void {
			ElMessage.info(title);
		}

		// 警告提示
		wraning(title: string): void {
			ElMessage.warning(title);
		}

		// 成功提示
		success(title: string): void {
			ElMessage.success(title);
		}

		// 错误提示
		error(title: string): void {
			ElMessage.error(title);
		}
	}

	return new MessageClass();
}
//用法
import { useMessage, useMessageBox } from '/@/hooks/message';
// 其中t() 是国际化配置函数
useMessage().success(t('common.delSuccessText'));