面试题总结

1.js的数据类型

分为基本数据类型和引用数据类型。
基本数据类型

ES5的5种：Null，undefined，Boolean，Number，String， ES6新增：Symbol表示独一无二的值 ES10新增：BigInt 表示任意大的整数

一种引用数据类型：（本质上是由一组无序的键值对组成）

引用数据类型: Object。包含Object、Array、 function、Date、RegExp。 JavaScript不支持创建任何自定义类型的数据，也就是说JavaScript中所有值的类型都是上面8中之一。

2.null 和 undefined 的区别？

相同：

在 if 语句中 null 和 undefined 都会转为false两者用相等运算符比较也是相等

首先 Undefined 和 Null 都是基本数据类型，这两个基本数据类型分别都只有一个值，就是 undefined 和 null。

不同：

undefined 代表的含义是未定义，null 代表的含义是空对象。

一般变量声明了但还没有定义的时候会返回 undefined，或者定义了形参，没有传实参，显示undefined或者对象属性名不存在时，函数没有写返回值，即没有写return，拿到的是undefined

null 主要用于赋值给一些可能会返回对象的变量，作为初始化。也作为对象原型链的终点。

3.什么是原型、原型链

原型：每个函数在被创建的时候就会有一个 prototype属性，这个属性是一个指针，指向一个对象，而这个对象就是这个函数的原型对象（也就是原型），它是用来共享所有实例的属性和方法的地方，所以原型其实就是函数的伴生体（与生俱来的）

var a = [1, 2, 3, 4, 5];
a.__proto__ === Array.prototype; // true

原型链：原型链，简单理解就是原型组成的链。当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。

4.宏任务微任务分类及执行顺序

js 是一种单线程语言，简单的说就是：只有一条通道，那么在任务多的情况下，就会出现拥挤的情况，这种情况下就产生了 ‘多线程’ ，但是这种“多线程”是通过单线程模仿的，也就是假的。那么就产生了同步任务和异步任务。宏任务与微任务表示异步任务的两种分类

1、宏任务
setTimeoout、setInterval
2、微任务
process.nextTick

顺序：1、存在微任务的话，就执行所有的微任务
2、微任务都执行完之后，执行下一个宏任务
3、但不是说所有宏任务执行完毕之后，才执行微任务的。而是当前的宏任务执行完毕，然后执行所有的微任务

执行顺序：先执行同步代码，遇到异步宏任务则将异步宏任务放入宏任务队列中，遇到异步微任务则将异步微任务放入微任务队列中，当所有同步代码执行完毕后，再将异步微任务从队列中调入主线程执行，微任务执行完毕后再将异步宏任务从队列中调入主线程执行，一直循环直至所有任务执行完毕。

5.什么是token

token的意思是“令牌”，是服务端生成的一串字符串，作为客户端进行请求的一个标识。当用户第一次登录后，服务器生成一个token并将此token返回给客户端，以后客户端只需带上这个token前来请求数据即可，无需再次带上用户名和密码。轻便,在跨域资源共享时非常方便，安全能防止csrf。

CSRF攻击：攻击者盗用了你的身份，以你的名义发送恶意请求。CSRF能够做的事情包括：以你名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账…造成的问题包括：个人隐私泄露以及财产安全。

6.深拷贝和浅拷贝的区别，怎样实现浅拷贝

浅拷贝
创建一个新对象，如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 。这个内存地址指向同一个堆内存，如果其中一个对象改变了堆内存存放的值，那么所有的对象都会受到影响。

深拷贝
创建一个新对象，如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，则从堆内存中开辟一个新的区域存放该引用类型指向的堆内存中的值,且修改新对象的值不会影响原对象。

浅拷贝实现：

const obj1 = {name: "icy",age: 20,hobbies: ["eat", "sleep", "game"],};const obj2 = { ...obj1 };//修改堆内存中的值obj2.hobbies[0] = "play";console.log("修改后obj2", obj2);console.log("修改后obj1", obj1);

obj1和obj2都受到了影响，验证了浅拷贝。

7.tcp和udp的区别

TCP：
传输控制协议（TCP，Transmission Control Protocol）是一种面向连接的、可靠的、基于字节流的传输层通信协议，由IETF的RFC 793 定义。

UDP：
Internet 协议集支持一个无连接的传输协议，该协议称为用户数据报协议（UDP，User Datagram Protocol）。UDP 为应用程序提供了一种无需建立连接就可以发送封装的 IP 数据包的方法。RFC 768 描述了 UDP。

区别：

1. TCP面向连接，通过三次握手建立连接，四次挥手接除连接;UDP是无连接的，即发送数据之前不需要建立连接，这种方式为UDP带来了高效的传输效率，但也导致无法确保数据的发送成功。
2. TCP是可靠的通信方式。通过TCP连接传送的数据，TCP通过超时重传、 数据校验等方式来确保数据无差错，不丢失，不重复，且按序到达；而UDP由于无需连接的原因，将会以最大速度进行传输，但不保证可靠交付，也就是会出现丢失、重复等等问题。
3. TCP面向字节流，实际上是TCP把数据看成一连串无结构的字节流，由于连接的问题，当网络出现波动时，连接可能出现响应问题；UDP是面向报文的，UDP没有拥塞控制，因此网络出现拥塞不会使源主机的发送速率降低。
4. 每一条TCP连接只能是点到点的；而UDP不建立连接，所以可以支持一对一，一对多，多对一和多对多的交互通信，也就是可以同时接受多个人的包。
5. TCP需要建立连接，首部开销20字节相比8个字节的UDP显得比较大。
6. TCP的逻辑通信信道是全双工的可靠信道，UDP则是不可靠信道。

TCP三次握手和四次挥手

TCP三次握手：三次握手是TCP用来确保连接可靠建立的方式：

第一次握手： A给B发短信说：“B，你现在有空吗？”
第二次握手： B此时收到了A的信息，然后对A说： “ 我有空，你呢？有空吗？ ”
第三次握手： A此时收到了B的确认信息，然后说：“我也有空，那我跟你说个事。”
在三次握手之后，A和B都能确定这么一件事： 双方的通信可以流畅的进行。 这样，双方就可以开始进行正常的对话了。

2.TCP四次挥手：四次挥手是TCP用来确保连接可靠关闭的方式：

第一次挥手： A给B发短信说：“B，我要准备吃饭了？”

第二次挥手： B此时收到了A的信息，然后先对A说： “ 我知道了。”

第三次挥手： B对A说到： “ 我也要准备吃饭了。”然后放下了手机，

第四次挥手： A此时收到了B的确认信息，然后想B发一个包说：“好的，我知道了。”这时才放下手机去吃饭，

在四次挥手之后，A和B都能确定这么一件事： 双方的通信可以正常关闭。 这样，双方就可以确定对方已经完全知晓自己确认要关闭连接。

8.http和https的区别

1、HTTPS  协议需要到 CA （Certificate Authority，证书颁发机构）申请证书，一般免费证书较少，因而需要一定费用。(以前的网易官网是http，而网易邮箱是 https 。)

2、HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。

3、HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

4、HTTP 的连接很简单，是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)

9.浏览器地址输入页面回车后做了什么事

1: URL解析

2: DNS查询

3: TCP 连接

4: 处理请求 

5: 接受响应

6: 渲染页面

10.防抖和节流的区别，分别应用于什么场景，实现防抖节流

防抖：在规定时间内触发会重置， 如果n秒内高频事件再次被触发，则重新计算。防止抖动，先抖动，什么时候停止才执行下一步。场景：用于搜索框。

思路及实现：

1. 触发高频率函数，定义一个定时器来延迟触发
2. 重新触发时，如果定时器存在则清除重置定时器

     //获取元素var input = document.getElementById('input')//防抖//触发事件function handle(e){console.log(e.target.value);}function debounce(fn){var timerreturn function(){if(timer){clearTimeout(timer)}timer = setTimeout(()=>{//arguments就是传入的参数数组,而且个数可以不确定的传回给fnfn.apply(this,arguments)},1000)}}input.addEventListener('input',debounce(handle))

节流： 规定时间内只触发一次。2秒执行一次，4秒执行一次...场景：scoll 拖拽

思路及实现：

1. 设置一个变量，当作开关，true的话才能进入函数，进入后变成false
2. 通过定时器在规定时间后才能进入执行函数触发

      //获取元素var input = document.getElementById('input')//节流function handle(e){console.log(e.target.value);}function throttle(fn){//定义一个状态let flag = truereturn function(){if(!flag) return flag = false;fn.apply(this,arguments)setTimeout(()=>{flag=true},1000)}}input.addEventListener('input',throttle(handle))

11.apply和call的用法及区别

链接：http://t.csdn.cn/Q1E72

12.箭头函数的缺点

• 没有 arguments 参数
• 无法改变this。无法通过 call apply bind 等改变 this

13.arguments 的对象是什么

arguments 当我们不知道有多少个参数传进来的时候就用 arguments 来接收，是一个类似于数组的对象，他有length属性，可以arguments[ i ]来访问对象中的元素， 但是它不能用数组的一些方法。 例如push、pop、slice等。arguments虽然不是一个数组，但是它可以转成一个真正的数组。

取之可以用 展开运算符来 数组和类数组类数组： ①拥有length属性，其它属性(索引)为非负整数；箭头函数里没有arguments ②不具有数组所具有的方法； ③类数组是一个普通对象，而真实的数组是Array类型。

14.this指向

默认情况下，没有直接调用者，this指向window

严格模式下（设置了'use strict'），this为undefined

普通函数中，this指向其函数的直接调⽤者； 
箭头函数中，this指向其定义环境，任何⽅法都改变不了其指向，如call( ）、bind（）等； 
构造函数中，如果不使⽤new，则this指向window， 如果使⽤new创建了⼀个实例，则this指向该实例。 
window 内置函数中，如setInterval，setTimeout等，其内部的this指向Window。 
匿名函数的this指向Window。 
apply（）、call（）、bind（）可以改变this的指向

15.px 、%、 em、 rem、 vw/vh各个单位的区别

px:是基本单位，绝对单位

%:相对于父元素宽高的百分比

em:相对于当前元素的font-size

rem:相对于根节点的font-size

vw:相对于浏览器可视口的宽度的1%

vh:相对于浏览器可视口的高度1%

注：100%和100vw的区别在于有滚动条时100vw为包含滚动条和窗口的大小，100%不包含滚动条，剩余窗口的大小。

16.offsetHeight scrollHeight clientHeight 区别

offsetHeight ： border + padding + content
clientHeight ： padding + content
scrollHeight ： padding + 实际内容的高度

17.闭包的理解并举例

闭包就是函数嵌套函数，内部函数可以引用外部函数的参数和变量。参数和变量不会被内存回收机制收回会一直存储在内存中，优点可以读取其他函数内部的变量，并将其一直保存在内存中。坏处是可能会造成内存泄漏或溢出。

内存回收机制就是不在用到的内存空间，系统会自动进行清理出空间提供给其他程序使用。函数执行完毕之后，这个独立作用域就会回收删除。

function fn(){var a=1;
}
fn();
//函数执行完毕

有一种情况下这个封闭的盒子是不会删除的，那就是“闭包”。函数A内部有函数B，函数B可以访问函数A的变量，那么函数B就是闭包。

function A(){   var a = 123;   function B(){       console.log(a) //123   }   return B()
}
A()();

18.http状态码

100，接受的请求正在处理，信息类状态码
200(成功)服务器已成功处理了请求。
301，永久性重定向，表示资源已被分配了新的 URL
302，临时性重定向，表示资源临时被分配了新的 URL
303，表示资源存在另一个URL，用GET方法获取资源
304，(未修改)自从上次请求后，请求网页未修改过。服务器返回此响应时，不会返回网页内容
400(错误请求)服务器不理解请求的语法
401表示发送的请求需要有通过HTTP认证的认证信息
403(禁止)服务器拒绝请求
404(未找到)服务器找不到请求网页
500(服务器内部错误)服务器遇到错误，无法完成请求
503表示服务器处于停机维护或超负载，无法处理请求

19.cookies，sessionStorage 和 localStorage 的区别?

cookie：一个大小不超过4K的小型文本数据，一般由服务器生成，可以设置失效时间；若没有设置时间，关闭浏览器cookie失效，若设置了 时间，cookie就会存放在硬盘里，过期才失效，每次http请求，header都携带cookie

localStorage：5M或者更大，永久有效，窗口或者浏览器关闭也会一直保存，除非手动永久清除或者js代码清除，因此用作持久数据，不参与和服务器的通信

sessionStorage关闭页面或浏览器后被清除。存 放数据大小为一般为 5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

20.