2020年前端面试题及答案_结构化面试题库及答案

大家好，又见面了，我是你们的朋友全栈君。

1、javascript基本数据类型？ string、number、null、underfined、boolean object是所有对象的父对象。

2、浅谈javascript中变量和函数声明的提升？ 变量和函数声明的提升会被提升到最顶部去执行； 函数的提升高于变量的提升； 如果在函数内部用var声明了与外部相同的变量，则不向下寻找； 匿名函数不会被提升； 不同块中互不影响。

3、什么是闭包？闭包有什么特性？ 闭包就是能够读取其他函数内部变量的函数。 闭包的特性： 函数内部可以嵌套函数； 内部函数可以直接访问外部函数的参数和变量； 参数和变量不会被垃圾回收机制回收。

4、说说对比包的理解和闭包的作用？ 使用闭包就是为了设置私有变量和方法。 闭包的好处：能够实现封装和缓存； 闭包的坏处：就是内存消耗，使用不当可能会造成内存溢出的问题。

5、说说this对象的理解？ this总是指向直接调用者； 如果有new关键字，则指向new出来的那个对象； 在事件中，this指向触发这个事件的对象，特殊的是，在IE中的attachEvent中的this总是指向全局对象 window。

6、事件模型的理解？ 冒泡型事件：当使用冒泡型事件时，子级元素先触发，父级元素后触发。 捕获型事件：当使用捕获型事件时，父级元素先触发，子级元素后触发。

7、new操作符具体做了干了什么？ 创建一个空对象，并且this变量引用该对象，同时还继承了该函数的原型； 属性和方法被加入到this引用的对象中； 新创建的对象由this所引用，并且最后隐式地返回this。

8、说说堆和栈的区别？ 栈内存：存储的都是局部变量，后进先出，栈内存的更新速度很快，因为局部变量的声明周期都很短。 堆内存：存储的都是数组和对象，堆里面的实体不会被释放，但是会被当成垃圾，java有垃圾回收机制不定时地收取。

9、JS数组和对象的遍历方式，以及几种方式的比较。 for循环——循环每进行一次，就要检查一下数组的长度，速度比较慢； for in 循环——需要分析出array的每一个属性，这个操作性能开销很大。 forEach循环——不能遍历对象，不可以使用continue、break跳出循环，且使用return是跳出本次循环。

10、map与forEach的区别？ forEach是最基本的循环，默认有三个参数：array、item、index； map的用法和forEach基本一致，不同的是它会返回一个数组，所以callback需要有return值，如果没有，会返回underfined。

11、说说箭头函数与普通函数的区别？ 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象； 不可以当作构造函数，也就是说不能使用new关键在，否者会抛出一个错误； 不可以使用arguments对象，该对象在函数体内不存在。如果要使用，可以用Rest参数代替； 不可以使用yield命令，因此箭头函数不能当作Generator函数。

12、javascript定义类的四种方法? 工厂方法、构造函数方法、原型方法、组合使用构造函数和原型方法。

13、javascript实现继承的三种方法？ 借用构造函数法、对象冒充、组合继承。

14、对原生javascript的了解程度？ 数据类信、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、DOM、BOM、内存泄露、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMAScript。

15、JS动画与CSS动画区别及其相应实现？ CSS3 的动画优点： 在性能上稍微好一点，浏览器会对CSS3的动画进行一些优化； 代码相对简单。 缺点： 兼容性差； 在动画上控制不够灵活。 javascript的动画正好弥补了这两个缺点。在实现一些小的效果的时候，尽量使用css3。

16、谈一谈你对“函数式编程”的理解？ 简单来说，函数式编程是一种编程规范，也就是如何编写程序的方法论。

17、说说你对作用域链的理解？ 作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的。

18、javascript原型、原型链是什么？有什么特点？ 每个对象都在其内部初始化一个属性，就是prototype(属性)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性， 那么它就会去prototype里去找这个属性，这个prototype又有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链。 关系：instance.constructor.prototype = instance.proto。

19、说说什么是事件代理？ 事件代理又称之为事件委托。就是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。

20、说说ajax的原理？ Ajax的原理简单来说就是在用户和服务器之间加了一个中间层(Ajax引擎)，由XmlHttpRequest对象来向服务器发异步请求，从服务器获取数据，然后用javascript来操作DOM而更新页面。

21、说说如何解决跨域问题？ 通过jsonp跨域； 通过document.domain+iframe跨域； nginx跨域； nodejs中间件代理跨域； 后端在头部信息里面设置安全域名解决跨域。

22、异步加载JS的方式有哪些？ defer,只支持IE； async; 创建,插入到DOM中，加载完毕后callBack。

23、有哪些操作会导致内存泄漏？ setTimeout的第一个参数是字符串而非函数的话，会造成内存泄漏； 闭包使用不当。

24、介绍JS有哪些内置对象？ 数据封装类对象：Object、Array、Number、Boolean、String。 其他对象：Function、Arguments、Math、Date、RegExp、Error。

25、说几条写javascript的基本规范？ 不要在同一行声明多个变量； 使用===!==来判断true、false; 尽量使用字面量代替new Array这种形式; 不要使用全局函数； Switch语句必须带有default分支； if语句必须使用大括号； for-in循环中的变量应该使用var 关键字明确限定作用域，从而避免作用域污染。

26、eval是做什么的？ eval可以把字符串解析成JS代码并运行； 避免使用eval,不安全，非常消耗性能； 把JSON字符串传换成JSON对象时可以使用eval。

27、null和underfined的区别？ null表示定义了一个对象，值为“空值”； underfined表示这个不存在这个值。

28、说说同步和异步的区别？ 同步：在同一时间内不允许出现别的操作。 异步：在同一时间内允许不同的操作。

29、defer和async的区别？ defer：按顺序执行标签的顺序执行。

30、[1,2,3].map(parseInt)的输出结果是什么？ [1,NaN,NaN],因为parseInt需要两个参数(val,radix)。

31、use strict的理解和作用？ use strict是ES5新增的一种严格运行模式。可以使得JS代码在严格模式下运行，使得编码更加规范更加严谨，消除了一些怪异行为。

32、说说严格模式的限制？ 变量必须先声明后再使用； 函数的参数不能出现同名属性，否则报错； 不能使用with语句； 禁止this指向全局对象。

33、说说对JSON的理解？ JSON是一种轻量级的数据交换格式； 基于javascript的一个子库，数据格式简单，易于读写，占用带宽小； JSON字符串可以转换成JSON对象； JSON对象可以转换成JSON字符串。

34、说说JS延迟加载的方式有哪些？ defer和async，动态创建DOM(用得最多),异步加载JS。

35、说说attribute和property的区别？ attribute是DOM节点自带的属性； property是这个DOM元素作为对象，其附加的内容。

36、说说let的区别是什么？ 不支持变量名提升； 使用let声明变量会形成块级作用域； 不允许重复声明，也就是在函数内部不允许重复声明参数。

37、如何通过JS判断一个数组？ 使用instanceof方法； 使用constructor方法； 使用ES5新增的方法isArray()

38、说说let、var、const的理解？ let允许声明具有块级作用域的变量、语句或表达式，不支持变量名提升。 var用来声明全局变量，支持变量名提升。 const用来声明只读引用(即指针)，当被改变时就会报错。

39、正则表达式的使用？ 使用RegExp()函数的时候，不仅需要使用转义引号，而且还需要使用双反斜杠。使用正则表达式字面量的效率更高。

40、javascript中caller和callee的使用？ caller返回的一个对函数的引用，该函数调用了当前函数。 callee返回一个正在执行的function函数，也就是所指定的function对象的正文。

41、说说window.load()和(document).ready的区别？ window.load()必须等到页面上包括图片在内的所有元素加载完成才能执行； (document).ready()等到DOM结构绘制完成就可以执行，不必等到所有元素加载完成。

42、javascript数组去重的方法汇总？ 使用for嵌套for循环，利用splice去重； 使用ES6的set方法去重； 使用indexOf去重； 使用sort()去重； 利用对象的属性不能相同的特点进行去重； 利用includes去重。

43、浏览器缓存？ 分为强缓存和协商缓存。

44、防抖、节流的理解？ 防抖：当滚动事件中需要进行复杂计算或实现一个按钮的防二次点击操作，可以通过函数防抖来实现； 节流：节流与防抖的本质上不一样。防抖是把多次操作当作一次来执行，节流是间隔一段时间执行操作。

45、javaScript变量提升？ 在生成执行环境时，会有两个阶段。第一个阶段是创建阶段，JS解释器会找出需要提升的变量和函数，并且会给他们提前在内存中开辟好空间，函数的话会将整个函数存入内存中，变量只声明并且赋值为underfined，所以在第二个阶段，也就是代码执行阶段，我们可以直接提前使用。

46、实现Storage，使得该对象为单例，以及使用方式。 var instance = null; class Storage{ static getInstance(){ if(!instance){ instance = new Storage(); } return instance; } setItem = (key,value) => localStorage.setItem(key,value), getItem = key => localStorage.getItem(key); }

47、说说你对事件流的理解？ 事件流分为两种：捕获事件流和冒泡事件流。

48、说说从输入URL到看到页面发生的全过程？ （1）浏览器主进程接管，开了一个下载进程； （2）进行http请求； （3）将下载完成的内容交给Renderer进程管理； （4）Renderer进程开始解析css rule tree和dom tree，这两个过程是并行的； （5）当浏览器遇到link标签或者script、img标签，就会去下载这些内容，遇到需要缓存的时候就使用缓存，不适用缓存的重新下载资源； （6）css rule tree和dom tree 生成完了之后，开始合成render tree，这个时候浏览器会进行layout,开始计算每个节点的位置，然后进行绘制； （7）绘制结束后，关闭TCP连接，过程有四次握手。

49、做一个dialog组件，说说你的设计思路？它有什么功能？ 该组件需要提供hook指定渲染位置，默认渲染在body下面； 然后该组件可以指定外层样式，如宽度等； 组件外层需要一层mask来遮住底层内容，点击mask可以执行传过来的onCancel函数关闭dialog； 另外组件是可控的，需要外层传入visible表示是否可见； 然后dialog可以自定义头head和底部footer，默认有头部和底部，底部有一个确认和取消按钮，确认按钮会执行外部传进来的onOk事件，然后取消按钮会执行外部传进来的onCancel事件； 当组件的visble为true时候，设置body的overflow为hidden，隐藏body的滚动条，反之显示滚动条； 组件高度可能大于页面的高度，组件内部需要滚动条； 只有组件的visible有变化且为true时候，才重新渲染组件内的所有内容。

50、说说ajax、fetch、axiox之间的区别？ ajax基于原生XHR开发； fetch默认不会带cookie，需要添加配置项； axios支持promise。

51、说说内存泄漏？ dom清空时，还存在引用； ie中使用闭包； 定时器未清除； 子元素存在引起的内存泄漏。

52、javascript自定义事件？ document.createEvent(); event.initEvent(); element.dispatchEvent();

53、javascript数组排序的几种方式？ 冒泡排序； 快速排序；

54、javascript数组一行代码去重方法？ set方法去重。

55、javascript如何判断一个对象是否为数组？ Array.isArray();

56、script引入方式？ html静态引入； js动态插入；

异步加载； 异步加载。

57、变量对象？ 变量对象，是执行上下文的一部分，可以抽象为一种数据作用域，其实也可以理解为就是一个简单的对象，它存储着该执行上下文中的所有变量和函数声明（不包含函数表达式）。

58、babel编译原理？ badylon将ES6/ES7转换成 AST; babel-traverse对AST进行遍历转译，得到新的AST; 新AST通过babel-generator转换成ES5。

59、说说javascript的几条基本规范？ 不要在同一行声明多个变量； 使用===/!==来比较true/false或者数值； 使用对象字面量代替 new Array这种形式； 不要使用全局函数； Switch语句必须带有default分支； if语句必须使用大括号； for-in 循环中的变量应该使用 var关键字明确限定作用域，从而避免作用域污染。

60、javascript有几种类型的值？ 栈：原始数据类型（Number、String、Boolean、null、undefined）； 堆：引用类型数据（对象、数组和函数）。

61、javascript深浅拷贝？ 浅拷贝： Object.assign(); 或者是展开运算符。 深拷贝： 可以通过JSON.parse(JSON.stringfy(object))来解决。

好啦，以上就是今年总结的61道前端面试题，希望对大家有所帮助，谢谢~

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/175390.html原文链接：https://javaforall.cn