2024年前端面试题

队列与栈一样，也是一种线性表，不同的是，队列可以在一端添加元素，在另一端取出元素，也就是：先进先出。从一端放入元素的操作称为入队，取出元素为出队

4、链表

链表是物理存储单元上非连续的、非顺序的存储结构，数据元素的逻辑顺序是通过链表的指针地址实现，每个元素包含两个结点，一个是存储元素的数据域 (内存空间)，另一个是指向下一个结点地址的指针域。根据指针的指向，链表能形成不同的结构，例如单链表，双向链表，循环链表等。

5、树

树是一种数据结构，它是由n（n>=1）个有限节点组成一个具有层次关系的集合。把它叫做 “树” 是因为它看起来像一棵倒挂的树，也就是说它是根朝上，而叶朝下的。它具有以下的特点：

每个节点有零个或多个子节点；

没有父节点的节点称为根节点；

每一个非根节点有且只有一个父节点；

除了根节点外，每个子节点可以分为多个不相交的子树；

在日常的应用中，我们讨论和用的更多的是树的其中一种结构，就是二叉树。

6、散列表

散列表，也叫哈希表，是根据关键码和值 (key和value) 直接进行访问的数据结构，通过key和value来映射到集合中的一个位置，这样就可以很快找到集合中的对应元素。

7、堆

堆是一种比较特殊的数据结构，可以被看做一棵树的数组对象，具有以下的性质：

堆中某个节点的值总是不大于或不小于其父节点的值；

堆总是一棵完全二叉树。

将根节点最大的堆叫做最大堆或大根堆，根节点最小的堆叫做最小堆或小根堆。常见的堆有二叉堆、斐波那契堆等。

堆的定义如下：n个元素的序列{k1,k2,ki,…,kn}当且仅当满足下关系时，称之为堆。

(ki <= k2i,ki <= k2i+1)或者(ki >= k2i,ki >= k2i+1), (i = 1,2,3,4…n/2)，满足前者的表达式的成为小顶堆，满足后者表达式的为大顶堆

8、图

图是由结点的有穷集合V和边的集合E组成。其中，为了与树形结构加以区别，在图结构中常常将结点称为顶点，边是顶点的有序偶对，若两个顶点之间存在一条边，就表示这两个顶点具有相邻关系。

四、网页上哪里可以看到请求的所有信息

在网页刷新的同时，出现密密麻麻的记录，显示出了发送的请求，收到的信息等。

五、js继承的6种方式（转自：https://www.cnblogs.com/ranyonsue/p/11201730.html）

想要继承，就必须要提供个父类（继承谁，提供继承的属性）

1、原型链继承

重点：让新实例的原型等于父类的实例。

特点：1、实例可继承的属性有：实例的构造函数的属性，父类构造函数属性，父类原型的属性。（新实例不会继承父类实例的属性！）

缺点：1、新实例无法向父类构造函数传参。

2、继承单一。

3、所有新实例都会共享父类实例的属性。（原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原型属性也会被修改！）

2、借用构造函数继承

重点：用.call()和.apply()将父类构造函数引入子类函数（在子类函数中做了父类函数的自执行（复制））

特点：1、只继承了父类构造函数的属性，没有继承父类原型的属性。

2、解决了原型链继承缺点1、2、3。

3、可以继承多个构造函数属性（call多个）。

4、在子实例中可向父实例传参。

缺点：1、只能继承父类构造函数的属性。

2、无法实现构造函数的复用。（每次用每次都要重新调用）

3、每个新实例都有父类构造函数的副本，臃肿。

3、组合继承（组合原型链继承和借用构造函数继承）（常用）

重点：结合了两种模式的优点，传参和复用

特点：1、可以继承父类原型上的属性，可以传参，可复用。

2、每个新实例引入的构造函数属性是私有的。

缺点：调用了两次父类构造函数（耗内存），子类的构造函数会代替原型上的那个父类构造函数。

4、原型式继承

重点：用一个函数包装一个对象，然后返回这个函数的调用，这个函数就变成了个可以随意增添属性的实例或对象。object.create()就是这个原理。

特点：类似于复制一个对象，用函数来包装。

缺点：1、所有实例都会继承原型上的属性。

2、无法实现复用。（新实例属性都是后面添加的）

5、寄生式继承

重点：就是给原型式继承外面套了个壳子。

优点：没有创建自定义类型，因为只是套了个壳子返回对象（这个），这个函数顺理成章就成了创建的新对象。

缺点：没用到原型，无法复用。

6、寄生组合式继承（常用）

寄生：在函数内返回对象然后调用

组合：1、函数的原型等于另一个实例。2、在函数中用apply或者call引入另一个构造函数，可传参

重点：修复了组合继承的问题

六、JS数组转字符串（3种方法）****（转自：http://c.biancheng.net/view/5673.html）

JavaScript 允许数组与字符串之间相互转换。其中 Array 方法对象定义了 3 个方法，可以把数组转换为字符串。

1、toString()：将数组转换成一个字符串

2、toLocalString() ：把数组转换成本地约定的字符串

与 toString() 方法用法基本相同，主要区别在于 toLocalString() 方法能够使用用户所在地区特定的分隔符把生成的字符串连接起来，形成一个字符串。

join()：将数组元素连接起来以构建一个字符串

把数组转换为字符串，不过它可以指定分隔符。在调用 join() 方法时，可以传递一个参数作为分隔符来连接每个元素。如果省略参数，默认使用逗号作为分隔符，这时与 toString() 方法转换操作效果相同。

如何把字符串转化为数组？

split() 方法是 String 对象方法，与 join() 方法操作正好相反。该方法可以指定两个参数，第 1 个参数为分隔符，指定从哪儿进行分隔的标记；第 2 个参数指定要返回数组的长度。

七、javascript中call()、apply()、bind()的用法（转自：https://www.cnblogs.com/Shd-Study/p/6560808.html）

输出：

obj.objAge; //17

obj.myFun() //小张年龄undefined

输出：

shows() //盲僧

第一个打印里面的this 指向obj，第二个全局声明的shows()函数 this 是window ；**

call()、apply()、bind() 都是用来重定义 this 这个对象的

obj.myFun.call(db)；　　　　//德玛年龄99

obj.myFun.apply(db);　　　 //德玛年龄99

obj.myFun.bind(db)();　　　//德玛年龄99

以上出了bind 方法后面多了个 () 外 ，结果返回都一致！

由此得出结论，bind 返回的是一个新的函数，你必须调用它才会被执行

对比call 、bind 、 apply 传参情况下

从上面四个结果不难看出:

call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，第二个参数差别就来了：

call 的参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔，直接放到后面 obj.myFun.call(db,‘成都’, … ,‘string’ )。

apply 的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,[‘成都’, …, ‘string’ ])。

bind 除了返回是函数以外，它 的参数和 call 一样。

当然，三者的参数不限定是 string 类型，允许是各种类型，包括函数 、 object 等等！

八、const用法（转自：https://www.jb51.net/article/182185.htm）

const定义的变量不可以修改，而且必须初始化。

const 声明一个只读的常量，一旦声明，常量的值就不能改变。

所谓的常量就是不能改变的值。

上面代码表明改变常量的值会报错。

const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

我们都知道const一般声明一个只读的常量，声明之后就不能修改了，并且声明时必须初始化

特殊情况：

可以理解为:

dog中存储的是对象的房间号（内存地址）

dog.name= ‘wangcai’，在给对象添加属性的过程，并没有改变这个地址，所以结果正常显示

其实const保证的并不是变量的值不动，而是变量指向的内存地址不得改动

● js看到变量message后，会给message分配一个空房间（内存空间）

看到等号右侧的字符串‘hello’时，会立马给它安排另一个房间，并把‘hello’放到这个房间

● js会拿小本本抄下这个房间的房间号（内存地址）

● 把这个房间号放到message这个房间里面，这时message中存储的就是hello字符串的存储地址（即指针）

当我们再次赋值时

js会将存储‘word’字符串的地址赋给message，而message又是用const定义的变量，不可以改变变量里存储的内存地址，这时就会❌报错

重点:const保证的并不是变量的值不动，而是变量指向的内存地址不得改动

九、js选择器

一、原生JS选择器

JS选择器常用的有getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll()

A： getElementById(ID): 返回对指定ID的第一个对象的引用，如果在文档中查找一个特定的元素，最有效的方法是getElementById()

B: getElementsByName(name): 返回文档中name属性为name值的元素，因为name属性值不是唯一的，所以查询到的结果有可能返回的是一个数组，而不是一个元素。

C: getElementsByTagName(tagname): 返回文档中指定标签的元素

D: getElementsByClassName():返回文档中所有指定类名的元素

E: querySelector():返回文档中匹配指定css选择器的第一个元素

F: querySelectorAll():返回文档中匹配指定css选择器的第一个元素

TCP协议

• TCP 和 UDP 的区别？
• TCP 三次握手的过程？
• 为什么是三次而不是两次、四次？
• 三次握手过程中可以携带数据么？
• 说说 TCP 四次挥手的过程
• 为什么是四次挥手而不是三次？
• 半连接队列和 SYN Flood 攻击的关系
• 如何应对 SYN Flood 攻击？
• 介绍一下 TCP 报文头部的字段
• TCP 快速打开的原理(TFO)
• 说说TCP报文中时间戳的作用？
• TCP 的超时重传时间是如何计算的？
• TCP 的流量控制
• TCP 的拥塞控制
• 说说 Nagle 算法和延迟确认？
• 如何理解 TCP 的 keep-alive？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

浏览器篇

• 浏览器缓存?
• 说一说浏览器的本地存储？各自优劣如何？
• 说一说从输入URL到页面呈现发生了什么？
• 谈谈你对重绘和回流的理解
• XSS攻击
• CSRF攻击
• HTTPS为什么让数据传输更安全？
• 实现事件的防抖和节流？
• 实现图片懒加载？

计算的？

• TCP 的流量控制
• TCP 的拥塞控制
• 说说 Nagle 算法和延迟确认？
• 如何理解 TCP 的 keep-alive？

[外链图片转存中…(img-nNRqldwF-1714239551786)]

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

浏览器篇

• 浏览器缓存?
• 说一说浏览器的本地存储？各自优劣如何？
• 说一说从输入URL到页面呈现发生了什么？
• 谈谈你对重绘和回流的理解
• XSS攻击
• CSRF攻击
• HTTPS为什么让数据传输更安全？
• 实现事件的防抖和节流？
• 实现图片懒加载？