面试题总结

1.js的数据类型

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

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

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

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

/********************** 补充 *****************************/

let a=Symbol()
let b=Symbol()

let c=Symbol('你好')

let d=Symbol('你好')
console.log(a,b,a==b,c==d) //Symbol() Symbol() false false

为什么相同参数 Symbol() 返回的值不相等

因为使用Symbol()创建一个Symbol类型的值并赋值给a变量后，你就得到了一个在内存中独一无二的值。现在除了通过变量a，任何人在任何作用域内都无法重新创建出这个值。所以就算我们通过相同参数创建的b，结果还是不相等的。

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 解释同步和异步及它们的区别

javascript是单线程。单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。于是所有任务分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。

同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、进入任务队列，被浏览提供的线程执行，当执行完毕后就会产生一个回调函数，并且通知主线程，在主线程执行完当前所执行的任务后，就会调取回调函数，使其进入主线程中。异步又分为宏任务微任务

常见的异步操作有网络请求和定时器

异步转同步：可以使用 async/await 关键字和 Promise 对象的 then 方法。通过使用 async/await，可以让异步代码看起来像同步代码，但实际上仍然是异步执行的。

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

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

顺序：

当前执行栈中的同步任务执行完毕后，会先执行所有的微任务，然后再执行宏任务。
在一个宏任务执行完成后，如果有微任务，那么会先执行微任务，然后再继续下一个宏任务。
在一个宏任务执行过程中，如果遇到了新的宏任务，那么会将其加入到宏任务队列中，等待下一次事件循环执行。

在这里插入图片描述

6.什么是token

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

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

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

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

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

主要是针对引用类型

浅拷贝实现：

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都受到了影响，验证了浅拷贝。

实现深拷贝：

1、es6的展开语法

1.ES6扩展运算符
let a = {name : '张三',age : '18'
}
let b = {...a};
b.name = '李四';
console.log('a：',a);
console.log('b：',b);2.JSON.parse(JSON.stringify(对象))，缺无法拷贝内部函数，比如下方的like()
let a = {name : '张三',age : '18',like(){console.log('喜欢唱歌、滑冰');}
}
let b =JSON.parse( JSON.stringify(a) );
b.name = '李四';
console.log('a：',a);
console.log('b：',b);3.手写递归的方式来实现深拷贝

8.tcp和udp的区别

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

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

区别：

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

9.http和https的区别

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

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

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

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

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

1: URL解析

2: DNS查询

3: TCP 连接

4: 处理请求

5: 接受响应

6: 渲染页面

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

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

思路及实现：

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

     //获取元素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 拖拽

思路及实现：

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

      //获取元素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))

12.apply和call的用法及区别

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

13.箭头函数的缺点

1.不能作为构造函数实例化对象

2.无法改变this。无法通过 call apply bind 等改变 this（this 永远指向函数生命时所在的作用域的this的值）

3.没有 arguments 参数

14.arguments 的对象是什么

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

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

15.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的指向

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

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

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

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

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

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

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

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

17.offsetHeight scrollHeight clientHeight 区别

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

18.闭包的理解并举例

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

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

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()();

19.http状态码

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

20.cookies，sessionStorage 和 localStorage 的区别?

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

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

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

21.for和forEach的区别

for与forEach的区别

1.for循环可以使用break跳出循环，但forEach不能。

2.for循环可以控制循环起点（i初始化的数字决定循环的起点），forEach只能默认从索引0开始。

3.for循环过程中支持修改索引（修改 i），但forEach做不到（底层控制index自增，我们无法左右它）

22.请解释一下什么是事件冒泡和事件捕获

向上冒泡向下捕获

事件流：当事件发生时，会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播，这个过程称之为事件流。（当页面触发一个事件时，会按照一定的顺序来响应事件，事件的响应过程称为事件流。）

事件流可分为冒泡型事件流、捕获型事件流：

（1）事件冒泡：微软公司提出的，事件由子元素传递到父元素的过程叫做冒泡（false）。

查找事件（事件响应）的顺序：文本节点–>元素节点—>body—>html—>document（例如点击事件）<向上响应>

（2）捕获事件：网景公司提出的，事件由父元素传递到子元素的过程叫做事件捕获。（ture）

查找事件（事件响应）的顺序：document–>html–>body–>元素节点–>文本节点 <向下响应>

阻止事件冒泡的方式

常用方法：

（1）事件委托：将元素的绑定事件写起其父元素上，防止事件冒泡

（2）event.stopPropagation()：可以阻止事件冒泡，阻止父级元素的绑定事件

23.什么是跨域，如何解决跨域问题

出于浏览器的同源策略限制，同源是指：协议相同，域名相同，端口相同。当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

同源策略限制了一下行为：Cookie、LocalStorage 和 IndexDB 无法读取、DOM 和 JS 对象无法获取、Ajax请求发送不出去（了解）

跨域解决方案
通过jsonp跨域
document.domain + iframe跨域
location.hash + iframe
window.name + iframe跨域
postMessage跨域
跨域资源共享（CORS）
nginx代理跨域
nodejs中间件代理跨域
WebSocket协议跨域地址https://blog.csdn.net/weixin_62889848/article/details/128559799?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168560588316800225590440%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=168560588316800225590440&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~times_rank-3-128559799-null-null.142%5Ev88%5Econtrol_2,239%5Ev2%5Einsert_chatgpt&utm_term=%E5%89%8D%E7%AB%AF%E4%BB%80%E4%B9%88%E6%98%AF%E8%B7%A8%E5%9F%9F%EF%BC%8C%E5%A6%82%E4%BD%95%E8%A7%A3%E5%86%B3%E8%B7%A8%E5%9F%9F%E9%97%AE%E9%A2%98&spm=1018.2226.3001.4187