2024年最全【面试题】JavaScript 你常用的 函数有哪些呢 (12个），2024年最新2024最新中高级前端面试题目

计算机网络

• HTTP 缓存

• 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

• HTTP 常用的请求方式，区别和用途？

• HTTPS 是什么？具体流程

• 三次握手和四次挥手

• 你对 TCP 滑动窗口有了解嘛？

• WebSocket与Ajax的区别

• 了解 WebSocket 嘛？

• HTTP 如何实现长连接？在什么时候会超时？

• TCP 如何保证有效传输及拥塞控制原理。

• TCP 协议怎么保证可靠的，UDP 为什么不可靠？

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

算法

• 链表

• 字符串

• 数组问题

• 二叉树

• 排序算法

• 二分查找

• 动态规划

• BFS

• 栈

• DFS

• 回溯算法

  

对数组的元素进行重新排序是一项非常重要的技巧，但是原生 Array 中并没有这项功能。

const shuffle = (arr) => arr.sort(() => Math.random() - 0.5)

const arr = [1, 2, 3, 4, 5]
console.log(shuffle(arr))
复制代码

复制到剪切板

复制到剪切板是一项非常实用且能够提高用户便利性的功能。

const copyToClipboard = (text) => navigator.clipboard && navigator.clipboard.writeText && navigator.clipboard.writeText(text)

copyToClipboard("Hello World!")
复制代码

检测暗色主题

暗色主题日益普及，很多用的都会在设备中启用案模式，我们将应用程序切换到暗色主题可以提高用户体验度。

const isDarkMode = () => window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;

console.log(isDarkMode())
复制代码

滚动到顶部

将元素滚动到顶部最简单的方法是使用 scrollIntoView。设置 block 为 start 可以滚动到顶部；设置 behavior 为 smooth 可以开启平滑滚动。

const scrollToTop = (element) => 
  element.scrollIntoView({ behavior: "smooth", block: "start" });
复制代码

滚动到底部

与滚动到顶部一样，滚动到底部只需要设置 block 为 end 即可。

const scrollToBottom = (element) => 
  element.scrollIntoView({ behavior: "smooth", block: "end" });
复制代码

检测元素是否在屏幕中

检查元素是否在窗口中最好的方法是使用 IntersectionObserver。

const callback = (entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // `entry.target` is the dom element
      console.log(`${entry.target.id} is visible`);
    }
  });
};

const options = {
  threshold: 1.0,
};
const observer = new IntersectionObserver(callback, options);
const btn = document.getElementById("btn");
const bottomBtn = document.getElementById("bottom-btn");
observer.observe(btn);
observer.observe(bottomBtn);
复制代码

检测设备

使用 navigator.userAgent 来检测网站运行在哪种平台设备上。

const detectDeviceType = () =>
  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent
  ) ? "Mobile" : "Desktop";

console.log(detectDeviceType());
复制代码

隐藏元素

我们可以将元素的 style.visibility 设置为 hidden，隐藏元素的可见性，但元素的空间仍然会被占用。如果设置元素的 style.display 为 none，会将元素从渲染流中删除。

const hideElement = (el, removeFromFlow = false) => {
  removeFromFlow ? (el.style.display = 'none')
  : (el.style.visibility = 'hidden')
}
复制代码

从 URL 中获取参数

JavaScript 中有一个 URL 对象，通过它可以非常方便的获取 URL 中的参数。

**TCP协议**

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

![](https://img-blog.csdnimg.cn/img_convert/905326f1496c4a24b34d8335141b84a5.webp?x-oss-process=image/format,png)

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

#### 浏览器篇

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

![](https://img-blog.csdnimg.cn/img_convert/26250d8f54dca49c35745bffecb21478.webp?x-oss-process=image/format,png)



s/4304bb5a486d4c3ab8389e65ecb71ac0)**

#### 浏览器篇

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

[外链图片转存中...(img-QrYjmQbX-1715668470216)]