前端面试基础梳理（偏前端，非node）持续更新中...... let、const：不会变量提升；生成暂时性死区；同一作用

持续更新中......

基础

1、let、const、var的区别

2、sandbox安全的原理

3、说说Promise

4、执行上下文、作用域链和闭包

5、继承

6、new的过程做了什么

7、工程化

8、node

9、eventloop

10、前端与端上如何通信的

11、fetch和ajax请求

12、跨域

13、webpack的构建流程、编译、打包、热更新

14、this？改变this的方法biand、apply、call的用法

15、es6中数组新方法

16、vue的依赖收集

17、常见的网络错误

18、http、https区别（https过程)

19、从URL输入到页面渲染中间发生了什么？

20、请求头都有哪些常用设置

21、require和import的区别

22、http1 与 http2 的区别

23、http2. 0服务器推送和websocket有什么区别？

24、react中类组件和函数式组件中有什么不同？

开放问题

1、讲讲你的某个项目
2、职业规划
3、工作以来有什么成长

算法

1、两个超长整数相加
2、每次可上一阶或两阶台阶，如果有n阶，多少种上法
3、对象深拷贝、深对比
4、一个无序数组，找到两项之差最大值

------------------======== 我是答案分割线 =========------------------

1、let、const、var的区别

let、const：不会挂到window上；不会变量提升；生成暂时性死区；同一作用域内不可重复声明。

const一旦声明不能重新赋值（声明对象内的value可以，为什么？一个对象指向的是一块内存，内存内容可改变）

let、canst出现原因？防止了var变量提升可能导致的运行时错误

2、iframe安全的原理

阻止跨域；浏览器的同源策略中限制浏览器中不同域的框架之间是不能进行js的交互操作的

3、Promise

特性：对象的状态不受外界影响（pending、fulfilled、reject），只有异步执行的结果能决定最终状态；结果一经确认不再改变，何时监听结果都不变；
支持链式调用，.then的结果返回一个新的promise

4、执行上下文、作用域、作用域链、闭包

执行上下文：js编译的时候；函数调用的时候，函数执行完执行上下文被销毁。管理执行上下文的栈，是调用栈（先进先出）
作用域：写入某个变量时即决定了它的作用域。函数声明的位置决定了它的词法作用域
作用域链：本质上是一个指向变量对象的指针列表，用到某个变量时会在当前作用域查找，没有则按照作用域链向上一层查找，直到全局执行环境
闭包：根据作用域的规则，内部函数总是能访问外部函数的变量。当通过调用外部函数返回内部函数后，即便外部函数已经执行完，但是返回的内部函数用了外部函数的变量，导致该变量在内存中不会被释放，这些变量的集合称为闭包。用处：模块、组件。负面影响：长期占用内存还可能造成内存泄漏

5、继承

class A extends B，class是构造函数(constructor)的语法糖。
A.proto == B;
A.prototype.proto == B.prototype
可以这样理解：作为一个对象，子类(A)的原型（__proto__属性）是父类(B)；作为一个构造函数，子类(A)的原型对象（prototype属性）是父类的原型对象（prototype属性）的实例

6、new的过程做了什么

创建一个对象，继承其构造函数的的prototype，执行其构造函数，如果构造函数return一个对象就把这个对象付给实例，如果return的不是对象就把新创建的对象付给实例

7、工程化

模块化、组件化(一般以Ui划分、也有功能)、规范化、自动化

8、node库

运行时提供了服务端所需的功能。
过程：libuv层适配不同系统 => 通过运用系统提供的底层C++接口 =>node的js层写业务

9、eventLoop事件循环

宏任务：script全部代码、setTimeout、I/O
微任务：promise、mutationObserver、Process.nextTick

10、前端与端上如何通信

11、fetch和ajax请求

fetch是window的一个方法，基于promise实现的；请求不会自动带cookie，要设置credentials:' include '；所有ie不支持fetch；只有超时这种请求失败才会走到reject，正常的404这种错误码会被resolve接收。
ajax是XMLHTTPRequest的一个实例，只有状态码是200或304才会认为是成功的

12、跨域 www.imooc.com/article/291…

jsonp：通过script的src无跨域限制，在url上拼接callback，服务端把数据拼到callback中，浏览器解析执行
nodejs：利用服务与服务之间无跨域限制
cors（跨域资源共享）：w3c的标准，它允许浏览器向跨源服务器发出XMLHTTPRequest请求。分为简单请求和非简单请求(提前发一次http的options请求，确定要使用的方法是否支持)。corse请求也会经过服务端审核，决定是否返回数据。crose是浏览器发现页面请求有跨域后自己添加了一些头信息，用户无感知，主要看服务器是否支持CORS

13、webpack的构建流程、编译、打包、热更新

流程：

根据文件配置+shell语句生成最终的参数
根据entry找到入口文件，进行依赖查询
根据文件类型用对应的loader进行编译
把编译后的文件依照依赖关系组合成一个个含有多个依赖模块的chunk，把每个chunk转换成单独文件放入输出的列表

核心配置：entry:{} 入口文件；output:{} 出口文件；loader:[] 编译器；plugin:[new XXX()] 插件

常用loader（注：loader是从右向左执行的）:

babel-loader ES6转ES5 ：原理(parser=>transform=>generate即生成抽象语法树到修改抽象语法树)
style-loader、css-loader 对css进行解析
file-loader 把文件都整合到同一个文件夹，使用相对路径引用输出文件
url-loader html、css里引用图片等的url地址转换
image-loader 图片的家在压缩
eslint-loader 对js进行Eslint检查

常用plugin

html-webpack-plugin 把html文件抽离

14、this？改变this的方法biand、apply、call的用法

谁调用this，this就指向谁

apply、call、bind 都是可以改变 this 的指向的。apply和call都是改变this且执行，bind改变this生成一个新函数等待执行

fun.apply(thisArg, [argsArray])；

eg： var a ={ name : "Cherry", fn : function (a,b) { console.log( a + b) } }
```
var b = a.fn;
b.apply(a,[1,2])     // 3
```
fun.call(thisArg[, arg1[, arg2[, ...]]])

eg： var a ={ name : "Cherry", fn : function (a,b) { console.log( a + b) } }
```
var b = a.fn;
b.call(a,1,2)       // 3
```
bind()方法创建一个新的函数, 当被调用时，将其this关键字设置为提供的值

eg： var a ={ name : "Cherry", fn : function (a,b) { console.log( a + b) } }
```
var b = a.fn;
b.bind(a,1,2)()           // 3
```

15、es6中数组新方法

map：映射。返回新数组，中途不可return跳出。

let arr=[66,59,80];
let result=arr.map(item => {
    if(item >= 60){
        return "及格"
    }else{
        return "不及格"
    }
});
//result:["及格", "不及格", "及格"]

reduce：汇总。返回一个最终值

let arr = [12,69,180,8763];
let result = arr.reduce((tmp, item, index) => {
    console.log(tmp, item, index);
    return tmp + item;
});
console.log(result);//求和

filter：过滤。返回符合要求的新数组

let arr=[
    {title: '电源线', price: 50},
    {title: '电脑', price: 13000},
    {title: '键盘', price: 120},
    {title: '手机', price: 9000}
];
 
let result=arr.filter(json=>json.price>=5000);
 
console.log(result);//[{title: '电脑', price: 13000},{title: '手机', price: 9000}]

forEach：迭代。对数组每一项进行处理（为数组提供一个标准化方法，不能中途跳出）

let arr=[12,5,8,9];
 
arr.forEach((item,index)=>{
   console.log(index+': '+item); //0: 12  1: 5  2: 8  3: 9
});

17、常见的网络错误

200 成功
301 永久重定向；302 暂时重定向；304 缓存
401 未授权；404 页面资源不存在；408 超时
502 网关错误

18、http、https区别（https过程）

https相较于http更安全，https在tcp连接之后建立了ssl。

ssl的过程：tcp建立之后客户端给服务端一个加密规则列表=>服务端返回给客户端私钥+证书+加密选定的规则=>客户端通过内置的CA根证书检测证书，通过后由加密规则生成对称密钥，由私钥加密给服务端=>服务端与客户端进行对称密钥的数据传输

19、从URL输入到页面渲染中间发生了什么

url解析对应的ip且向服务端发出请求 => 服务端返回文档 => 客户端由上向下解析执行文档 => css生成cssOM、dom生成dom树、cssOM+dom树生成渲染树。如果中间遇到src的请求则取请求资源并加载，同时阻塞渲染树生成

20、请求头都有哪些常用设置

response

catch-control no-catch/no-store/public 缓存机制
connection keep-alive/close 是否保持常链接
Etag xxxxx 文件的唯一标示
Last-modified xxxx 文件上从更新的时间
Access-control-allow-origin */域名访问控制允许的源（CORS）
status 状态码

request

If-modified-Since xxxx 对应last-modified
If-None-Match xxxx 携带Etag
User-Agent xxxx 浏览器信息
Accept text 接受的媒体类型
Referer 来源地址

21、require和import的区别

require是赋值的过程，是运行时，属于异步加载，是AMD规范

import是解构的过程，是编译时，需要写在文件的顶端，是ES6规范

22、http1 与 http2

差异：

1、http1为明文传输，http2为二进制传输，加快解析速度

2、http2支持多路传输，即建立一次链接可带多个同域名下的请求（根据浏览器不同，有不同的上限）

3、http2支持service push

4、http2使用HPACK算法（算法详解）压缩了header的大小，加快了传输速度。

23、http2. 0服务器推送和websocket有什么区别？

HTTP2的推送是浏览器和服务端之间的一个推送的概念，比如我在HTTP2中请求 a.html 服务端会自动把css和一些其他资源一并返回，而websocket的推送是有API的，可以在客户端手动控制链接和中断

24、react中类组件和函数式组件中有什么不同？

函数式组件：

组件不会被实例化,整体渲染性能得到提升
组件不能访问this对象
组件无法访问生命周期的方法（可使用hook模拟周期）
无状态组件只能访问输入的props,无副作用