前端面试题100道(第一部分)

最新推荐文章于 2024-06-17 02:46:14 发布

雨落山水

最新推荐文章于 2024-06-17 02:46:14 发布

阅读量941

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/ColdWindstar/article/details/109503017

版权

前端面试题100道

强烈推荐仔细阅读阮一峰的ES6网站阮一峰ES6

1.VUE状态管理器是什么？有什么作用？

状态管理器：Vuex
作用：vuex的作用就是作为一个数据仓库（store），把多个组件的背后的数据都放到store中，然后所有组件通过约定的方式去读取数据和修改数据。

2.Vue权限管理，如何实现？

登录时保存登录状态，一般保存在localstorage中，以做到首次登录后，下次登录不需要账号密码而直接登录，但后台系统不建议直接保存在localstorage中.

3.深复制(后期增加)

3.1深浅复制的区别

浅拷贝指向同一个地址，新旧对象还是共享同一快内存，而深拷贝是另外创造一个一模一样的对象跟地址，即指向一个新的地址，新对象跟原对象不共享内存，因为修改新对象也就不会影响到源对象。

4.VUE中如何使用递归(模板)实现多级菜单？

5.插槽的理解

自定义组件中，写的内容是否显示，在哪里显示，如何显示 – 内容分发机制
插槽的分类：具名插槽，默认插槽

6.对闭包的理解，作用域

1.闭包是什么？

闭包是有权限访问其他函数作用域的局部变量的一个函数

这是《 JavaScript高级程序设计》中给出的定义，如果你想用一句话就把面试官搞定几乎是不可能的。

因为这句话还存在下面几个深入的问题：

为什么其他非闭包的函数，没有权限访问另一个函数的内部作用域
为什么闭包有这个权限
什么是函数作用域
面试官更想知道的是你是否知道上面的内容

** 更周全的解释方法**
由于在JS中，变量的作用域属于函数作用域，在函数执行后作用域就会被清理、内存也随之被收回，但是由于闭包是建立在一个函数内部的子函数，由于其可访问上级作用域的原因，即使上级函数执行完，作用域也不会随之销毁，这时的子函数—也就是闭包，便拥有了访问上级作用域中的变量的权限，即使上级函数执行完后，作用域内的值也不会被销毁。

稍微有些啰嗦，但是一分钟以内应该足够了。这样一来，面试官基本上了解了你对于上面三个知识点的是掌握的。

2.闭包解决了什么？

请放心，就凭上面那段话，面试官是不会善罢甘休的。他一定会继续追问，一般来说会问—闭包解决了什么问题。

阮一峰在他的博客中写到：在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

务实一点的说法应该是下面这样：
由于闭包可以缓存上级作用域，那么就使得函数外部打破了“函数作用域”的束缚，可以访问函数内部的变量。以平时使用的 AJAX 成功回调为例，这里其实就是个闭包，由于上述的特性，回调就拥有了整个上级作用域的访问和操作能力，提高了极大的便利。开发者不用去学钩子函数来操作上级函数作用域内部的变量了

	闭包最大的用处有两个 ： 1）可以读取函数内部的变量；
								2）让这些变量的值始终保存在内存中。

3.闭包有哪些应用场景

闭包随处可见，一个 Ajax 请求的成功回调，一个事件绑定的回调方法，一个 setTimeout 的延时回调，或者一个函数内部返回另一个匿名函数，这些都是闭包。简而言之，无论使用何种方式对函数类型的值进行传递，当函数在别处被调用时，都有闭包的身影

4.使用闭包应该注意什么

代码难以维护：闭包内部是可以上级作用域，而如果闭包又是异步执行的话，一定要清楚上级作用域都发生了什么，而这样就需要对代码的运行逻辑和JS运行机制相当了解才能弄明白究竟发生了什么。

使用闭包的注意点:1)由于闭包会使得函数中的变量都保存在内存中，从而使得内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄漏。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2）内存泄漏：程序的运行需要内存。对于持续运行的服务进程，必须及时释放不再用到的内存，否则占用越来越高，轻则影响系统性能，重则导致进程崩溃。不再用到的内存，没有及时释放，就叫做内存泄漏。

总结：
原理比较深奥：想要完全掌握闭包，一定要弄清楚 函数作用域、内存回收机制、作用域继承 等，然而闭包时随处可见的，很可能开发者在不经意间就写出了一个闭包，理解不够深入的话，很可能造成运行结果与预期不符

7.ajax的兼容以及简书ajax的过程

ajax兼容写法

function createXHR(){
  if(typeof XMLHttpRequest != "undefined"){
    return new XMLHttpRequest();
  }else if(typeof ActiveXObject != "undefined"){
    var version = [
      "MSXML2.XMLHttp.6.0",
      "MSXML2.XMLHttp.2.0",
      "MSXML2.XMLHttp"
    ];
    for(var i = 0;i<3;i++){
      /*return new ActiveXObject(version[i]);*/
      //使用try{}catch{}防止在创建对象时出错
      try{
        return new ActiveXObject(version[i]);
      }catch(e){
        //TODO handle the exception
      }
    }
  }else{
    //如果都不支持，则抛出异常
    throw new Error("您老的浏览器实在是不行了")
    //alert("您老的浏览器实在是不行了");
  }
}

简述ajax的过程

1.创建XMLHttpRequest对象，也就是创建一个异步调用对象
2.创建一个新的HTTP请求，并指定该HTTP请求的方法、URL以及验证信息
3.设置HTTP请求状态变化的函数
4.发送HTTP请求
5.获取异步调用返回的数据
6.使用JavaScript和DOM实现刷新
$. a j a x /$ .get / $. p o s t /$ .getJson() / $. g e t S c r i p t () /$ ().load()
Fetch