JavaScript面试常考的20道题

最新推荐文章于 2024-07-18 09:08:21 发布

二缕浮云

最新推荐文章于 2024-07-18 09:08:21 发布

阅读量309

点赞数

分类专栏：前端面试文章标签： javascript 面试前端

本文链接：https://blog.csdn.net/weixin_44187983/article/details/126082305

版权

本文详细解答了JavaScript面试中常见的20道题目，涵盖了防抖节流、数据类型、模块化、闭包、箭头函数、异步编程、面向对象、性能优化、垃圾回收机制等核心知识点，帮助读者准备JavaScript面试。

摘要由CSDN通过智能技术生成

javascript面试常考的20道题

1：防抖节流

防抖和节流都是为了限制函数的执行次数，避免短时间不必要的多次函数执行
区别：
防抖：连续多次触发事件，只执行最后一次
节流：n秒内多次触发事件，只执行一次
使用场景：
防抖：
1）search搜索联想时，用户在不断输入值时，搜索框下面会自动补全搜索关键字（用防抖来实现当用户暂停连续输入时才处理用户输入的数据）
2）输入手机号，邮箱验证时输入字符的检测（用防抖来实现当用户暂停连续输入时才处理用户输入的数据）
节流：
1）触底加载更多/滚动加载更多事件（用节流来规避前端事件的不断触发引起的性能问题）
2）防止重复点击事件（用节流来避免表单重复提交/按钮重复点击）
实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    防抖： <input id="input" type="text">
</body>
<script>
	 input.addEventListener('input',function(e){
		val(e.target.value)
	 })
	 function fn(time,fu){
		let flag
		return function(value){
			clearTimeout(flag)
			flag=setTimeout(()=>{
				fu(value)
			},time)
		}
	 }
	 let val=fn(1000,function(val){
		console.log(val)
	 })
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <button id="button">手在快1秒执行一次</button>
</body>
<script>
	  function throttle(fun, time) {
        let flag = 0
        return function () {
            let now = +new Date().valueOf()
            // 当前的值 减去上一次的值 >= 传过来的事件 执行
            if (now - flag >= time) {
                fun.apply(this, arguments)
                flag = now
            }
        }
    }



    button.onclick = throttle((e) => {
        console.log(e)
    }, 10000)
</script>
</html>

2：type of和instance of相关及其拓展

typeof 会返回一个变量的基本类型， instanceof 返回的是一个布尔值
instanceof 可以准确地判断复杂引用数据类型，但是不能正确判断基础数据类型
而 typeof 也存在弊端，它虽然可以判断基础数据类型（ null 除外），但是引用数据类型中，除了 function 类型以外，其他的也无法判断
可以看到，上述两种方法都有弊端，并不能满足所有场景的需求
如果需要通用检测数据类型，可以采用Object.prototype.toString，调用该方法，统一返回格式“[object Xxx]”的字符串
手写全局数据类型判断：

function getType(obj){
  let type  = typeof obj;
  if (type !== "object") {    // 先进行typeof判断，如果是基础数据类型，直接返回
    return type;
  }
  // 对于typeof返回结果是object的，再进行如下的判断，正则返回结果
  return Object.prototype.toString.call(obj).replace(/^[object (\S+)]$/, '$1'); 
}