前端面试题20220829最全最新

北京好治疗湿疹医院 http://baidianfeng.39.net/a_zhiliao/210620/9083902.html

因为不好排版,建议直接看pdf版本,回复“前端面试”

打开浏览器,

chenjunan.top/detail/Detail?id=7

1、js数据类型

基本数据类型

Number、String、Boolean、Null、Undefined、Symbol、bigInt

引用数据类型

object、Array、Date、Function、RegExp

2、js变量和函数声明的提升

在js中变量和函数的声明会提升到最顶部执行

函数的提升高于变量的提升

函数内部如果用var声明了相同名称的外部变量,函数将不再向上寻找。

匿名函数不会提升。

3、闭包

闭包就是能够读取其他函数内部变量的函数

闭包基本上就是一个函数内部返回一个函数

好处

可以读取函数内部的变量

将变量始终保持在内存中

可以封装对象的私有属性和私有方法

坏处

比较耗费内存、使用不当会造成内存溢出的问题

4、==和===的区别

==是非严格意义上的相等

值相等就相等

===是严格意义上的相等,会比较两边的数据类型和值大小

值和引用地址都相等才相等

5、this

this总是指向函数的直接调用者

如果有new关键字,this指向new出来的对象

在事件中,this指向触发这个事件的对象

6、js数组和对象的遍历方式

forin

for

forEach

for-of

7、map与forEach的区别

forEach方法,是最基本的方法,就是遍历与循环,默认有3个传参:分别是遍历的数组内

容item、数组索引index、和当前遍历数组Array

map方法,基本用法与forEach一致,但是不同的,它会返回一个新的数组,所以callback

需要有return值,如果没有,会返回undefined

8、箭头函数与普通函数的区别

函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象

不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误

不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替

不可以使用yield命令,因此箭头函数不能用作Generator函数

9、同源策略

同源指的是域名、协议、端口号相同

10、如何解决跨域

jsonp跨域

document.domain+iframe跨域

nodejs中间件代理跨域

后端在头部信息里面设置安全域名

11、严格模式的限制

变量必须声明后再使用

函数的参数不能有同名属性,否则报错

不能使用with语句

禁止this指向全局对象

12、es6新增

新增模板字符串

箭头函数

for-of(用来遍历数据—例如数组中的值。)

ES6将Promise对象纳入规范,提供了原生的Promise对象。

增加了let和const命令,用来声明变量。

还有就是引入module模块的概念

13、attribute和property的区别是什么

attribute是dom元素在文档中作为html标签拥有的属性

property就是dom元素在js中作为对象拥有的属性。

对于html的标准属性来说,attribute和property是同步的,是会自动更新的

但是对于自定义的属性来说,他们是不同步的

14、let和const的区别是什么

let命令不存在变量提升,如果在let前使用,会导致报错

如果块区中存在let和const命令,就会形成封闭作用域

不允许重复声明

const定义的是常量,不能修改,但是如果定义的是对象,可以修改对象内部的数据

15、内存泄漏

定义:程序中己动态分配的堆内存由于某种原因程序未释放或无法释放引发的各种问题。

js中可能出现的内存泄漏情况:结果:变慢,崩溃,延迟大等

js中可能出现的内存泄漏原因

全局变量

dom清空时,还存在引用

定时器未清除

子元素存在引起的内存泄露

16、script引入方式

html静态script引入

js动态插入script

scriptdefer:异步加载,元素解析完成后执行

scriptasync:异步加载,但执行时会阻塞元素渲染

17、数组(array)方法

map:遍历数组,返回回调返回值组成的新数组

forEach:无法break,可以用try/catch中thrownewError来停止

filter:过滤

some:有一项返回true,则整体为true

every:有一项返回false,则整体为false

join:通过指定连接符生成字符串

push/pop:末尾推入和弹出,改变原数组,返回推入/弹出项

unshift/shift:头部推入和弹出,改变原数组,返回操作项

sort(fn)/reverse:排序与反转,改变原数组

concat:连接数组,不影响原数组,浅拷贝

slice(start,end):返回截断后的新数组,不改变原数组

splice(start,number,value…):返回删除元素组成的数组,value为插入项,改变原数组

indexOf/lastIndexOf(value,fromIndex):查找数组项,返回对应的下标

reduce/reduceRight(fn(prev,cur),defaultPrev):两两执行,

prev为上次化简函数的return值,cur为当前值(从第二项开始)

18、JavaScript深浅拷贝

浅拷贝

Object.assign

深拷贝

可以通过JSON.parse(JSON.stringify(object))来解决

19、说说异步编程的实现方式

回调函数

优点:简单、容易理解

缺点:不利于维护、代码耦合高

事件监听

优点:容易理解,可以绑定多个事件,每个事件可以指定多个回调函数

缺点:事件驱动型,流程不够清晰

发布/订阅(观察者模式)

类似于事件监听,但是可以通过‘消息中心’,了解现在有多少发布者,多少订阅者

Promise对象

优点:可以利用then方法,进行链式写法;可以书写错误时的回调函数

缺点:编写和理解,相对比较难

Generator函数

优点:函数体内外的数据交换、错误处理机制

缺点:流程管理不方便

async函数

优点:内置执行器、更好的语义、更广的适用性、返回的是Promise、结构清晰

缺点:错误处理机制

20、说说面向对象编程思想

基本思想是使用对象,类,继承,封装等基本概念来进行程序设计

优点

易维护

易扩展

开发工作的重用性、继承性高,降低重复工作量。

缩短了开发周期

21、项目性能优化

减少HTTP请求数

减少DNS查询

使用CDN

避免重定向

图片懒加载

减少DOM元素数量

减少DOM操作

使用外部JavaScript和CSS

压缩JavaScript、CSS、字体、图片等

优化CSSSprite

使用iconfont

多域名分发划分内容到不同域名

尽量减少iframe使用

避免图片src为空

把样式表放在link中

把JavaScript放在页面底部

22、什么是单线程,和异步的关系?

单线程:只有一个线程,只能做一件事

原因:避免DOM渲染的冲突

浏览器需要渲染DOM

JS可以修改DOM结构

JS执行的时候,浏览器DOM渲染会暂停

两段JS也不能同时执行(都修改DOM就冲突了)

webworker支持多线程,但是不能访问DOM

解决方案:异步

23、说说负载均衡?

单台服务器共同协作,不让其中某一台或几台超额工作,发挥服务器的最大作用




转载请注明:http://www.aierlanlan.com/cyrz/2890.html