前端基础面试题(一)

摘要：最近，看了下慕课2周刷完n道面试题，记录下...

1.请说明Ajax、Fetch、Axios三者的区别

        三者都用于网络请求，但维度不同：

  • Ajax（Asynchronous Javascript ang XML），是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容的技术。
  • Fetch，浏览器原生API，用于网络请求，和XMLHttpRequest一个级别；Fetch语法更简介易用，且支持Promise。
  • Axios最常用的网络请求lib库（随着Vue火爆起来），内部可用XMLHttpRequest和Fetch来实现， 官网：

Axios中文文档 | Axios中文网Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.jsicon-default.png?t=N7T8https://www.axios-http.cn/        使用原生的 XMLHttpRequest 对象实现 Ajax 请求，需要编写大量的冗余代码，而且不能支持 Promise 和 async/await 等现代 JavaScript 特性。Fetch 提供了一组丰富的 API，可以配置请求头、请求体、响应类型等参数，也可以取消请求、处理跨域请求等复杂场景。但是，Fetch 也存在一些限制，例如无法中止请求、不支持进度监视等。

        使用XmlHttpRequest实现Ajax

//1. 创建XMLHttpRequest对象 
var xmlhttp; // 用于保存创建好的对象 
/** 
* XMLHttpRequest是Ajax的核心 
* 它是一个构造函数，可以通过new关键字来调用 
* Ajax使用该对象发起请求、接收响应 
* 语法：var 变量名 = new XMLHttpRequest(); 
* XMLHttpRequest并不是W3C的标准，不同浏览器的创建方式不同 
* 例如：Chrome、Firefox、IE7+、Opera、Safari等浏览器使用的是XMLHttpRequest 
* 注意：IE5和IE6不支持该对象，它们使用ActiveXObject 
*/ 
// 判断浏览器是否支持该对象 
if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } 
else { // IE5和IE6使用的是ActiveXObjectxmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
} /** 
* 先创建请求，open()方法，指定请求类型和URL 
* 语法：xmlhttp.open("请求类型","请求的URL",是否异步) * 参数：请求类型，表示请求的类型，例如GET、POST等 
* 请求的URL，表示请求的地址，可以是相对地址，也可以是绝对地址 
* 是否异步，表示是否采用异步方式，如果为true，表示异步，如果为false，表示同步 
* 例如：xmlhttp.open("GET","/content",true); 
* 注意：该方法并不会真正发送请求，而只是启动一个请求以备发送 
* 然后调用send()方法，发送请求 
*/ 
// 2. 配置请求信息
xmlhttp.open("GET", "/content");
// 3. 发送Ajaxxmlhttp.send(); 
// 4. 处理服务器响应 
/** 
* XMLHttpRequest.onreadystatechange()是一个事件处理函数，当XMLHttpRequest对象的 
* readyState属性值发生变化时，该函数将被触发。* 以下是readyState属性的值说明： 
* 0：表示XMLHttpRequest对象正在初始化，尚未发送请求。 
* 1：表示请求已经发送，但尚未收到响应。 
* 2：表示请求已经发送，并且服务器已经处理请求，正在等待服务器响应。 
* 3：表示请求已经发送，并且服务器已经处理请求，并且响应已经就绪，但尚未读取。 
* 4：表示请求已经发送，并且服务器已经处理请求，并且响应已经就绪，并且响应的内容已经读取完毕。 */ 
xmlhttp.onreadystatechange = function () { 
// 响应已被接受且服务器处理成功时才执行（响应状态码200） 
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { // 获取响应体的文本 var t = xmlhttp.responseText; console.log(t);             document.getElementById("divContent").innerHTML = document.getElementById("divContent").innerHTML + "
" + t; } 
}

        使用Fetch实现Ajax

// 创建一个函数来发送 Fetch 请求
function fetchData(url) {fetch(url).then(response => {if (!response.ok) {throw new Error('Network response was not ok');}return response.json(); // 解析 JSON 数据}).then(data => {console.log(data); // 输出获取到的数据}).catch(error => {console.error('There was a problem with your fetch operation:', error);});
}// 调用函数发送 Fetch 请求
fetchData('https://jsonplaceholder.typicode.com/posts/1');

2. 节流和防抖

        防抖是指在连续触发事件后，等待一定时间间隔（例如 200ms）后再执行函数。如果在等待时间间隔内再次触发了事件，则重新计时，直到等待时间间隔内没有再次触发事件，才最终执行函数。这样可以确保函数在连续触发事件后等待一段时间再执行，避免频繁触发导致函数多次执行。如下图

        防抖函数实现

function debounce(func, delay=200) {let timerId = 0return function (...args) {if (timerId) clearTimeout(timerId)timerId = setTimeout(() => {func.apply(this, args);   //透传this和参数timerId = 0}, delay);};
}

        节流是指在一定时间间隔内最多执行一次函数。当事件触发时，如果距离上次执行函数的时间小于指定的时间间隔，则不会执行该函数；如果距离上次执行函数的时间大于等于指定的时间间隔，则会执行该函数。这样可以确保函数在一定时间间隔内最多只被执行一次。

        节流函数实现

function throttle(func, delay) {let timerId = 0return function (...args) {if (timerId) returntimerId = setTimeout(() => {func.apply(this, args);   //透传this和参数timerId = 0}, delay);};
}

        总结起来，节流是限制执行频率，有节奏的执行；防抖是限制执行次数，多次密集的触发值执行一次，节流关注过程，防抖关注结果。节流的使用场景包括：元素拖拽、滚动事件、窗口调整大小、按钮点击、搜索框输入等；防抖的使用场景包括：输入框输入、表单验证、文本编辑器、窗口缩放等。

        实际工作中通常使用lodash中的节流和防抖函数。

3. px % em rem vw/vh有什么区别？

px（像素）：px 是绝对单位，也是最常见的长度单位，表示屏幕上的一个像素点，常用于设定固定尺寸的元素。

%（百分比）：% 是相对单位，相对于父元素的宽度比例。例如，设置元素的宽度为50%，表示该元素的宽度是其父元素宽度的一半。

em：em 是相对单位，相对于元素自身的字体font-size大小计算。如果没有设置字体大小，则 1em 默认等于父元素的字体大小，常用于设置文字大小。

rem（根元素em）：rem 也是相对单位，但相对于根元素（html 元素）的字体大小计计算。使用 rem 可以有效避免多层嵌套带来的计算复杂性，更方便地控制整个页面的布局

vw（视窗宽度单位）：vw 表示视窗（viewport）宽度的百分比，1vw 等于视窗宽度的1%。使用 vw 单位可以根据视窗的大小来调整元素的大小，适合响应式设计。

vh（视窗高度单位）：vh 表示视窗（viewport）高度的百分比，1vh 等于视窗高度的1%。与 vw 类似，使用 vh 单位可以根据视窗的高度来调整元素的大小，实现响应式设计。

注：vmin表示vw/vh取最小值；vmax是vw/vh取最大值。

4. 什么时候不能使用箭头函数

        首先，说下箭头函数的缺点：

  • 没有arguments
function fn1() {console.log('arguments1', arguments)
}
fn1(100,200)   // 正常输出argumentsconst fn2 = () => {console.log('arguments2', arguments)
}
fn2(100,200)

  • 箭头函数没有自己的this（继承父作用域的this），无法通过apply call bind 改变this
const fn3 = () => {console.log('this',this)
}
fn3()
fn3.call({x:100})
function fn4() {console.log('this4',this)
}
fn4.call({x:100})

  • 可读性降低

        由于箭头函数的这些缺点，导致一些情况下不适合使用箭头函数：

        1.对象方法

const obj = {name: 'czh',getName: function () {return this.name}
}
console.log(obj.getName())   // 正常返回结果czhconst obj2 = {name: 'czh2',getName: () => {  // this并不指向objreturn this.name}
}
console.log(obj2.getName())

        2. 原型方法

        3. 构造函数

const Foo = (name, city) => {this.name = namethis.city = city
}
const f = new Foo('czh', '北京')  // VM379:5 Uncaught TypeError: Foo is not a constructor

        4. 动态上下文中的回调函数

// 例如下面按钮中添加点击事件，不用到this时没有问题，用到this则不适用箭头函数
const btn1 = document.getElementById('btn1')
btn.addEventListener('click', () => {//console.log(this === window)this.innerHTML = 'clicked'
})

        5. Vue生命周期和method

        Vue本质上是一个JS对象，对象的方法不能使用箭头函数，参考第一条

        注：React组件（非Hooks）他本质上是一个ES6 class，可以使用箭头函数

class Foo {constructor (name, city) {this.name = namethis.city = city}getName = () => {return this.name}
}
const f = new Foo('czh', '北京')
console.log(f.getName())

        总之，熟练使用箭头函数，要对this arguments足够敏感

5. 请描述TCP三次握手和四次挥手

        这个题目是个常考题，记得我毕业那年就被不止一家公司问过

        建立TCP连接

        先建立连接（确保双方都有收发消息的能力）

        再传输内容（如发送一个get请求）

        网络连接时TCP协议，传输内容是http协议

三次握手-建立连接

  1. 第一步：客户端发送 SYN
    • 客户端向服务器发送一个带有 SYN（同步序列编号）标志的数据包，表示客户端请求建立连接。
  2. 第二步：服务器发送 SYN + ACK
    • 服务器收到客户端发送的 SYN 数据包后，会回复一个带有 SYN 和 ACK 标志的数据包，表示确认客户端的请求，并表明服务器也希望建立连接。
  3. 第三步：客户端发送 ACK
    • 客户端收到服务器发送的 SYN + ACK 数据包后，会向服务器发送一个带有 ACK 标志的数据包，表示客户端也确认建立连接。此时，TCP 连接建立成功，可以开始进行数据传输。

四次挥手-断开连接

  1. 第一步：客户端发送 FIN
    • 客户端在完成数据传输后，向服务器发送一个带有 FIN（结束）标志的数据包，表示客户端不再发送数据，并请求关闭连接。
  2. 第二步：服务器发送 ACK
    • 服务器收到客户端发送的 FIN 数据包后，会向客户端发送一个带有 ACK 标志的数据包，表示确认客户端的关闭请求，但仍然允许数据传输。
  3. 第三步：服务器发送 FIN
    • 当服务器准备好关闭连接时，会向客户端发送一个带有 FIN 标志的数据包，表示服务器已经完成数据传输，请求关闭连接。
  4. 第四步：客户端发送 ACK
    • 客户端收到服务器发送的 FIN 数据包后，会向服务器发送一个带有 ACK 标志的数据包，表示确认服务器的关闭请求。此时，TCP 连接关闭完成，双方都结束了数据传输。

6. for...in和for...of的区别

        遍历的内容：for...in遍历的是key，可以通过键访问对应的值; for...of遍历的是value

const arr = [10, 20, 30]
for (let key in arr) {console.log(key)   // 0  1  2
}
for (let val of arr) {console.log(val)   // 10  20  30
}

        适用的数据类型不同：for...in：用于遍历对象的可枚举属性(对象、数组和字符串)，包括原型链上的属性； for...of：用于遍历可迭代对象，如数组、字符串、Set、Map，类数组对象（arguments、NodeList） 等。

例如： 遍历对象 ： for...in 可以， for...of 不可以

遍历Map Set： for...in 不可以， for...of 可以

遍历generateor: for...in 不可以， for...of 可以

const obj = {name: 'czh',city: '北京'
}
for (let val of obj) {  // 对象不可以用for...ofconsole.log(val)   // VM449:5 Uncaught TypeError: obj is not iterable
}const map = new Map([['x', 100],['y', 200],['z', 300]
])
for (let n of map) {   //map可用for...of,不可用for...i nconsole.log(n)   
}function* foo() {yield 10yield 20yield 30
}
for(let n of foo()){  //generater可用for...of,不可用for...i nconsole.log(n) 
}

相关问题：for await...of有什么作用？

for await...of 是 ES2018 中新增的一个语法，它是 for...of 的异步版本，用于遍历多个Promise。

function createPromise(val) {return new Promise ((resolve) => {setTimeout(() => {resolve(val)},1000)})
}
(async function () {const p1 = createPromise(100)const p2 = createPromise(200)const p3 = createPromise(300)const res1 = await p1console.log(res1)const res2 = await p2console.log(res2)const res3 = await p3console.log(res3)const list = [p1,p2,p3]Promise.all(list).then(res => console.log(res))  // API形式for await(let res of list) {  // 循环中获取所有Promise运行结果console.log(res)} })()

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://xiahunao.cn/news/2810071.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

Matryoshka Representation Learning (MRL)-俄罗斯套娃向量表征学习

Matryoshka Representation Learning (MRL)-俄罗斯套娃向量表征学习

前言 在2024年1月底OpenAI发布新的向量模型，并提到新的向量模型支持将向量维度缩短。向量模型支持缩短维度而又不会威胁到向量的表示能力的原因在于使用了Matryoshka Representation Learning。 Matryoshka Representation Learning (MRL)是2022年发表的论文&#…
阅读更多...
Redis 服务集群、哨兵、缓存及持久化的实现原理和应用场景

Redis 服务集群、哨兵、缓存及持久化的实现原理和应用场景

Redis 是一种高性能的键值存储系统，已经成为了许多企业和互联网公司的核心技术之一。本文将介绍 Redis 的服务集群、哨兵以及缓存实现原理和应用场景，以帮助读者更好地理解和使用 Redis。 引言： 随着互联网应用规模不断扩大，Redi…
阅读更多...
RocketMQ - RocketMQ的架构原理和使用方法

RocketMQ - RocketMQ的架构原理和使用方法

1. MQ如何集群化部署来支撑高并发访问 假设RocketMQ部署在一台机器上，即使这台机器的配置很高，但是一般来说一台机器也就支撑10万的并发访问。 这个时候，假设有大量的系统都要往RocketMQ里高并发的额写入消息，可能达到每秒有几十…
阅读更多...
canvas水波纹效果，jquery鼠标水波纹插件

canvas水波纹效果，jquery鼠标水波纹插件

canvas水波纹效果&#xff0c;jquery鼠标水波纹插件 效果展示 jQuery水波纹效果&#xff0c;canvas水波纹插件 HTML代码片段 <div class"scroll04wrap"><h3>发展历程</h3><div class"scroll04"><p>不要回头&#xff0c;一…
阅读更多...
在苹果电脑MAC上安装Windows10（双系统安装的详细图文步骤教程）

在苹果电脑MAC上安装Windows10（双系统安装的详细图文步骤教程）

在苹果电脑MAC上安装Windows10&#xff08;双系统安装的详细图文步骤教程&#xff09; 一、准备工作准备项1&#xff1a;U盘作为系统安装盘准备项2&#xff1a;您需要安装的系统镜像 二、启动转换助理步骤1&#xff1a;找到启动转换助理步骤2&#xff1a;启动转换助理步骤3&…
阅读更多...
java接受命令行输入

java接受命令行输入

在Java中&#xff0c;你可以使用​​Scanner​​类来接受命令行输入。以下是一个简单的例子&#xff0c;演示如何从命令行接受输入&#xff1a; import java.util.Scanner;public class CommandLineInputExample {public static void main(String[] args) {// 创建一个Scanner…
阅读更多...
linux服务器vi文件中文乱码

linux服务器vi文件中文乱码

服务器vi编辑中文乱码 cat 文本是中文 可以编辑 vi /etc/environment 文件修改为utf8中文字符集 LANGzh_CN.UTF-8 LANGUAGEen_US:en LC_CTYPE"zh_CN.UTF-8" LC_NUMERIC"zh_CN.UTF-8" LC_TIME"zh_CN.UTF-8" LC_COLLATE"zh_CN.UTF-8"…
阅读更多...
48.仿简道云公式函数实战-文本函数-EXACT

48.仿简道云公式函数实战-文本函数-EXACT

1. EXACT函数 比较两个字符串是否完全相同&#xff08;区分大小写&#xff09;。完全相同则返回 true&#xff0c;否则返回 false。 2. 函数用法 EXACT(text1,text2) 3. 函数示例 比较两个字符串是否完全相同&#xff08;区分大小写&#xff09;。完全相同则返回 true&…
阅读更多...
有效涨点，增强型 YOLOV8 与多尺度注意力特征融合，附代码，详细步骤

有效涨点，增强型 YOLOV8 与多尺度注意力特征融合，附代码，详细步骤

目录 摘要 结构图 原理 代码实现 添加ymal文件 实验结果 可接论文指导----------> v jiabei-545 完整代码&#xff08;失效 -----------&#x1f446; &#xff09; 执行程序流程 摘要 在本实验中&#xff0c;我们通过将双层路由注意&#xff08;BRA&#xff09;…
阅读更多...
python中的 continue break 以及pass

python中的 continue break 以及pass

在python中 continue 以及 break 的作用都用于跳出循环,不同的是continue是跳出当前循环,而break是跳出循环 具体图解如下 continue 执行流程图&#xff1a; break 执行流程图&#xff1a; 他们两个在while循环和for循环中分别为 在for循环中执行过程为 当循环体执行到cont…
阅读更多...
linux---nginx基础

linux---nginx基础

目录 一、Nginx的概念 二、Nginx常用功能 1、HTTP(正向)代理&#xff0c;反向代理 1.1正向代理 1.2 反向代理 2、负载均衡 2.1 轮询法&#xff08;默认方法&#xff09; 2.2 weight权重模式&#xff08;加权轮询&#xff09; 2.3 ip_hash 3、web缓存 三、基础特性 四…
阅读更多...
Jitsi Meet 大型视频会议调优方案

Jitsi Meet 大型视频会议调优方案

jitsi meet 大型视频会议调优方案 在举办一些大型会议的时候，比如100个人会议，为了节约宽带和节省资源，我们并不会选择传输全部的音视频资源。 举个例子，比如100个人线下会议，如果大家都说话的情况下，大家要么听不清，要么听得是声音最大的那几个人。 视频会议也可以借…
阅读更多...
赵丽颖林更新《与凤行》传乌龙！惊艳特效惹争议

赵丽颖林更新《与凤行》传乌龙！惊艳特效惹争议

古装偶像剧《与凤行》是收视女王赵丽颖和实力小生林更新继《楚乔传》的再度合作&#xff0c;“星月”CP时隔多年的二搭还没开播&#xff0c;就已经把观众的期待值高高拉起。 《与凤行》预告惊艳四座&#xff0c;特效究竟出自谁手&#xff1f; 观众早已苦“五毛特效”久矣&…
阅读更多...
项目：shell实现多级菜单脚本编写

项目：shell实现多级菜单脚本编写

目录 1. 提示 2. 演示效果 2.1. 一级菜单 2.2. 二级菜单 2.3. 执行操作 3. 参考代码 1. 提示 本脚本主要实现多级菜单效果&#xff0c;并没有安装LAMP、LNMP环境&#xff0c;如果要用在实际生成环境中部署LNMP、LAMP环境&#xff0c;只需要简单修改一下就可以了。 2. 演…
阅读更多...
Pycharm环境中，python为变量赋值的时候，如何自动添加空格？

Pycharm环境中，python为变量赋值的时候，如何自动添加空格？

在python中&#xff0c;为变量赋值的时候&#xff0c;如果没有加入空格&#xff0c;代码底部会有灰色波浪线&#xff0c;说明不符合Python规范。 可以在菜单栏选择code&#xff0c;reformat code。重新格式化代码&#xff0c;所有代码会自动格式化。 快捷方式为&#xff1a;ct…
阅读更多...
java数据结构与算法刷题-----LeetCode98. 验证二叉搜索树

java数据结构与算法刷题-----LeetCode98. 验证二叉搜索树

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 文章目录 1. 法一&#xff1a;利用BST性质进行递归2. 法二&#xff1a;利用…
阅读更多...
CUDA 编程指南 —— 编程接口之CUDA Runtime

CUDA 编程指南 —— 编程接口之CUDA Runtime

目录 CUDA Runtime 运行时在 cudart 库中实现&#xff0c;该库通过 cudart.lib 或 libcudart.a 静态链接到应用程序&#xff0c;或者通过 cudart.dll 或 libcudart.so 动态链接到应用程序。需要 cudart.dll 和/或 cudart.so 进行动态链接的应用程序通常将它们作为应用程序安装…
阅读更多...
音视频开发之旅（70）- 人脸修复画质增强之CodeFormer

音视频开发之旅（70）- 人脸修复画质增强之CodeFormer

目录 1. 效果展示和使用简介 2. CodeFormer原理浅析和代码实现分析 3. SDWebui中使用 4. 关键细节&#xff1a;保真度和质量之间的平衡 5. 参考资料 一、效果展示和使用简介 1.1 老旧照片修复 1.2 对AI生成照片修复 1.3 人脸修复 1.4 人脸色彩增强 1.5 去除人脸打码 1.6…
阅读更多...
k8s基础以及kubeadm安装部署

k8s基础以及kubeadm安装部署

目录 一、什么是k8s&#xff1f; 二、k8s的特性 三、核心组件以及工作流程 核心组件&#xff1a; 工作流程&#xff1a; 四、k8s网络 五、kubeadm部署 一、什么是k8s&#xff1f; K8S 的全称为 Kubernetes&#xff0c;用于自动部署、扩展和管理“容器化&#xff08;con…
阅读更多...
【牛客】2024牛客寒假算法基础集训营6ABCDEGHIJ

【牛客】2024牛客寒假算法基础集训营6ABCDEGHIJ

文章目录 A 宇宙的终结题目大意主要思路代码 B 爱恨的纠葛题目大意主要思路代码 C 心绪的解剖题目大意主要思路代码 D 友谊的套路题目大意主要思路代码 E 未来的预言题目大意主要思路代码 G 人生的起落题目大意主要思路代码 I 时空的交织题目大意主要思路代码 J 绝妙的平衡题目…
阅读更多...
最新文章

Copyright @ 2022~2023