2023年最新前端面试题(JS相关1)

一、原生JS编写tab栏切换

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

  • 遍历a

  • 给点击的a添加事件

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

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

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

2023年最新前端面试题(JS相关1)_第1张图片

三、节流

  • 本质:连续触发事件,但是在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

你可能感兴趣的:(前端,es6,vue.js,css,scss)