龙空技术网

2022 Web 前端面试题及答案 之 javaScript 篇

前端代码女神 768

前言:

现在大家对“js前端面试题”大概比较讲究,姐妹们都需要知道一些“js前端面试题”的相关文章。那么小编同时在网络上搜集了一些关于“js前端面试题””的相关知识,希望咱们能喜欢,我们快快来学习一下吧!

再见 2021 ,你好 2022!前端妹子祝大家元旦快乐!

2022 第一天,给大家分享一篇面试相关文章,希望大家在 2022 年,摸鱼时间越来越多,薪资越涨越快!

1、事件循环机制

阿里面试题1:

<script type="text/javascript"> var p =new Promise(resolve=>{  console.log(4)  resolve(5) }) function f1(){  console.log(1) } function f2(){  setTimeout(()=>{   console.log(2)  },0)  f1()  console.log(3)  p.then(res=>{   console.log(res)  }) } f2()</script>// 运行结果 4 1 3 5 2// 如果已经了解事件运行机制,就可以跳过该问题了

事件循环机制,event-loop 。包含三部分:调用栈、消息队列、微任务队列。

事件循环开始的时候,会从全局一行一行的执行代码,遇到函数调用的时候,就会压入调用栈中,当函数执行完成之后,弹出调用栈。

// 如:代码会一行一行执行,函数全部调用完成之后清空调用栈function f1(){ console.log(1)}function f2(){ f1() console.log(2)}f2()// 执行结果 1 2

如果遇到 fetch、setInterval、setTimeout 异步操作时,函数调用压入调用栈时,异步执行内容会被加入消息队列中,消息队列中的内容会等到调用栈清空之后才会执行。

// 如:function f1(){ console.log(1)}function f2(){ setTimeout(()=>{  console.log(2) },0) f1() console.log(3)}f2()// 执行结果 :1 3 2

遇到 promise、async、await 异步操作时,执行内容会被加入微任务队列中,会在调用栈清空之后立即执行。

调用栈加入的微任务队列会立即执行。

如let p =new Promise(resolve=>{ console.log('立即执行') resolve(1) //在 then 调用中执行})

微任务队列中内容优先执行,所以比消息队列中的内容执行得早。

了解这些知识后,再试一下最前面的那道面试题,应该就没什么问题了。

2、你对作用域的认识有多少?

阿里面试题2:

<script type="text/javascript"> function fn(a,c){  console.log(a)  var a = 12  console.log(a)  console.log(c)  function a(){ }  if(false){   var d = 34  }  console.log(d)  console.log(b)  var b = function(){}  console.log(b)  function c(){}  console.log(c) } fn(1,2)</script>// 运行结果:/*function a(){}12function c(){}undefinedundefinedfunction (){}function c(){}*/

作用域通俗地讲,就是指一个变量的作用范围。下面分别介绍下全局作用域和函数作用域的概念。

全局作用域

页面打开时被创建,页面关闭时被销毁。编写在 script 标签下的变量和函数,作用域为全局,页面的任意位置都可以访问有全局对象 window ,代表浏览器窗口,全局作用下的变量和函数作为 window 的属性和方法

函数作用域(局部)

函数是被调用时创建的,执行完毕之后销毁。函数每调用一次,变量和函数就会重新创建一次,它们之间是相互独立的在函数作用域内可以访问到全局变量或函数,但是在函数外无法访问函数作用域内的变量函数作用域内访问变量,会在自身作用域内寻找,若没有则会向上一级作用域内查找,一直到全局作用域。

讲这些概念看完,发现还不会做上边的面试题,接下来就学习学习作用域的预编译,看看函数执行的时候都干了些啥?

函数在被调用的时候会先进行预编译:

全局作用域预编译:

创建上下文 GO 对象。找变量声明,将变量名作为 GO 对象的属性名,值为 undefined找函数式声明,将值赋予函数体

函数作用域预编译:

创建上下文 AO 对象将形参和实参作为 AO 对象的属性,赋值为 undefined实参和形参相统一在函数体内找函数声明,将值赋予函数体。

了解预编译过程之后,我们将上面的面试题进行解析,分析下运行结果是怎么来的?

fn 函数调用的时候,先进行预编译,

第一阶段:生成一个 AO 对象

第二阶段:找到形参和实参,作为 AO 对象的属性名,值为 udefined 。

AO{a : undefined,b : undefined,c : undefined,d : undefined}

第三阶段:实参和形参相统一,之后,AO对象改变为:

AO{a : 1,b : undefined,c : 2,d : undefined}

第四阶段:找到函数声明,将值赋给变量,AO改变为:

AO{a : function a(){ } ,b : undefined,c : function c(){ },d : undefined}

这下结合函数的预编译过程以及函数作用域概念,再尝试一下面试题,简单了吗?

3、为什么会有闭包?它解决了什么问题?

实例3:

var liArr = document.getElementsByTagName('li')for(var i=0;i<liArr.length;i++){ liArr[i].onclick = function(){  console.log(liArr[i]) }}

这是一个非常常见的实际应用,我们是想要点击元素然后操作对应的元素,但是点击之后发现打印出来的是 undefined 。我们应该能想到 i 变成了 liArr.length ,所以找不到对应元素,这个问题该如何解决呢?

说闭包时,必须介绍作用域。

上面介绍全局作用域和函数作用域,js内部变量的访问是由内向外的,内部可以访问到外部的变量,但是外部无法访问函数内的变量,如果我们在外部访问函数内的变量就需要使用闭包。

闭包就是函数嵌套函数,通过函数内的函数访问变量的规则,实现外部访问函数内的变量。

闭包的特点:

函数嵌套函数。函数内部可以引用函数外部的参数和变量。参数和变量不会被垃圾回收机制回收。

那么上述实例该如何使用闭包解决该问题呢?

实例3:闭包解决问题

var liArr = document.getElementsByTagName('li')for(var i=0;i<liArr.length;i++){ (function(i){  liArr[i].onclick = function(){   console.log('点击元素',liArr[i])  } })(i) }

闭包优点:

保护变量安全,实现封装,防止变量声明冲突和全局污染。在内存当中维持一个变量,可以做缓存。匿名函数自执行函数可以减少内存消耗。

防抖和节流就是闭包的经典应用。

4、防抖和节流,你了解多少?

在实际应用中,常见的就是窗口的 resize、输入框搜索内容、scroll 等操作,如果这些操作触发频率太高,就会加重浏览器的负担,同时用户体验也较差。该如何优化该操作呢?

防抖函数是什么呢?

当持续触发事件,一定时间内没有再触发事件,事件处理函数才会执行一次,如果在设定的时间到来之前又触发了事件,就会重新计时。

实例4:我们想要制作一个输入框搜索,计划输入完成后两秒再执行,打印出输入的值。

function debounce(val){ var timer clearTimeout(timer) timer = setTimeout(function(){  console.log(val) },2000)}var input = document.getElementById('input')input.addEventListener('keyup',function(e){ debounce(e.target.value)})

实际运行结果:我们发现输入之后,延时两秒之后打印出结果。

并非我们想要的结果,这是什么原因呢?

因为函数每次重新调用的时候 timer 会重新创建,调用完成之后就会被销毁,所以每次重新调用函数的时候,clearTimeout 内的 timer 都是 undefined 。所以我们需要把 timer 始终保持在内存当中,所以就需要使用闭包。

使用闭包修改上述实例4:

function debounce(delay){ var timer return function(val){  clearTimeout(timer)  timer = setTimeout(function(){   console.log(val)  },delay) }}var debounceFun = debounce(2000)var input = document.getElementById('input')input.addEventListener('keyup',function(e){ debounceFun(e.target.value)})

防抖函数常见的实际应用:使用 echart 的时候,浏览器 resize 时,需要重新绘制图表大小,还有典型的输入框搜索应用。

节流函数是什么?

当持续触发事件的时候,保证一段时间内只调用一次事件处理函数,一段时间内,只允许做一件事情。

实例5:滚动条实现一段时间内执行一次处理,执行回调。

var throttle = function(func, delay) {             var timer = null;             return function() {                  var context = this;                 var args = arguments;                  if (!timer) {                       timer = setTimeout(function() {                            func.apply(context, args);                             timer = null;                        }, delay);                   }             }        }        function handle() {             console.log('执行回调');        }        window.addEventListener('scroll', throttle(handle, 1000)); 

防抖和节流主要是用来限制触发频率较高的事件,再不影响效果的前提条件下,降低事件触发频率,减小浏览器或服务器的压力,提升用户体验效果。

5、数组去重有几种方法?

这是一个非常常见的面试题,你知道几种方式呢?

var arr = [1,2,3,4,5,1,2,3,4]function unique(arr){  //添加去重的方法的内容}unique(arr)

方法1: Set 方法

return Array.from(new Set(arr))// 或return [...new Set(arr)]

new Set 返回的数据不是数组,所以使用 Aray.from 方法将类数组转为真正的数组,或把 ...new Set(arr) 放入数组中。

方法2:使用两次循环

for(var i=0,len=arr.length;i<len;i++){ for(var j=i+1,len=arr.length;j<len;j++){  if( arr[i]===arr[j] ){   arr.splice(i,1)   j--;   len--  } }}return arr

方法3:indexOf 实现

arr.indexOf(item) 返回 item 元素在 arr 数组中第一次出现所在位置的下标。

let arr1 = []for(var i=0;i<arr.length;i++){ if( arr1.indexOf(arr[i]) === -1 ){  arr1.push(arr[i]) }}return arr1

方法4:includes 实现

let arr1 = []for(var i=0;i<arr.length;i++){ if( !arr1.includes(arr[i]) ){  arr1.push(arr[i]) }}return arr1

方法5:filter 实现

array.indexOf(item,start) start 表示开始检索的位置。

return arr.filter(( item, index )=>{ return arr.indexOf( item, 0 ) == index})

标签: #js前端面试题 #javaweb面试题及答案