2023年最新前端面试题（JS相关1）

一、原生JS编写tab栏切换

• 获取导航栏里面所有的元素a

• 遍历元素a

• 给点击的a添加事件

• 通过排他思想给点击的a添加类名，其他的移除类名

• 下面对应的列表也是通过排他思想添加类名，其他的移除类名

二、利用递归函数实现 setTimeout 模拟 setInterval效果

三、节流

• 本质：连续触发事件，但是在n秒钟只执行一次

方法一：  
const box = document.querySelector('.box')
let i = 0
let flag = true
box.addEventListener('mousemove', function() {
    if (flag) {
          flag = false
          i++
          box.innerHTML = i
          setTimeout(function() {
              flag = true
          }, 500)
     }
})
方法二：
const box = document.querySelector('.box')
let i = 0
function mouseMove() {
    box.innerHTML = i++
}
box.addEventListener('mousemove', _.trottle(mouseMove, 500))

四、防抖

• 本质：触发事件后n秒内只执行一次，如果在n秒内再次触发事件，则会重新计算函数执行时间

方法一：  
const box = document.querySelector('.box')
let i = 0
let timeId
box.addEventListener('mousemove', function() {
   clearTimeout(timeId)
   timeId = setTimeout(function() {
               i++
               box.innerHTML = i
            }, 500)
})
方法二：
const box = document.querySelector('.box')
let i = 0
function mouseMove() {
    box.innerHTML = i++
}
box.addEventListener('mousemove', _.debounce(mouseMove, 500))

五、JS同步异步，执行机制，事件循环（event loop）

同步任务：在主线程上执行，形成一个执行栈

异步任务：通过回调函数实现

普通事件：click，resize等

资源加载：load，erroe等

定时器：setTimeout，setInterval等

执行机制：先执行执行栈中的同步任务，异步任务放入任务队列中，执行栈中的同步任务执行完毕，系统会依次读取任务队列中的异步任务

事件循环：主线程不断的重复获取任务，执行任务，再获取任务，再执行，，这种机制被称为事件循环

六、==和 ===的区别

==：数值相等，类型不同

===：数值和类型都相等

特殊情况：
console.log(NaN === NaN)   //false,NaN不等于任何人，包括它自己
console.log([] == [])      //false
console.log([] === [])     //false

七、垃圾回收机制

• 本质：函数内（块作用域内）声明的变量，在使用后会被浏览器销毁，释放内存空间

• 方法：a、引入计数法（旧） b、标记清除法（新）

八、闭包

• 本质：嵌套的函数，内层作用域访问外层作用域的变量

• 优点：封闭数据，实现数据的私有，避免全局污染

• 缺点：容易产生内存泄漏，因为垃圾回收机制不再销毁使用后的面量

九、原型链

• 本质：对象查找属性和方法的规则

• 首先对象在自身查找，如果没有就去对象的原型查找，原型也没有，就去原型的原型查找，如果一直没有，查到null，然后报错

十、递归函数

• 本质：函数内部自己调用自己

• 容易产生的错误及解决办法：容易产生“栈溢出”，所以必须加退出条件return