前端常见面试题

最新推荐文章于 2024-07-05 21:33:55 发布

zgq_sir

最新推荐文章于 2024-07-05 21:33:55 发布

阅读量160

点赞数

分类专栏：知识总结文章标签： html5 html javascript 前端 vue.js

本文链接：https://blog.csdn.net/zgq_sir/article/details/105475771

版权

知识总结专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.使用闭包实现每隔一秒打印1，2，3，4

//使用闭包实现
for（var i = 0；i < 5;i++）{
  (function(i){
    setTimeout(function(){
      console.log(i);
    },i*1000);
  })(i);
}
//使用let块级作用域
for(let i = 0;i < 5;i++){
  setTimeout(function(){
    console.log(i);
  },i*1000)
}

2.如何判断一个对象是否为空对象？

function checkNullObject(obj){
  return Object.keys(obj).length === 0;
}

3.keep-alive组件有什么用
如果你需要在组件切换的时候，保存一些组件的状态防止多洗渲染，就可以使用keep-alive组件包裹需要保存的组件。

4.computed和watch区别？
computed 是计算属性，依赖其他属性计算值，并且computed的值有缓存，只有当计算值变化才会返回内容。
watch 监听到值得变化就会执行回调，在回调中可以进行一些逻辑操作。

5.vue中key值的作用？
vue中key值得作用可以分为两种情况来考虑。
第一种情况是v-if中使用key。由于Vue会尽可能高效地渲染元素，通常恢复用已有元素而不是从头开始渲染。因此当我们使用v-if来实现元素切换的时候，如果切换前后含有相同类型的元素，那么这个元素就会被复用。如果是相同的input元素，那么切换前后用户的输入不会被清除掉，这样是不符合需求的。因此我们可以通过使用key来唯一的标识一个元素，这种情况下，使用key的元素不会被复用。这个时候可以的作用是用来标识一个独立的员孙。

第二种情况是v-for中使用key。用v-for更新以渲染的元素列表是，它会默认使用“就地复用”的策略。如果数据项的顺序发生了改变，Vue不会移动DOM元素来匹配数据项的顺序，而是简单复用此处的每个元素。因此通过为每个列表项提供一个key值，来以便Vue跟踪元素的身份，从而高效的实现复用。这个时候key的作用是为了高效的更新渲染虚拟DOM。

6.mouseover和mouseenter的区别
当鼠标移动到元素上时就会触发mouseenter事件，类似mouseover，他们两者之间的差别是mouseenter不会冒泡。
由于mouseenter不支持事件冒泡，导致在一个元素的子元素上进入或离开的时候会触发其mouseover和mouseout事件，但是却不会触发mouseenter和mouseleave事件。

9.js动画与css动画区别及相应的实现
css3的动画的有点
在性能上会稍微好一些，浏览器会对css3的动画做一些优化
代码相对简单

缺点
在动画控制上不够灵活，兼容性不好
JavaScript的动画正好弥补了这两个缺点，控制能力很强，可以单帧等等控制、变换，同事写得好完全可以兼容IE6.并且功能强大，对于一些复杂控制的动画，使用JavaScript会比较靠谱。而在实现一些小的教诲的时候，就多考虑css吧。

10.为什么0.1+0.2！=0.3 如何解决这个问题？
当计算机计算0.1+0.2的时候，实际上计算的是这两个数字在计算机里所存储的二进制，0.1和0.2在转换为二进制表示的时候会出现位数无限循环的情况。js中是以64位双精度格式来存储数字的，只有53位的有效数字，超过这个长度的位数会被截取掉这样就造成了精度丢失的地方。在对两个以64位双精度格式的数据进行对阶的处理，对阶指的是将阶码对齐，也就是将小数点的位置对齐后，再进行计算，一般是小阶向大阶对齐，因此小阶的数在对齐的过程中，有效数字会向右移动，移动后超过有效位数的位会被截取掉，这是第二个可能会出现精度丢失的地方，进行相加运算后，得到的结果可能会超过53位有效数字，因此超过的位数也会被截取掉，这是可能发生精度丢失的第三个地方。

对于这样的情况，我们可以将其转换为整数后在进行运算，运算后再转换为对应的小数，以这种方式来解决这个问题。

我们还可以将两个数相加的结果和右边向减，如果相减的结果小于一个极小数，那么我们就可以认定结果是相等的，这个极小数可以使用es6的Number.EPSILON

11. 如何判断当前脚本运行在浏览器还是node环境中？
this === window ? ‘browers’:‘node’;
通过判断Global对象是否为window，如果不为window，当前脚本没有运行在浏览器中。
12.JavaScript中的作用域与变量声明提升？
变量提升的表现是，无论我们在函数中何处位置声明的变量，好像都被提升到了函数的首部，我们可以再变量声明前访问到而不会报错
造成变量声明提升的本质原因是js引擎在代码执行前有一个解析的过程，创建了执行上下文，初始化了一些代码执行时需要用到的对象。当我们访问一个变量时，我们会到当前执行上下文中的作用域链中去查找，而作用域链的首端指向的是当前执行上下文的变量对象，这个变量对象是执行上下文的一个属性，它包含了函数的形参、所有的函数和变量声明，这个对象的实在代码解析的时候创建的。这就是会出现变量声明提升的根本原因。

13.[, , ,]的长度？
尾后逗号(有时叫做“终止逗号”)在向JavaScript代码添加元素、参数、属性时十分有用。如果你想要添加新的属性，并且上一行已经使用了尾后逗号，你可以仅仅添加新的一行，而不需要修改上一行。这是的版本控制更加清晰，以及代码维护麻烦更少。
JavaScript一开始就支持数组字面值中的尾后逗号，随后向对象字面值(ECMAScript 5)中添加了尾后逗号。最近（ECMAScript 2017），又将其添加到函数参数中。但是json不支持尾后逗号
如果使用了多于一个尾后逗号，会产生间隙。带有间隙的数组叫做稀疏数组（密致数组没有问题）。稀疏数组的长度为逗号的数量。

14. 数组的fill方法？
fill（）方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止缩影。
fill方法接受三个参数value,start以及end，start和end参数是可选的，其默认值分别为0和this对象的length属性值。

15.Ajax解决浏览器缓存问题？
在 ajax 发送请求前加上 anyAjaxObj.setRequestHeader(“If-Modified-Since”,“0”)。
在 ajax 发送请求前加上 anyAjaxObj.setRequestHeader(“Cache-Control”,“no-cache”)。
在 URL 后面加上一个随机数：“fresh=” + Math.random();。
在 URL 后面加上时间戳：“nowtime=” + new Date().getTime();。
如果是使用 jQuery，直接这样就可以了& dollar;.ajaxSetup({cache:false})。这样页面的所有 ajax 都会执行这条语句就是不需要保存缓存记录。

16.事件委托是什么？
件委托本质上是利用了浏览器事件冒泡的机制。因为事件在冒泡过程中会上传到父节点，并且父节点可以通过事件对象获取到目标节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件，这种方式称为事件代理。
使用事件代理我们可以不必要为每一个子元素都绑定一个监听事件，这样减少了内存上的消耗。并且使用事件代理我们还可以实现事件的动态绑定，比如说新增了一个子节点，我们并不需要单独地为它添加一个监听事件，它所发生的事件会交给父元素中的监听函数来处理。

17.eval是做什么的？
它的功能是把对应的字符串解析成 JS 代码并运行。
应该避免使用 eval，不安全，非常耗性能（2次，一次解析成 js 语句，一次执行）。

18.javascript的作用域链？

作用域链的作用是保证对执行环境有权访问的所有变量和函数的有序访问，通过作用域链，我们可以访问到外层环境的变量和函数。

作用域链的本质上是一个指向变量对象的指针列表。变量对象是一个包含了执行环境中所有变量和函数的对象。作用域链的前端始终都是当前执行上下文的变量对象。全局执行上下文的变量对象（也就是全局对象）始终是作用域链的最后一个对象。

当我们查找一个变量时，如果当前执行环境中没有找到，我们可以沿着作用域链向后查找。

19. 如何将字符串转化为数字，例如 ‘12.3b’?
（1）使用 Number() 方法，前提是所包含的字符串不包含不合法字符。
（2）使用 parseInt() 方法，parseInt() 函数可解析一个字符串，并返回一个整数。还可以设置要解析的数字的基数。当基数的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。
（3）使用 parseFloat() 方法，该函数解析一个字符串参数并返回一个浮点数。
（4）使用 + 操作符的隐式转换。

20.什么是假值对象？
浏览器在某些特定情况下，在常规 JavaScript 语法基础上自己创建了一些外来值，这些就是“假值对象”。假值对象看起来和普通对象并无二致（都有属性，等等），但将它们强制类型转换为布尔值时结果为 false 最常见的例子是 document.all，它是一个类数组对象，包含了页面上的所有元素，由 DOM（而不是 JavaScript 引擎）提供给 JavaScript 程序使用。