为期一个月的面试题纪实之Javascript(持续更新...)

2022-11-26 131 阅读9分钟

Javascript

把ES6+转成ES5，是通过babel实现

把TS转JS，通过TSC实现

1.什么是事件委托？

概念：将子元素的事件委托给父级元素去处理
好处：节约内存+方便管理+防止内存泄漏
节约内存：事件监听器的数量少
方便管理：当子元素动态删减时，无需考虑其事件监听器动态删减的问题
防止内存泄漏：当子元素删除时，无需删除其对应的事件监听器
ps：何为内存泄漏？

2.何为内存泄漏？

用闭未释放的【全局变量+闭包+定时器+事件监听器】
当我们删除DOM元素时，忘记删除其对应的事件监听器
当我们离开页面时，没有释放掉各种的事件监听器
用完的全局变量没有释放,obj = null
用完的定时器没有clear掉
用完未释放的数据闭包，newFn = null

3.ES6有哪些新特性？

分为四个层面：变量层面+数据结构层面+函数层面+类层面

变量层面：

let：克服了var的弊病(变量提升+作用域穿透+重复声明)
const：把不希望被改变地址的对象声明为常量

数据结构层面：

数组的展开+解构
对象的简写+解构
字符串：模板字符串
Map：方便增删改查的键值对存储器
Set：有序且不重复的元素集

函数层面：

箭头函数：this从父级作用域当中继承
ps：this有哪些存在的情形？

类层面：

class系列语法：class(构造函数+原型属性)，constructor(函数构造器)，static：静态成员(属性+方法)，super()调用父类的属性+方法，super(name)调用父类构造器，super.xxx() 调用父类实例方法

4.this所有可能情形？

普通函数：函数的this为该函数的调用者(显式主语/无显式主语时，隐式的为window/DOM元素的事件监听器的this恒为事件源e.currentTarget)
箭头函数：函数的this从父级作用域当中继承(可以认为箭头函数就是没有this)
普通函数可以通过call()，apply()，bind()，来改变函数的this
constructor构造器当中的this，为当前构造的实例
实例方法当中的this，为当前实例
静态属性/方法当中的this，为当前类

5.请说出十个请求头

Accept：客户端想要接收的响应体数据类型
Accept-Encoding：客户端想要接收的响应体压缩编码方式
Content-Type：请求体的数据类型
Content-Length：请求体的数据长度
Connection = keepAlive 保持长连接(直到页面左右资源加载完毕，才断开连接)
Cookie：设置客户端的cookie信息
User-Agent：浏览器信息
Host：远程主机地址(服务端地址)
Origin：客户端地址
If-None-Match：上一次响应的Etag携带的上一次数据的数据指纹(作为协缓的特征)
If-Modified-Since：上一次响应的Last-Modified携带的上一次数据的最后尾更时间(作为协缓的特征)

6.请说出十个响应头

Content-Type：响应体的数据类型
Content-Length：响应体的数据长度
Content-Encoding：响应体的压缩编码方式
connnection=keepAlive：保持长连接，直到页面所有资源加载完毕，才断开连接
Set-Cookie：服务端给客户端设置的cookie信息
Date：响应时间
Server：服务器信息
Access-Control-Allown-Origin：服务端允许哪个源跨域访问我
Cache-Control = maxAge(秒数) 最大缓存时间
Etag：电子指纹
Last-Modeifed：数据的最后尾更时间

7.什么是深拷贝以及什么是浅拷贝

浅拷贝：把引用数据类型直接复制给别人，(包括调用函数时，实参给形参赋值)，这时修改任何的副本，都会影响其他副本
深拷贝：把对象当中的所有key-value都递归拷贝给别人，递归到每一个叶子节点(即value是基本数据类型/函数)，这时任何副本相互独立，互不影响

8.什么是值传递以及什么是引用传递

值传递：把基本数据类型直接赋值给别人，(包括调用函数时，实参给形参赋值)
引用传递：把引用数据类型直接赋值给别人，(包括调用函数时，实参给形参赋值)，是地址拷贝，即浅拷贝
ps Object.assign()你如何理解以及属于什么传递?

9.Object.assign()如何理解？

Object.assign()是把可枚举的属性以及属性值，从一个或多个对象当中复制到目标对象，且返回目标对象。当前面对象与后面对象，有同名属性时。后者会覆盖前者。
Object.assign()属于深拷贝

10.谈谈对事件传播/派发机制的理解

目的：就是为了解决事件传播时由谁消费的问题
一个事件潜在的消费者有很多(e.path：window，document，html，body，div，span)
我们可以通过三个方向来设置：事件类型(click，mousemove...)，事件传播方向(capture，bubbing，当addEventListener第三个参数设置为true，传播方向为捕获，默认为冒泡)，事件传播断点(e.stopPropagation())

11.谈谈对闭包的理解

广义闭包：一个返回引用数据类型的函数，在其返回值被外界引用期间，其执行空间无法被释放，客观上形成了一个封闭的作用域，即函数闭包
狭义闭包：一个返回函数的函数，外层函数作为内层函数的状态缓存区
闭包使用场景：作为函数式编程的基础，可以衍生出很多玩法，例如(只能使用N次的函数，防抖与节流，函数柯里化...)
闭包的释放：用完的数据闭包，一定要释放掉，因为闭包会导致算法的执行空间和时间开销增大，久而久之就会造成内存泄漏
闭包释放方式：let res = fn() , res = null，无人引用闭包函数返回值，其执行空间就会被释放

12.前端有哪些存储方式？

cookie 4k级别+键值对存储+主要用于前后端共享用户信息
localStorage/sessionStorage 50M级别+键值对存储+前端存储+缓存业务数据(减少网络请求次数)

13.typeOf与instanceOf区别？

typeOf主要用于判断基本数据类型，对于引用数据类型只能返回function/Object
instanceOf主要用来判断某个对象是否属于某类的实例或者属于某个后代实例
zhansan instanceOf Person(Animal/Object)的结果都为true

14.JS如何实现继承

一句话：父类实例作为子类的原型

15.字符串有哪些API，至少10个

16.数组有哪些API，至少10个

juejin.cn/post/715983…

17.new操作符具体干了什么

const zhansan = new Person("小明",18)
提前构造一个默认的返回值P
把实例方法当中的this都指向这个P
最终返回这个P对象

18.URL回车后发生了什么？

URL解析：协议段+域名段(ip+端口)(HTTP协议默认端口是80，HTTPS协议默认端口是443)+路径段+查询参数段+哈希段，浏览器执行解析
DNS查询：将域名映射为IP+端口 ip是宇宙当中唯一一台主机端口是这台主机的唯一进程(应用程序)
TCP连接：宗旨确保稳定连接+可靠传输；三次握手确保稳定连接；四次挥手确保可靠传输；稳定连接：服客双方确保彼此的都能发能收；可靠传输：服客双方确保对方的数据已经传输完毕；三次握手是从客户端触发的N字形；四次挥手是从客户端出发的V字形+从服务端出发的V字形
发起HTTP请求：请求报文的构成：请求行+请求头+空行+请求体
HTTP响应返回：响应报文的构成：状态行+响应头+响应体
断开TCP连接：要经历四次挥手
浏览器渲染页面：要绘画渲染原理示意图

19.简述TCP原理?

宗旨：可靠传输+稳定连接
三次握手确保稳定连接，四次挥手确保可靠传输
稳定连接：服客双方确保彼此能发能收；可靠传输：服客双方确保对方的数据已经发送完毕
三次握手的图形：从客户端出发的N字形；四次挥手的图形：从客户端出发的V字形+从服务端出发的V字形
ps：一蹴而就原则：三次握手和四次挥手必须一次性完成，否则作废重来
UDP：没有握手+挥手，讲究直连直发直收直断，注重性能
TCP/UDP工作在OSI7层网络模型的传输层
OSI7层网络图形：物数网(IP)传(TCP/UDP)会表应(HTTP,FTP,SMTP)

20.GET请求和POST请求

携带数据方式不同：GET请求只能通过查询参数，而POST/PUT/PATCH还可以通过请求体携带参数
携带数据量不同：查询参数K级别，请求体携带数据量理论上无上限
安全性不同：查询参数完全暴露(不能携带敏感参数)，请求体携带数据相对安全
安全性不同：HTTPS协议携带数据接近于绝对安全，HTTPS协议的通信数据全部使用加密 PS：HTTPS协议使用非对称方式加密，服务器持有网站证书(公钥)，当客户端给服务器发送数据时，会使用该公钥进行加密，服务器使用自己配对的私钥进行解密

21.HTTP常见状态码有哪些？

1字头：代表请求还在继续
2字头：代表请求成功(200:标准的请求成功)
3字头：代表重定向，301：永久重定向，302：临时重定向，304资源未被修改使用缓存
4字头：客户端发送错误：401：未授权，403：禁止访问，404(域名正确，但是路径错误)
5开头：服务器内部错误(500:服务端错误)

22.JWT鉴权原理？