前端开发面试题
-
2023年3月3日发(作者：初中化学论文)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循环——循环每进⾏⼀次，就要检查⼀下数组的长度，速度⽐较慢；
forin循环——需要分析出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，于是就这样⼀直找下去，也就是我们平时所说的原型
链。
关系：ype=。
19、说说什么是事件代理？
事件代理⼜称之为事件委托。就是把原本需要绑定的事件委托给⽗元素，让⽗元素担当事件监听的职务。
20、说说ajax的原理？
Ajax的原理简单来说就是在⽤户和服务器之间加了⼀个中间层(Ajax引擎)，由XmlHttpRequest对象来向服务器发异步请求，从服务器获取
数据，然后⽤javascript来操作DOM⽽更新页⾯。
21、说说如何解决跨域问题？
通过jsonp跨域；
通过+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;
尽量使⽤字⾯量代替newArray这种形式;
不要使⽤全局函数；
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、usestrict的理解和作⽤？
usestrict是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、说说()和$(document).ready的区别？
()必须等到页⾯上包括图⽚在内的所有元素加载完成才能执⾏；
$(document).ready()等到DOM结构绘制完成就可以执⾏，不必等到所有元素加载完成。
42、javascript数组去重的⽅法汇总？
使⽤for嵌套for循环，利⽤splice去重；
使⽤ES6的set⽅法去重；
使⽤indexOf去重；
使⽤sort()去重；
利⽤对象的属性不能相同的特点进⾏去重；
利⽤includes去重。
43、浏览器缓存？
分为强缓存和协商缓存。
44、防抖、节流的理解？
防抖：当滚动事件中需要进⾏复杂计算或实现⼀个按钮的防⼆次点击操作，可以通过函数防抖来实现；
节流：节流与防抖的本质上不⼀样。防抖是把多次操作当作⼀次来执⾏，节流是间隔⼀段时间执⾏操作。
45、javaScript变量提升？
在⽣成执⾏环境时，会有两个阶段。第⼀个阶段是创建阶段，JS解释器会找出需要提升的变量和函数，并且会给他们提前在内存中开辟好空
间，函数的话会将整个函数存⼊内存中，变量只声明并且赋值为underfined，所以在第⼆个阶段，也就是代码执⾏阶段，我们可以直接提
前使⽤。
46、实现Storage，使得该对象为单例，以及使⽤⽅式。
varinstance=null;
classStorage{
staticgetInstance(){
if(!instance){
instance=newStorage();
}
returninstance;
}
setItem=(key,value)=>m(key,value),
getItem=key=>m(key);
}
47、说说你对事件流的理解？
事件流分为两种：捕获事件流和冒泡事件流。
48、说说从输⼊URL到看到页⾯发⽣的全过程？
（1）浏览器主进程接管，开了⼀个下载进程；
（2）进⾏http请求；
（3）将下载完成的内容交给Renderer进程管理；
（4）Renderer进程开始解析cssruletree和domtree，这两个过程是并⾏的；
（5）当浏览器遇到link标签或者script、img标签，就会去下载这些内容，遇到需要缓存的时候就使⽤缓存，不适⽤缓存的重新下载资源；
（6）cssruletree和domtree⽣成完了之后，开始合成rendertree，这个时候浏览器会进⾏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⾃定义事件？
Event();
ent();
chEvent();
53、javascript数组排序的⼏种⽅式？
冒泡排序；
快速排序；
54、javascript数组⼀⾏代码去重⽅法？
set⽅法去重。
55、javascript如何判断⼀个对象是否为数组？
y();
56、script引⼊⽅式？
html静态引⼊；
js动态插⼊；
异步加载；异步加载。
57、变量对象？
变量对象，是执⾏上下⽂的⼀部分，可以抽象为⼀种数据作⽤域，其实也可以理解为就是⼀个简单的对象，它存储着该执⾏上下⽂中的所有
变量和函数声明（不包含函数表达式）。
58、babel编译原理？
badylon将ES6/ES7转换成AST;
babel-traverse对AST进⾏遍历转译，得到新的AST;
新AST通过babel-generator转换成ES5。
59、说说javascript的⼏条基本规范？
不要在同⼀⾏声明多个变量；
使⽤===/!==来⽐较true/false或者数值；
使⽤对象字⾯量代替newArray这种形式；
不要使⽤全局函数；
Switch语句必须带有default分⽀；
if语句必须使⽤⼤括号；
for-in循环中的变量应该使⽤var关键字明确限定作⽤域，从⽽避免作⽤域污染。
60、javascript有⼏种类型的值？
栈：原始数据类型（Number、String、Boolean、null、undefined）；
堆：引⽤类型数据（对象、数组和函数）。
61、javascript深浅拷贝？
浅拷贝：
();
或者是展开运算符。
深拷贝：
可以通过(fy(object))来解决。
好啦，以上就是今年总结的61道前端⾯试题，希望对⼤家有所帮助，谢谢~