前端面试js+es6

JavaScript js基本数据类型 值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。 OSI七层 五层参考模型 传输层用到的协议 TCP/IP四层模型

TCP/IP是一个四层的体系结构，主要包括：应用层、运输层、网际层和网络接口层

五层体系结构包括：应用层、运输层、网络层、数据链路层和物理层。

五层协议只是OSI和TCP/IP的综合，实际应用还是TCP/IP的四层结构。为了方便可以把下两层称为网络接口层。

每一层的作用

1、物理层：

主要定义物理设备标准，如网线的接口类型、光纤的接口类型、各种传输介质的传输速率等。它的主要作用是传输比特流（就是由1、0转化为电流强弱来进行传输,到达目的地后在转化为1、0，也就是我们常说的数模转换与模数转换）。这一层的数据叫做比特。

2、数据链路层：

定义了如何让格式化数据以进行传输，以及如何让控制对物理介质的访问。这一层通常还提供错误检测和纠正，以确保数据的可靠传输。

3、网络层：

在位于不同地理位置的网络中的两个主机系统之间提供连接和路径选择。Internet的发展使得从世界各站点访问信息的用户数大大增加，而网络层正是管理这种连接的层。

4、运输层：

定义了一些传输数据的协议和端口号（WWW端口80等），如：

TCP（transmission control protocol –传输控制协议，传输效率低，可靠性强，用于传输可靠性要求高，数据量大的数据）

UDP（user datagram protocol–用户数据报协议，与TCP特性恰恰相反，用于传输可靠性要求不高，数据量小的数据，如QQ聊天数据就是通过这种方式传输的）。 主要是将从下层接收的数据进行分段和传输，到达目的地址后再进行重组。常常把这一层数据叫做段。

5、会话层：

通过运输层（端口号：传输端口与接收端口）建立数据传输的通路。主要在你的系统之间发起会话或者接受会话请求（设备之间需要互相认识可以是IP也可以是MAC或者是主机名）

6、表示层：

可确保一个系统的应用层所发送的信息可以被另一个系统的应用层读取。例如，PC程序与另一台计算机进行通信，其中一台计算机使用扩展二一十进制交换码（EBCDIC），而另一台则使用美国信息交换标准码（ASCII）来表示相同的字符。如有必要，表示层会通过使用一种通格式来实现多种数据格式之间的转换。

7、应用层：

是最靠近用户的OSI层。这一层为用户的应用程序（例如电子邮件、文件传输和终端仿真）提供网络服务。

http协议

HTTP 是超文本传输协议，也就是HyperText Transfer Protocol。

HTTP的名字「超文本协议传输」，它可以拆成三个部分：

超文本传输协议 http的响应码及含义

1xx(临时响应)

100: 请求者应当继续提出请求。

101(切换协议) 请求者已要求服务器切换协议，服务器已确认并准备进行切换。

2xx(成功)

200：正确的请求返回正确的结果

201：表示资源被正确的创建。比如说，我们 POST 用户名、密码正确创建了一个用户就可以返回 201。

202：请求是正确的，但是结果正在处理中，这时候客户端可以通过轮询等机制继续请求。

3xx(已重定向)

300：请求成功，但结果有多种选择。

301：请求成功，但是资源被永久转移。

303：使用 GET 来访问新的地址来获取资源。

304：请求的资源并没有被修改过

4xx(请求错误)

400：请求出现错误，比如请求头不对等。

401：没有提供认证信息。请求的时候没有带上 Token 等。

402：为以后需要所保留的状态码。

403：请求的资源不允许访问。就是说没有权限。

404：请求的内容不存在。

5xx(服务器错误)

500：服务器错误。

501：请求还没有被实现。

localstorag、sessionstorage、cookie

加入自己的想法，不能有背题的感觉

cookie的意思是小甜饼，顾名思义它非常小，大小限制为4kb，它的主要用途是保存信息，比如你登陆某个网站可以看到记住密码这种 *** 作，这通常都是通过在cookie中存入一段识别用户身份的数据来实现的

其次是localstorage，他是html5标准中新加入的技术，他并不是一个划时代的东西，早在ie6时代，就有一个叫userdata这么一个用于本地存储，而当时考虑到浏览器兼容性，更通用的方式是使用flash，而如今local storage已经被大多数浏览器所支持

最后要说的呢是sessionStorage，它与localStorage的接口类似，但保存数据的生命周期与localstorage不同，session的意思是绘画，而sessionstorage是一个前端的概念，他只是可以将一部分数据在当前的会话中保存下来，刷新页面，数据依然存在，当页面关闭后，sessionstorage中的数据就会被清空

三者区别

应用场景

因为考虑到每一个http请求都会带着cookie信息，所以cookie当然是能精简就精简，比较常用的场景是判断用户是否登录，服务器端会在他登录时，在cookie中加入一段加密过的唯一便是单一用户的识别码，下次只要读取到这个值，就可以判断用户是否登录了，还有使用cookie来保存用户在电商网站的购物车信息，如今有了localStorage ，就不必再使用cookie来管理购物车了。除此以外，localStorage还能应用在其他地方，比如html5游戏中，通常会产生一些本地数据，localStorage很适合做这个，如果遇到内容特别多的表单，为了优化用户体验，我们可能要把表单拆分为多个子页面，然后按步骤引导顾客填写页面，这时候localStorage就可以发挥作用。

浏览器的缓存方式：协商缓存和强缓存

在http中可以通过控制http的响应头来控制http客户端的资源缓存，可分为强缓存和协商缓存

强缓存 cache-control:max-age=31536000

通过响应头cahce-control 中max-age等指令进行控制，max-age可设置强缓存时间周期，在该周期内，将直接从客户端缓存获取资源，而不会向服务器发送请求

协商缓存（对比缓存） 是一种服务器缓存策略

通过响应头etagulast-modified进行控制， 每次发送请求时需要进行缓存新鲜度校验，如果资源过旧 ，将直接从响应中获取，否则从客户端缓存进行获取

新鲜度校验

通过请求头if-none-match与响应头etag进行对比或者请求头if-modified-since与响应头last-modified进行对比。

map的功能 防抖节流 let const的区别 四个前端手撕：map、数组扁平化、防抖、数组转树 进程和线程 线程与进程的关系
一个线程可以创建和撤销另一个线程;同一个进程中的多个线程之间可以并发执行.相对进程而言，线程是一个更加接近于执行体的概念，它可以与同进程中的其他线程共享数据，但拥有自己的栈空间，拥有独立的执行序列。线程与进程的区别
1.一个程序至少有一个进程,一个进程至少有一个线程.
2.线程的划分尺度小于进程，使得多线程程序的并发性高。
3.另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。
4.线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。
5.从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但 *** 作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。线程与进程的优缺点
线程和进程在使用上各有优缺点：
线程执行开销小，但不利于资源的管理和保护；
而进程正相反。
同时，线程适合于在SMP机器上运行，而进程则可以跨机器迁移。 HTTP状态码

HTTP状态码的作用是告知客户端，从服务器端返回的请求结果

HTTP 状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字没有分类的作用。HTTP 状态码共分为以下 5 种类型：

1xx Information（信息状态码） 接受的请求正在处理
2xx Success（成功状态码） 请求正常处理完毕
3xx Redirection（重定向状态码） 需要进行附加 *** 作以完成请求
4xx Client Error（客户端错误状态码） 服务器无法处理请求
5xx Server Error（服务端错误状态码） 服务器处理请求出

http和https区别，http2和1的区别

http和https

概念
http: 超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。
https: 是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。
https协议的主要作用：建立一个信息安全通道，来确保数组的传输，确保网站的真实性区别
https不是一个新的协议，它只是http协议身披一层SSL(Secure Socket Layer，安全套阶 层)协议,SSL这层协议存在于应用层（http层）到TCP层之间
http的缺点，先简单的罗列一下缺点
1、http协议的报文传输时不加密的，有些隐私信息存在被窃听的风险。
2、http协议通信时无法验证通信方身份，可能存在伪装者（客户端、服务器）
3、http协议无法判断通信报文的完整性，通信报文在TCP/IP协议通信中可能会被篡改
使用https协议就是为了解决以上的三个问题，咱们都知道https协议是http协议+ssl协议组成的，那么http协议的缺点，只能是ssl协议来完成

HTTP/1.1、HTTP/2、HTTP/3 演变

同步与异步

异步：先执行一部分，等拿到结果(或到时间)再执行后续代码

计时器（setTimeout,setInterval)

ajax

读取文件
//同步程序按顺序执行
console.log(1)
console.log(2)
console.log(3)
//异步 1 2 3
setTimeout(() => {console.log(1)},0)
setTimeout(() => {console.log(2)},0)
setTimeout(() => {console.log(3)},0)

//异步 3 2 1 
setTimeout(() => {console.log(1)},1000)
setTimeout(() => {console.log(2)},100)
setTimeout(() => {console.log(3)},10)

// 同步程序执行完成后，执行异步程序  1 5 2 3 4
console.log(1)
setTimeout(() => {console.log(2)},0)
setTimeout(() => {console.log(3)},0)
setTimeout(() => {console.log(4)},0)
console.log(5)

单线程

js是单线程的，一个任务完成后才能执行另一个任务

for(let i =0; i< 2000; i++){
    console.log(1);
}
//计时器就不准了，等待上面2000个1输出后再执行计时器
setTimeout(() => {console.log(2)},0)
setTimeout(() => {console.log(3)},0)
setTimeout(() => {console.log(4)},0)
console.log(5);

递归的方式写1到100求和

function add(num1,num2){
	var num = num1+num2;
        if(num2+1>100){
	 return num;
	}else{
	  return add(num,num2+1)
        }
 }
var sum =add(1,2);      

为什么JS放在最后加载 页面渲染html的过程

浏览器渲染页面的一般过程：

1.浏览器解析html源码，然后创建一个 DOM树。并行请求 css/image/js在DOM树中，每一个HTML标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点。DOM树的根节点就是 documentElement，对应的是html标签。

2.浏览器解析CSS代码，计算出最终的样式数据。构建CSSOM树。对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置 < 用户设置 < 外链样式 < 内联样式 < html中的style。

3.DOM Tree + CSSOM --> 渲染树（rendering tree）。渲染树和DOM树有点像，但是是有区别的。

DOM树完全和html标签一一对应，但是渲染树会忽略掉不需要渲染的元素，比如head、display:none的元素等。而且一大段文本中的每一个行在渲染树中都是独立的一个节点。渲染树中的每一个节点都存储有对应的css属性。

4.一旦渲染树创建好了，浏览器就可以根据渲染树直接把页面绘制到屏幕上。

以上四个步骤并不是一次性顺序完成的。如果DOM或者CSSOM被修改，以上过程会被重复执行。实际上，CSS和JavaScript往往会多次修改DOM或者CSSOM。

CORS

CORS是一种新标准，支持同源通信，也支持跨域通信。fetch是实现CORS通信的

如何中断ajax请求

一种是设置超时时间让ajax自动断开，另一种是手动停止ajax请求，其核心是调用XML对象的abort方法，ajax.abort()

事件代理

事件委托是指将事件绑定到目标元素的父元素上，利用冒泡机制触发该事件

ulEl.addEventListener('click', function(e){
    var target = event.target || event.srcElement;
    if(!!target && target.nodeName.toUpperCase() === "LI"){
        console.log(target.innerHTML);
    }
}, false);

target、currentTarget的区别？ currentTarget当前所绑定事件的元素 target当前被点击的元素 宏任务和微任务？ 宏任务：当前调用栈中执行的任务称为宏任务。（主代码快，定时器等等）。微任务： 当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务为微任务。（可以理解为回调事件，promise.then，proness.nextTick等等）。宏任务中的事件放在callback queue中，由事件触发线程维护；微任务的事件放在微任务队列中，由js引擎线程维护。 说一下继承的几种方式及优缺点？

说比较经典的几种继承方式并比较优缺点就可以了

借用构造函数继承，使用call或apply方法，将父对象的构造函数绑定在子对象上原型继承，将子对象的prototype指向父对象的一个实例组合继承

原型链继承的缺点

字面量重写原型会中断关系，使用引用类型的原型，并且子类型还无法给超类型传递参数。

借用构造函数（类式继承）

借用构造函数虽然解决了刚才两种问题，但没有原型，则复用无从谈起。

组合式继承

组合式继承是比较常用的一种继承方法，其背后的思路是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数复用，又保证每个实例都有它自己的属性。 闭包

闭包的实质是因为函数嵌套而形成的作用域链

闭包的定义即：函数 A 内部有一个函数 B，函数 B 可以访问到函数 A 中的变量，那么函数 B 就是闭包

export和export default的区别？

使用上的不同

export default  xxx
import xxx from './'

export xxx
import {xxx} from './'

数组去重

此题看着简单，但要想面试官给你高分还是有难度的。至少也要写出几种方法

js

var arr=['12','32','89','12','12','78','12','32'];
    // 最简单数组去重法
    function unique1(array){
        var n = []; //一个新的临时数组
        for(var i = 0; i < array.length; i++){ //遍历当前数组
            if (n.indexOf(array[i]) == -1)
                n.push(array[i]);
        }
        return n;
    }
    arr=unique1(arr);
    // 速度最快， 占空间最多（空间换时间）
    function unique2(array){
        var n = {}, r = [], type;
        for (var i = 0; i < array.length; i++) {
            type = typeof array[i];
            if (!n[array[i]]) {
                n[array[i]] = [type];
                r.push(array[i]);
            } else if (n[array[i]].indexOf(type) < 0) {
                n[array[i]].push(type);
                r.push(array[i]);
            }
        }
        return r;
    }
    //数组下标判断法
    function unique3(array){
        var n = [array[0]]; //结果数组
        for(var i = 1; i < array.length; i++) { //从第二项开始遍历
            if (array.indexOf(array[i]) == i) 
                n.push(array[i]);
        }
        return n;
    }

es6

es6方法数组去重
arr=[...new Set(arr)];
es6方法数组去重，第二种方法
function dedupe(array) {
  return Array.from(new Set(array));       //Array.from()能把set结构转换为数组
}

get、post的区别

此题比较简单，但一定要回答的全面

1.get传参方式是通过地址栏URL传递，是可以直接看到get传递的参数，post传参方式参数URL不可见，get把请求的数据在URL后通过？连接，通过&进行参数分割。psot将参数存放在HTTP的包体内

2.get传递数据是通过URL进行传递，对传递的数据长度是受到URL大小的限制，URL最大长度是2048个字符。post没有长度限制

3.get后退不会有影响，post后退会重新进行提交

4.get请求可以被缓存，post不可以被缓存

5.get请求只URL编码，post支持多种编码方式

6.get请求的记录会留在历史记录中，post请求不会留在历史记录

7.get只支持ASCII字符，post没有字符类型限制