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

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

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道前端面试题，希望对大家有所帮助，谢谢~