前端面试题（基础部分：html+css+js）

原生js部分
1、什么是进程什么是线程 ⭐
一个程序的执行从开始到结束就是一个进程，一个进程中有多条线程，线程分为单线程和多线程， 线程是进程中断断续续的开始和结束的过程

2、什么是防抖节流
防抖-防抖后置 ：触发高频事件后n秒内函数只会执行一次，如果n秒内事件再次被触发，则重新计时。
节流: 高频事件触发，但在n秒内只会执行一次，节流会稀释函数的执行频率,每次触发事件时都判断当前是否有等待执行的延时函数
防抖是防止用户在短时间内多次点击请求服务器，减轻服务器压力
节流是属于限制用户在规定时间只能触发一次。优化性能

3、UTP和TCP ⭐
UTP----用户数据报协议，是一个简单的面向数据报的运输层协议。特点：
1)面向无连接(UTP在传输数据报前不用在客户端和服务端之间建议连接);
2)每个数据包大小限制在64k内(UTP发送数据是将数据分解成多个包进行发送);
3)UTP不提供可靠性(因为是面向无连接);
4)传输速度快(因为不需要建立连接);

TCP----传输控制协议，提供是面向连接，可靠的字节流服务。特点：
1)TCP提供可靠性，提供数据超时重发，筛选丢弃重复数据，检验数据，流量控制等功能。
2)当客户端与服务端进行交互数据前，必须先在彼此之间建立 一个TCP连接，之后再传输数据。

4.什么是事件流 ⭐

事件捕获 目标事件 事件冒泡

5.宿主对象 ⭐
本地对象为 array obj regexp 等可以 new 实例化
内置对象为 Math 日期对象 数组字符串方法 等不可以实例化的
宿主为浏览器自带的 document,window 等

6.es6新增语法. ⭐
let const 模块字符串`` 解构 展开运算符 箭头函数 函数的参数默认值 for of (in) class类
improt export default async/await Symbol Set map

7.简述 this 的 四种指向 问题 ⭐的形式4种
a.如果是一般函数,this指向全局对象window;
b.在严格模式下"use strict",为undefined.
c.对象的方法里调用,this指向调用该方法的对象.
(call,apply,bind会改变this的指向)
.call(), call(thisScope, arg1, arg2, arg3…)
.apply(), apply(thisScope, [arg1, arg2, arg3…]);两个参数
Bind(this) 返回的是一个函数
d.构造函数里的this,指向创建出来的实例.

8.宏任务,微任务 ⭐
宏任务：
(macro)task，可以理解是每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）。
script、setTimeOut、setInterval、setImmediate
微任务：
当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务,可以理解为回调事件。（promise.then，proness.nextTick等等）。promise.then,process.nextTick、Object.observe、MutationObserver宏任务中的事件放在 宏任务队列中，由事件触发线程维护；微任务的事件放在微任务队列中，由 js 引擎线程维护。
异步任务 分为宏任务和微任务，先执行微任务再执行宏任务

9.什么是敏捷开发，什么是主动开发？ ⭐
敏捷开发（Agile）以人为核心、迭代、循序渐进的开发方法。
敏捷开发中，软件项目的构建被切分成多个子项目，各个子项目的成果都经过测试，具备集成和可运行的特征。
敏捷开发并不追求前期完美的设计、完美编码，而是力求在很短周期内开发出产品的核心功能，尽早发布出可用的版本。然后在后续的生产周期内，按照新需求不断迭代升级，完善产品。

10.高度塌陷的问题：⭐
高度塌陷的问题：就是所有的子元素都浮动了，父元素没有高度的情况下，会出现高度为0。
解决方案：
1.给父元素添加height 只使用与高度固定的布局,不适合于高度自适应的布局
2.给父元素添加 overflow:hidden/auto/scroll;可以动态获取子元素撑开的高。遇到定位就不好用了。
3.给浮动元素的下方添加一个空的块元素，并且给这个空的块元素添加clear:both; 会造成代码的冗余。
4.万能清除法。给高度塌陷的父元素添加公共的类名即可。（用的最多，兼容性最好）

.clear:after{
	content:"";
	display:block;
	clear:both;
	height:0;
	overflow:hidden;
	visibility:hidden;
	}
	.clear{
	zoom:1;

5.给父元素添加float 不推荐使用（会产生新的float问题）
6.给父元素添加display:table; 不推荐使用，会产生未知bug

11.什么是优雅降级，什么是渐进增强？⭐
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的
功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进
行兼容。

12.http跟https 有什么不同？ ⭐
1.http的连接很简单，是无状态的；
http是超文本传输协议，信息是明文传输
http端口是80
2.https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
https则是具有安全性的ssl加密传输协议。
https端口是443。

13.什么是埋点？ ⭐
(1)数据监控(2)性能监控(3)异常监控
目前常见的前端埋点方法分为三种:
(1) 代码埋点(2)可视化埋点(3)无埋点

14.你知道哪些网站攻击？
1.xss跨站脚本攻击原理？如何进行？防御手段？
如何进行：如何XSS是指恶意攻击者利用网站没有对用户提交数据进行转义处理或者过滤不足的缺点，进而添加一些代码，嵌入到web页面中去。使别的用户访问都会执行相应的嵌入代码。从而盗取用户资料、利用用户身份进行某种动作或者对访问者进行病毒侵害的一种攻击方式。
主要原理：过于信任客户端提交的数据！
防御手段：不信任任何客户端提交的数据，只要是客户端提交的数据就应该先进行相应的过滤处理然后方可进行下一步的操作。

2.CSRF跨站请求伪造原理？如何进行？防御手段？
如何进行：当你在某网页登录之后，在没有关闭网页的情况下，收到别人的链接。例如:http://127.0.0.1/dvwa/vulnerabilities/csrf/?password_new=1&password_conf=1&Change=Change#
点击链接，会利用浏览器的cookie把密码改掉。
主要原理：在没有关闭相关网页的情况下，点击其他人发来的CSRF链接，利用客户端的cookie直接向服务器发送请求。
防御手段：
检测Referer
Anti-CSRF token机制
业务上要求用户输入原始密码（简单粗暴），攻击者在不知道原始密码的情况下，无论如何都无法进行CSRF攻击。

3.Sql脚本注入原理？如何进行？防御手段？
如何进行：利用现有应用程序，将（恶意）的SQL命令注入到后台数据库引擎执行的能力，它可以通过在Web表单中输入（恶意）SQL语句得到一个存在安全漏洞的网站上的数据库，而不是按照设计者意图去执行SQL语句。
主要原理：通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令
防御手段：
使用预编译，绑定变量（推荐）。
检查数据类型。
过滤特殊字符和语句。
页面不错误回显。

4web上传漏洞原理？如何进行？防御手段？
如何进行：用户上传了一个可执行的脚本文件，并通过此脚本文件获得了执行服务器端命令的能力。
主要原理：当文件上传时没有对文件的格式和上传用户做验证，导致任意用户可以上传任意文件，那么这就是一个上传漏洞。
防御手段：

1. 最有效的，将文件上传目录直接设置为不可执行，对于Linux而言，撤销其目录的’x’权限；实际中很多大型网站的上传应用都会放置在独立的存储上作为静态文件处理，一是方便使用缓存加速降低能耗，二是杜绝了脚本执行的可能性；
2. 文件类型检查：强烈推荐白名单方式，结合MIME Type、后缀检查等方式；此外对于图片的处理可以使用压缩函数或resize函数，处理图片的同时破坏其包含的HTML代码；
3. 使用随机数改写文件名和文件路径，使得用户不能轻易访问自己上传的文件；
4. 单独设置文件服务器的域名；

15.Ajax请求状态码 ⭐
0：请求未初始化（还没有调用 open()）。
1：请求已经建立，但是还没有发送（还没有调用 send()）。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4：响应已完成；您可以获取并使用服务器的响应了。

16.http状态码 (常见)
301：被请求的资源已永久移动到新位置
302：请求的资源临时从不同的 URI响应请求
400: 客户端请求的语法错误，服务器无法理解
503：由于临时的服务器维护或者过载，服务器当前无法处理请求。

17.什么是跨域
协议名、域名、端口，三项相同，称为同源。
三项中只要有一项不同，则被称为跨源(域)。
如何解决跨域
前端：jsonp，反向代理；后端：cors
jsonp-原理:引入资源不受同源,策略的限制.动态创建script标签，src指向跨域文件,该跨域文件的响应内容，就会变成script标签的内容
反向代理-原理:当前端请求数据的时候，把前端地址代理变成后端地址
cors-原理:允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制

18.浏览器预检(OPTIONS)请求
在跨域的情况下，非简单请求会先发起一次空body的OPTIONS请求，称为"预检"请求，用于向服务器请求权限信息，等预检请求被成功响应后，才发起真正的http请求。

19.get和post请求的区别
1.get请求的数据会附加在url之后，以’?‘分割url和传输数据，多个参数用’&'连接。
而post请求会把请求的数据放置在http请求包的包体中，因此get请求的数据会暴露在地址栏中，而post请求则不会。
2.post请求的安全性比get请求的高（比如，在进行登录操作，通过get请求，用户名和密码都会暴露再url上）。
3.get请求在url中传送的参数是有长度限制的，对于post，各个服务器会规定对post提交数据大小进行限制，但它不是url传值，所以它还是比get传输的数据多。
4.get请求只能进行url编码，而post支持多种编码方式。

20.单点登录
单点登录（Single Sign On），简称为 SSO，是比较流行的企业业务整合的解决方案之一。SSO的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。

21.变量提升
当 JavaScript 编译所有代码时，所有使用 var 的声明的变量，不管实际的声明是在哪里进行的，都会被提升到它们的函数/局部作用域的顶部(如果在函数内部声明的话)，或者提升到它们的全局作用域的顶部(如果在函数外部声明的话)。

22.性能优化
1.优化图片资源的格式和大小
2.开启网络压缩
3.使用浏览器缓存
4.减少重定向请求
5.使用CDN存储静态资源
6.减少DNS(域名解析)查询次数
7.压缩css和js内容
8.图片懒加载
9.事件委托(大量减少内存占用，减少事件注册)
10:防抖、节流

23.适配
媒体查询自适应，手机端淘宝适配
https://blog.csdn.net/weixin_42125732/article/details/117319361

24.深拷贝浅拷贝
拷贝，就是赋值。把一个变量赋给另外一个变量，就是把变量的内容进行拷贝。把一个对象的值赋给另外一个对象，就是把一个对象拷贝一份。
浅拷贝:就是将一个对象或数组(引用类型)的地址拷贝给另一个对象或数组，并没有把数据拷贝给另一个对象或数组。
深拷贝:指针赋值，并且内容拷贝，开辟新的内存空间。
数组浅拷贝: 直接赋值
数组深拷贝: 1.如果数组只有一层,可以用slice()，concat()实现深拷贝,如果有多层,那么此方法就成为了浅拷贝
2.JSON.parse() JSON.stringify()不仅适用于数组还适用于对象的深拷贝。不能拷贝函数，undefined，symbol。
3.用扩展运算符实现深拷贝

25.什么是深复制什么是浅复制
浅复制只复制对象第一层，深复制遍历复制数组每一层

26.深浅监听
深度监听：监听对象数组所有层级的改变（类似于购物车）
浅度监听：监听对象数组第一层的变化

27.prototype和_proto_的区别
任何对象实例都有一个原型，也叫原型对象，这个原型对象由对象的内置属 性_proto_指向它的构造函数的 prototype 指向的对象，即任何对象都是由一个 构造函数创建的，但是不是每一个对象都有 prototype，只有方法才有 prototype。

28.原型链
原型链的核心就是依赖对象的_proto_的指向，当自身不存在的属性时，就 一层层的扒出创建对象的构造函数，直至到 Object 时，就没有_proto_指向了。 因为_proto_实质找的是 prototype，所以我们只要找这个链条上的构造函数的 prototype。其中 Object.prototype 是没有_proto_属性的，它==null。

29.继承
1.构造函数继承：使用call或apply方法，将父对象的构造函数绑定在子对象上.
缺点：只继承了父类的构造器，原型对象上（prototype）的属性和方法没有继承.
2.原型继承：只会继承父类原型对象上的属性和方法，不能继承实例的属性和方法
3.组合继承：即原型继承+call()或者apply()继承。
4.es6的 class extends

30.重载和重绘
重载就是通过参数类型不同或参数个数不同,可以让方法实现的功能不同，需要注意的是JS中其实没有真正意义上的重载，但是可以用typeof或argument来进行模拟，从而体现出JS面向对象思想中的重载特性。
回流：当 render tree 中的一部分 或者 全部因为元素的规模尺寸，布局，隐藏等 改变而需要重新构建，这就叫回流，每个页面至少需要一次回流，就是在页面第 一次加载的时候，这时候一定会发生回流，因为要构建 render tree 在回流的时候，浏览器会使渲染树中收到影响的部分失效，并重新构造这部分渲 染树，完成回流后，浏览器会重新绘制受影响的部分,到屏幕中，这就是重绘 当 render tree 中的一些元素需要更新属性，而这些属性只是影响元素的外观， 不会影响布局，就叫重绘

31.jsonp的原理
Jsonp 其实就是一个跨域解决方案。
Js 跨域请求数据是不可以的,但是js跨域请求js脚本是可以的.
所以可以把要请求的数据封装成一个 js 语句,做一个方法的调用.
跨域请求 js 脚本可以得到此脚本.得到 js 脚本之后会立即执行.
可以把数据做为参数传递到方法中.就可以获得数据。从而解决跨域问题.
jsonp 原理：(动态创建script标签,回调函数)
浏览器在 js 请求中，是允许通过 script 标签的 src 跨域请求，可以在请求的结
果中添加回调方法名，在请求页面中定义方法，就可获取到跨域请求的数据.

32:promise用法
一、什么是Promise?我们用Promise来解决什么问题？
Promise 是一种解决异步编程的方案，相比回调函数和事件更合理和更强大.
从语法上讲,promise 是一个对象，从它可以获取异步操作的消息；
二、promise 有三种状态：pending 初始状态也叫等待状态，fulfilled 成功状态，
rejected 失败状态；状态一旦改变,就不会再变.创造 promise 实例后,它会立即执行
三、Promise的两个特点
1、Promise对象的状态不受外界影响
2、Promise的状态一旦改变,就不会再变,任何时候都可以得到这个结果,状态不可以逆

33:promise.all和promise.race的区别
一、Promise.all可以将多个Promise实例包装成一个新的Promise实例.
用于将多个Promise实例,包装成一个新的Promise实例。
1.它接受一个数组作为参数.
2.数组可以是Promise对象,也可以是其它值,只有Promise会等待状态改变.
3.当所有的子Promise都完成,该Promise完成,返回值是全部值的数组.
4.如果有任何一个失败,该Promise失败,返回值是第一个失败的子Promise的结果.
二、Pomise.race的使用
类似于Promise.all(),区别在于它有任意一个返回成功后,就算完成,但是进程不会立即停止.
常见使用场景:把异步操作和定时器放到一起,如果定时器先触发,认为超时,告知用户.

34:promise底层原理
promise可以有三种状态,分别是pedding,Fulfilled,Rejected,
Pending Promise对象实例创建时候的初始状态
Fulfilled 可以理解为成功的状态
Rejected可以理解为失败的状态
1.构造一个Promise实例需要给Promise构造函数传入一个函数.传入的函数需要有两个形参,
两个形参都是function类型的参数.分别是resolve和reject.
2.Promise上还有then方法，then 方法就是用来指定Promise对象的状态改变时确定执行的操作,resolve 时执行第一个函数（onFulfilled），reject时执行第二个函数（onRejected）
3.当状态变为resolve时便不能再变为reject,反之同理.

35.cookie和session
Cookie 一般由服务器生成，可设置失效时间。如果在浏览器端生成 Cookie，默认是关闭浏览器后 失效，4K 左右
session 存储在服务器，不依赖浏览器环境 高效 安全

36.sessionStorage和localStorage
sessionStorage和local storage用法相同,区别是sessionstorage在页面关闭时会被清除.
localStorage 除非被清除，否则永久保存，一般为 5MB
一般是将一个对象存入localstorage中，但是localstorage会自动将对象数据转换成字符串形式，这时候我们可以使用JSON.stringify()这个方法，来将数据转换成JSON字符串存入localstorage存入，当读取的时候再使用JSON.parse（）方法读取出来。

37.http1.0和http2.0
http1：线程阻塞，在同一时间，同一域名的请求有一定数量限制，超过限制数目的请求会被阻塞
http2：采用二进制格式而非文本格式；完全多路复用，而非有序并阻塞的、只需一个连接即可实现并行

38.new的时候干了什么
（1）创建一个新对象；
（2）将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）；
（3）执行构造函数中的代码（为这个新对象添加属性）

39.什么是可变对象什么是不可不变对象
可变对象：引用数据类型（对象数组），只执行浅拷贝
不可变对象：基本数据类型（字符串 number 布尔值）

40.什么是变异数组方法，什么是非变异数组方法
变异数组方法，例如 push、pop 等，会改变原数组，从而更新视图；//push()pop()shift()unshift()splice()sort()reverse()join()
非变异数组方法，例如 filter，map 等，不会改变原数组，会返回一个新的数组

41.数组去重的方法
利用ES6 Set去重（ES6中最常用）
利用for嵌套for，然后splice去重（ES5中最常用）
利用indexOf去重
利用includes
利用filter

42.数组排序的方法
1.冒泡排序法：将数组中的相邻两个元素进行比较，将比较大（较小）的数通过两两比较移动到数组末尾（开始），执行一遍内层循环，确定一个最大（最小）的数，外层循环从数组末尾（开始）遍历到开始（末尾）.
2.选择排序法：将要排序的数组分成两部分，一部分是从大到小已经排好序的，一部分是无序的，从无序的部分取出最小的放到已经排序的最后面。
3.插入排序法：将要排序的数组分成两部分，每次从后面的部分取出索引最小的元素插入到前一部分的适当位置
4.快速排序法：快速排序法号称是目前最优秀的算法之一，实现思路是，将一个数组的排序问题看成是两个小数组的排序问题，而每个小的数组又可以继续看成更小的两个数组，一直递归下去，直到数组长度大小最大为2。

43.var let const的区别
var 声明的变量会挂载在 window 上，而 let 和 const 声明的变量不会
var 声明的变量存在变量提升，let 和 const 不存在变量提升
同一作用域下 var 可以被重复声明，let或const声明的变量不能被重复声明
let 和 const 声明会形成块级作用域,let和const声明变量存在暂存死区
Const 一旦声明必须赋值，不能用 null 占位，声明后不能再修改，如果声明的是复合类型数据，可以修改属性

44.作用域有哪几种，分别有什么作用（js作用域）
作用域：变量可以生效的范围
全局作用域：一个 html 页面就是一个全局作用域，打开页面的时候, 作用域就生成了, 直到关闭页面为止=> 自当前 script 标签开始的任何位置
局部作用域：每一个函数就是一个私有作用域。也叫函数作用域
块级作用域：块作用域由 { } 包括，if 语句和 for 语句里面的{ }也属于块作用域。
作用域链：多个作用域形成的链式结构

45.call,apply,bind
call、apply和bind都是用于改变方法中this指向的。
call调用 将方法中的this指向call中第一个参数，当第一个参数为null、undefined时，默认指向window; call中第一个参数之后是要传递给方法的参数列表。
apply与call相似，不同之处在于传递给方法的参数形式不一致。apply传递给方法的参数是数组的形式。
call和apply在改变方法的this指向时，会同时执行方法；而bind不会执行方法，而是返回改变this指向后的新方法。

46.http三次握手理解
1.客户端向服务器发送建立连接请求,并进入等待确认状态,等待服务器确认；
2.服务端收到消息返回前端，
3.客服端收到消息向服务端发送确认包

47.null和undefined
相同点：用 if 判断时，两者都会被转换成 false
不同点：number 转换的值不同 number（null）为 0 number（undefined）为 NaN
Null 表示一个值被定义了，但是这个值是空值
Undefined 变量声明但未赋值

48.Http 缓存主要分为两种：强缓存和协商缓存。
强缓存：所请求的数据在缓存数据库中尚未过期时，不与服务器进行交互，直接使用缓存数据库中的数据。
协商缓存：从缓存数据库中取出缓存的标识，然后向浏览器发送请求验证请求的数据是否已经更新，如果已更新则返回新的数据，若未更新则使用缓存数据库中的缓存数据

49.原型和原型链的区别
什么是原型？
任何对象实例都有一个原型，也叫原型对象，这个原型对象由对象的内置属性_proto_指向它的构造函数的 prototype 指向的对象，即任何对象都是由一个构造函数创建的，但是不是每一个对象都有 prototype，只有方法才有prototype。
什么是原型链？
原型链基本思想是利用原型让一个引用类型继承,另一个引用类型的属性和方法。每个构造函数都有一个原型对象，每个原型对象都有一个指向构造函数的指针，而实例又包涵一个指向原型对象的内部指针。原型链的核心就是依赖对象的_proto_的指向，当自身不存在的属性时，就一层层的扒出创建对象的构造函数，直至到 Object 时，就没有_proto_指向了。
因为_proto_实质找的是 prototype，所以我们只要找这个链条上的构造函数的prototype。其中 Object.prototype 是没有_proto_属性的，它==null。

50.多少种定位的方式
static: 正常⽂档流定位，此时 top, right, bottom, left 和 z-index 属性⽆效，块级元素从上往下纵向排布，⾏级元素从左向右排列。
relative：相对定位，此时的『相对』是相对于正常⽂档流的位置。
absolute：相对于最近的⾮ static 定位祖先元素的偏移，来确定元素位置，⽐如⼀个绝对定位元素它的⽗级、和祖⽗级元素都为relative，它会相对他的⽗级⽽产⽣偏移。
fixed：指定元素相对于屏幕视⼝（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变，⽐如那种回到顶部的按钮⼀般都是⽤此定位⽅式。
sticky：粘性定位，特性近似于relative和fixed的合体，其在实际应⽤中的近似效果就是IOS通讯录滚动的时候的『顶屁股』。

51.div盒子水平垂直居中
1.position：absolute +left：50%+margin-left：-50%+top：50%+margin-top：-50%
2.position：absolute+margin：auto
3.display：flex
4.posision：absolute+left：50%+top：50%+transform：translate（-50%，-50%）

52.es6中的map和set
1.map意为 字典
和对象类似，弥补了对象的不足，提高频繁操作的性能
对象不能以变量作为下标，map可以
2.set意为 集合
set不能有重复元素，通过new set（）对数组进行去重

53.promise,定时器，ascny await解决异步的区别
1.SetTImeout
注意setTimeout是异步执行函数 , 当js主线程运行到此函数时,不会等待settimeout中的回调函数 ,
会直接进行settimeout下面的语句(尽管setTimeout的延迟时间为0时) 当执行完当前事件循环的时候,
settimeout中的回调会在下次(或者某一个)事件循环中被执行
2.Promise
Promise 本身是同步的立即执行函数,当在执行体中执行resolve()或者reject的时候,此时是异步操作
会先执行then/catch(异步执行)等,等主栈完成后,才会去执行resolve()/reject中的方法
3.async/await
async函数返回一个promise对象,当函数执行的时候,一旦遇到await就会先返回,等到触发的异步操作完成(await的函数),
在执行函数体后面的语句,可以理解为,async让出了线程,跳出了async函数体,因此await函数后的语句相当于在then回调中执行,await的含义为等待，也就是 async 函数需要等待await后的函数执行完成并且有了返回结果（Promise对象）之后，才能继续执行下面的代码。await通过返回一个Promise对象来实现同步的效果。

54.遍历数组中for和foreach谁的效率更高
当遍历数组结构的集合时用for或者foreach都行
1、在固定长度或者长度不需要计算的时候for循环效率高于foreach；
2、在不确定长度或者计算长度有损性能的时候用foreach比较方便
当遍历链表结构的集合时一定不要用for循环。

55.map检测空数值会发生什么
map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值
map()方法按照原数组顺序以此处理元素
注意：map()不会对空数组进行检测 ；不会改变原始的数组

56.什么是BFC
BFC 直译为：块格式化上下文。,它是一个独立的渲染区域，BFC 的内部元素与外部元素相隔离，使内外元素定位不会相互影响。
BFC触发条件有哪些呢?
1.根元素Html
2.float属性不为none // float: left/right;
3.position为absolute或fixed // absolute/fixed;都是脱离文档流的定位
4.display为inline-block，table-cell，table-caption，flex，inline-flex
5.overflow不为visible // overflow: hidden/auto/scroll;
BFC的特性能解决什么问题
1.解决 margin 上下重叠问题;
2.可以做两栏布局;
3.解决高度塌陷问题。

57.箭头函数与普通函数的区别
箭头函数是匿名函数，不能作为构造函数，不能使用 new
箭头函数不能绑定 arguments，要用 rest 参数解决
箭头函数没有原型属性
箭头函数的 this 指向：永远指向其上下文的 this，
箭头函数不能绑定 this，会捕获其所在的上下文的 this 值，作为自己的 this值

58.什么是虚拟滚动
就是一般常见的触底加载，滚动到页面底部加载更多数据，但是当数据量上来之后，达到千万数量级别，浏览器没法承载这么多的节点渲染，肯定会卡顿甚至崩溃，这个时候就可以使用虚拟列表，通过计算滚动视窗，每次只渲染可见屏幕部分节点，超出屏幕的不可见范围用内填充 padding 代替，对于浏览器来说无论你滚动到什么位置，渲染的都是屏幕范围内的节点，这样就不会有性能负担了

59.超大数组遍历读取第一条和最后一条相差多久时间
没有,因为数组是一块线性连续的内存,我们可以通过寻址公式一步取出对应的成员,这跟成员的位置没有关系.

60.判断是否为数组方法
instanceof 操作符判断
对象构造函数的 constructor判断
Array 原型链上的 isPrototypeOf
Object.getPrototypeOf
Object.prototype.toString
Array.isArray

61.说一下你前端常用的加密方法有哪些
JavaScript 加密后传输,
base64 ,
哈希,
非对称加密,
md5
sha1

62.在css中你知道有哪些伪类选择器
略

63.说一下你对token的理解
客户端使用用户名跟密码请求登录
服务端收到请求，验证用户名与密码
验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端
客户端收到 Token 以后可以把它存储起来，比如放在localStorage中
客户端每次向服务端请求资源的时候需要带着服务端签发的 Token
服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就放行

64.当你输入cnpm i 的时候为什么会安装所有的插件
根据package.json进行安装