2022年前端面试题加答案

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