前端基础面试题(一)

摘要：最近，看了下慕课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://www.rhkb.cn/news/264051.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ARM处理器有哪些工作模式和寄存器？各寄存器作用是什么？ARM异常中断处理流程？

ARM处理器有哪些工作模式和寄存器？各寄存器作用是什么？ARM异常中断处理流程？

《嵌入式工程师自我修养/C语言》系列——ARM处理器有哪些工作模式和寄存器？各寄存器作用是什么？ 一、ARM处理器的工作模式及寄存器1.1 ARM处理器的工作模式1.2 ARM处理器中的寄存器 二、ARM 异常中断处理2.1 什么是异常？异常向量表是什么&…
阅读更多...
[RCTF2015]EasySQL1 题目分析与详解

[RCTF2015]EasySQL1 题目分析与详解

一、题目介绍： 1、题目来源： BUUCTF网址 2、题目介绍： 拿到flag。 二、解题思路： 我们发现题目首页有登录和注册账号两个选项，我们首先尝试注册账号，尝试注册username为admin的账号，输入密码…
阅读更多...
FPGA OSERDESE2

FPGA OSERDESE2

Output Parallel-to-Serial Logic Resources (OSERDESE2) OSERDESE2 在Xilinx 7 系列器件是一款专用的并行至串行转换器，具有特定的时钟和逻辑资源，旨在促进高速源同步接口的实现。每个OSERDESE2模块都包括一个专用的数据串行器和 3 状态控制。数据和 3 态串行器都可以在 SD…
阅读更多...
TVS管+二极管钳位电路的分析

TVS管+二极管钳位电路的分析

我们通常的电路中多用TVS管或者单二极管来进行钳位，TVS管二极管同时钳位的情况比较少见，这篇文章就是分析TVS管二极管同时钳位的电路，主要学习其分析思路。 电路如下图，就是个flyback。可以看到，电路中有个钳位电路&a…
阅读更多...
petalinux_zynq7 驱动DAC以及ADC模块之五：nodejs+vue3实现web网页波形显示

petalinux_zynq7 驱动DAC以及ADC模块之五：nodejs+vue3实现web网页波形显示

前文： petalinux_zynq7 C语言驱动DAC以及ADC模块之一：建立IPhttps://blog.csdn.net/qq_27158179/article/details/136234296petalinux_zynq7 C语言驱动DAC以及ADC模块之二：petalinuxhttps://blog.csdn.net/qq_27158179/article/details/1362…
阅读更多...
MySQL锁三部曲：临键、间隙与记录的奇妙旅程

MySQL锁三部曲：临键、间隙与记录的奇妙旅程

欢迎来到我的博客，代码的世界里，每一行都是一个故事 MySQL锁三部曲：临键、间隙与记录的奇妙旅程 前言临键锁的奥秘间隙锁记录锁 前言 在数据库世界中，锁是维护数据完整性的一种关键机制。而MySQL中的临键锁、间隙锁和记录锁则是锁…
阅读更多...
博客阿里云服务器2024年最新优惠价格表，61元起

博客阿里云服务器2024年最新优惠价格表，61元起

博客 阿里云服务器2024年最新优惠价表，轻量级应用服务器61元起，云服务器99元起 01-30 第591章 2024年阿里云服务器最新优惠价是多少？ 阿里云服务器的租用价格在不同时期是不同的。 进入2024年，阿里云服务器的优惠价格也发生了…
阅读更多...
【Python笔记-设计模式】桥接模式

【Python笔记-设计模式】桥接模式

一、说明 桥接模式是一种结构型设计模式， 主要用于将抽象部分与它的实现部分分离， 从而能在开发时分别使用，使系统更加灵活，易于扩展。 (一) 解决问题 所有 组合类的数量将以几何级数增长 抽象和实现分离：桥接模式可…
阅读更多...
K8S部署Java项目 pod报错 logs日志内容：no main manifest attribute, in app.jar

K8S部署Java项目 pod报错 logs日志内容：no main manifest attribute, in app.jar

天行健，君子以自强不息；地势坤，君子以厚德载物。 每个人都有惰性，但不断学习是好好生活的根本，共勉！ 文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。…
阅读更多...
通配符证书的作用

通配符证书的作用

通配符证书是一种 SSL/TLS 证书，可用于保护多个域（主机），由域名字段中的通配符 (*) 指示。这种证书主要用于具有许多子域的组织。通配符证书对主域及其所有一级子域有效。例如，一个针对 *.example.com 的通配符证书可以…
阅读更多...
SSM框架学习笔记07 | Spring MVC入门

SSM框架学习笔记07 | Spring MVC入门

文章目录 1. HTTP协议2. Spring MVC2.1. 三层架构2.2. MVC（解决表现层的问题）2.3. 核心组件 3. Thymeleaf3.1. 模板引擎3.2. Thymeleaf3.3. 常用语法 代码 1. HTTP协议 网址：https://www.ietf.org/ （官网网址） https:…
阅读更多...
在苹果电脑MAC上安装Windows10（双系统安装的详细图文步骤教程）

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

在苹果电脑MAC上安装Windows10（双系统安装的详细图文步骤教程） 一、准备工作准备项1：U盘作为系统安装盘准备项2：您需要安装的系统镜像 二、启动转换助理步骤1：找到启动转换助理步骤2：启动转换助理步骤3&…
阅读更多...
Unity接入SQLite (一):SQLite介绍

Unity接入SQLite (一):SQLite介绍

1.简介 SQLite是一个开源的嵌入式关系数据库管理系统。它是一种轻量级的数据库引擎，不需要单独的服务器进程，可以直接嵌入到应用程序中使用。Sqlite使用简单、高效，并且具有对标准SQL的完整支持。它适用于需要在本地存储和访问数据的应用程序…
阅读更多...
docker-compose 搭建laravel环境

docker-compose 搭建laravel环境

laravel环境包含nginx,mysql,php7.4,redis 一、安装好docker后pull镜像 1.nginx镜像 docker pull nginx:latest单独启动容器 docker run --name nginx -p 80:80 -d nginx 2.php镜像 docker pull php:7.4-fpm3.mysql镜像 docker pull mysql:5.74.redis镜像 docker pull r…
阅读更多...
(done) 两个矩阵 “相似” 是什么意思？

(done) 两个矩阵 “相似” 是什么意思？

参考视频：https://www.bilibili.com/video/BV1zu411673J/?spm_id_from333.337.search-card.all.click&vd_source7a1a0bc74158c6993c7355c5490fc600 参考资料：https://baike.baidu.com/item/%E7%9B%B8%E4%BC%BC%E7%9F%A9%E9%98%B5/10369874?frge_a…
阅读更多...
核密度分析

核密度分析

一.算法介绍 核密度估计（Kernel Density Estimation）是一种用于估计数据分布的非参数统计方法。它可以用于多种目的和应用，包括： 数据可视化：核密度估计可以用来绘制平滑的密度曲线或热力图，从而直观地表…
阅读更多...
一键生成请求方法的工具 —— OpenAPI Typescript Codegen

一键生成请求方法的工具 —— OpenAPI Typescript Codegen

文章目录 用法自定义请求参数的方法1）使用代码生成器提供的全局参数修改对象2）直接定义 axios 请求库的全局参数，比如：全局请求响应拦截器 报错解决 用法 首先下载axios npm install axios官网：https://github.com/f…
阅读更多...
基于ssm框架的高校班级管理系统设计与实现

基于ssm框架的高校班级管理系统设计与实现

为解决当前高校班级管理中管理方式落后、手段落后及效率低下等问题而以当前主流的互联网技术设计一款高校班级管理系统。该系统采用B/S模式的设计思路而将前端（JSP技术）和后端（SSM框架MySQL数据库）整合于一体并通过Java语言代码编…
阅读更多...
win10编译openjdk源码

win10编译openjdk源码

上篇文章作者在ubuntu系统上实践完成openjdk源码的编译，但是平常使用更多的是window系统，ubuntu上编译出来JDK无法再windows上使用。所以作者又花费了很长时间在windows系统上完成openjdk源码的编译，陆续花费一个月的时间终于完成了编译。 本…
阅读更多...
前端导出下载文件后提示无法打开文件

前端导出下载文件后提示无法打开文件

问题 项目中的导出文件功能，导出下载后的文件打开提示如下： 原因 对返回的响应数据进行打印，发现响应数据为字符串格式，前期规划的后端返回数据应该 blob 对象的。后经排查后发现是请求头缺少了响应数据格式的配置，应…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023