前端基础面试题(一)

摘要：最近，看了下慕课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使用的是ActiveXObject
    xmlhttp = 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. 发送Ajax
 xmlhttp.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 = 0

  return function (...args) {
    if (timerId) clearTimeout(timerId)

    timerId = setTimeout(() => {
      func.apply(this, args);   //透传this和参数
      timerId = 0
    }, delay);
  };
}

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

        节流函数实现

function throttle(func, delay) {
  let timerId = 0

  return function (...args) {
    if (timerId) return

    timerId = 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)   // 正常输出arguments

const 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())   // 正常返回结果czh

const obj2 = {
  name: 'czh2',
  getName: () => {  // this并不指向obj
    return this.name
  }
}
console.log(obj2.getName())

        2. 原型方法

        3. 构造函数

const Foo = (name, city) => {
  this.name = name
  this.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 = name
    this.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...of
  console.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 n
  console.log(n)   
}

function* foo() {
  yield 10
  yield 20
  yield 30
}
for(let n of foo()){  //generater可用for...of,不可用for...i n
  console.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 p1
  console.log(res1)
  const res2 = await p2
  console.log(res2)
  const res3 = await p3
  console.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.mfbz.cn/a/410336.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

xss-跨站脚本攻击漏洞

xss-跨站脚本攻击漏洞

前备知识： Cookie和Session是Web开发中用于维持用户状态、跟踪用户会话的核心技术，它们的主要目的是在无状态的HTTP协议基础上实现有状态的用户交互。 **Cookie**： - Cookie是一种由服务器发送到客户端（通常是用户的浏览器&#x…
阅读更多...
【JavaEE】_HttpServlet类

【JavaEE】_HttpServlet类

目录 1. init方法 2. destory方法 3. service方法 4. servlet生命周期 前文已经提及到：servlet是tomcat提供的，用于操作HTTP协议的一组API，可以将这组API理解为HTTP服务器的框架； 编写一个servlet程序，往往都要继…
阅读更多...
【小尘送书-第十四期】《高效使用Redis：一书学透数据存储与高可用集群》

【小尘送书-第十四期】《高效使用Redis：一书学透数据存储与高可用集群》

大家好，我是小尘，欢迎你的关注！大家可以一起交流学习！欢迎大家在CSDN后台私信我！一起讨论学习，讨论如何找到满意的工作！ 👨‍💻博主主页：小尘要自信 &#x1…
阅读更多...
MySQL 篇-深入了解 DDL 语言（一）

MySQL 篇-深入了解 DDL 语言（一）

🔥博客主页： 【小扳_-CSDN博客】 ❤感谢大家点赞👍收藏⭐评论✍ 文章目录 1.0 MySQL 说明 2.0 DDL 语言 2.1 DDL 语言 - 定义数据库 2.1.1 创建数据库操作 2.1.2 查看数据库操作 2.1.3 使用数据库操作 2.1.4 删除数据库操作 2.2 DDL 语言 …
阅读更多...
芯片开发erp软件有哪些优势?

芯片开发erp软件有哪些优势?

随着科技的飞速发展，芯片开发行业正逐渐成为推动科技进步的关键力量。在这一领域中，企业资源规划(ERP)软件的应用正逐渐普及，为芯片开发企业带来了许多显著的优势。下面，我们将详细介绍芯片开发ERP软件的优势。 一、提升管理效率 …
阅读更多...
python JZ35 复杂链表的复制（剑指offer）

python JZ35 复杂链表的复制（剑指offer）

题目要求: 思路: 思路1：引入dict 思路1：双指针 代码如下: 思路1代码： # -*- coding:utf-8 -*- # class RandomListNode: # def __init__(self, x): # self.label x # self.next None # self.random None …
阅读更多...
第十二章 Linux——日志管理

第十二章 Linux——日志管理

第十二章 Linux——日志管理 基本介绍系统常用日志日志管理服务日志轮替基本介绍日志轮替文件命名logrotate配置文件自定义加入日志轮转应用实例 日志轮替机制原理查看内存日志 基本介绍 日志文件是重要的系统信息文件，其中记录了许多重要的系统事件，包…
阅读更多...
Vue.js+SpringBoot开发生活废品回收系统

Vue.js+SpringBoot开发生活废品回收系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容三、界面展示3.1 登录注册3.2 资源类型&资源品类模块3.3 回收机构模块3.4 资源求购/出售/交易单模块3.5 客服咨询模块 四、免责说明 一、摘要 1.1 项目介绍 生活废品回收系统是可持续发展的解决方案，旨在鼓…
阅读更多...
音视频数字化（数字与模拟-电影）

音视频数字化（数字与模拟-电影）

针对电视屏幕，电影被称为“大荧幕”，也是娱乐行业的顶尖产业。作为一项综合艺术，从被发明至今，近200年的发展史中，无人可以替代，并始终走在时代的前列。 电影回放的原理就是“视觉残留”，也就是快速移过眼前的画面，会在人的大脑中残留短暂的时间，随着画面不断地移过，…
阅读更多...
【X806开发板试用】PWM呼吸灯、无刷电调、按键测试样例

【X806开发板试用】PWM呼吸灯、无刷电调、按键测试样例

环境配置 通过我上篇文章：【XR806开发板试用】Ubuntu环境配置，将配置摸清楚后，就可以开始愉快的编写代码了😄 视频演示 https://www.bilibili.com/video/BV1NF411B74o/?aid295027788&cid467687216&page1 https://www…
阅读更多...
v-on监听多个方法

v-on监听多个方法

方法1&#xff1a; 这个方法可以使用多个事件&#xff0c;比如点击事件、右击事件&#xff0c;左边的是事件名称&#xff0c;右边的是方法名称 <el-button type"success" v-on"{contextmenu:box,click:click}" round>成功按钮</el-button>co…
阅读更多...
Python实现力扣经典面试题——删除有序数组中的重复项 II

Python实现力扣经典面试题——删除有序数组中的重复项 II

题目:删除有序数组中的重复项 II 给你一个有序数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使得出现次数超过两次的元素只出现两次 &#xff0c;返回删除后数组的新长度。不要使用额外的数组空间&#xff0c;你必须在 原地 修改输入数组 并在使用 O(1) 额外…
阅读更多...
12. Springboot集成Dubbo3（三）Dubbo-Admin

12. Springboot集成Dubbo3（三）Dubbo-Admin

目录 1、前言 2、安装 2.1、下载Dubbo-admin 2.2、修改配置 2.3、编译前端 2.4、访问 2.5、加载自己的服务 2.6、服务测试 2.7、其他 3、小结 1、前言 Dubbo Admin是用于管理Dubbo服务的基于Web的管理工具。Dubbo Admin提供了一个用户友好的界面&#xff0c;用于在分…
阅读更多...
初学学习408之数据结构--数据结构基本概念

初学学习408之数据结构--数据结构基本概念

初学学习408之数据结构我们先来了解一下数据结构的基本概念。 数据结构&#xff1a;是相互之间存在一种或多种特定关系的数据元素的集合。 本内容来源于参考书籍《大话数据结构》与《王道数据结构》。除去书籍中的内容&#xff0c;作为初学者的我会尽力详细直白地介绍数据结构的…
阅读更多...
Java面试——锁

Java面试——锁

​ 公平锁&#xff1a; 是指多个线程按照申请锁的顺序来获取锁&#xff0c;有点先来后到的意思。在并发环境中&#xff0c;每个线程在获取锁时会先查看此锁维护的队列&#xff0c;如果为空&#xff0c;或者当前线程是等待队列的第一个&#xff0c;就占有锁&#xff0c;否则就会…
阅读更多...
7zip压缩工具的Linux命令

7zip压缩工具的Linux命令

Macos系统自带的压缩工具&#xff0c;压缩效果一点都不好&#xff0c;压缩效果不明显&#xff0c;果断用7ZIP软件&#xff0c;但是在mac系统下&#xff0c;7zip是没有可视化界面的&#xff0c;只有通过命令是操作。 1 安装方式 &#xff08;1&#xff09;源码安装 https://ww…
阅读更多...
vuex配置和使用（vue3配置）

vuex配置和使用（vue3配置）

个人理解可能会有所偏差 1、基础使用 首先在创建项目时可以选择vuex和一些其他的配置&#xff0c;如果选择那么他会自动创建store文件夹生成默认格式&#xff0c;如果没有选择可以使用指令&#xff1a; npm install vuexnext --save 然后手动创建即可 import { createStore }…
阅读更多...
SpringBoot 学习笔记

SpringBoot 学习笔记

文章目录 一、IoC二、AOP三、bean3.1 bean 生命周期3.2 三种依赖注入方式3.3 bean 线程安全 四、SpringMVC五、常用注解5.1 Scope5.2 PostConstruct 和 PreDestroy5.3 Component 和 Bean5.4 Autowired 和 Resource 六、基于 ApplicationContextAware 实现工厂模式七、事务失效八…
阅读更多...
docker创建mongodb数据库容器

docker创建mongodb数据库容器

介绍 本文将通过docker创建一个mongodb数据库容器 1. 拉取mongo镜像 docker pull mongo:3.63.6版本是一个稳定的版本&#xff0c;可以选择安装此版本。 2. 创建并启动主数据库 容器数据卷配置 /docker/mongodb/master/data # 数据库数据目录&#xff08;宿主机&am…
阅读更多...
下载huggingface数据集到本地并读取.arrow文件遇到的问题

下载huggingface数据集到本地并读取.arrow文件遇到的问题

文章目录 1. 524MB中文维基百科语料&#xff08;需要下载的数据集&#xff09;2. 下载 hugging face 网站上的数据集3. 读取 .arrow 文件报错代码4. 纠正后代码 1. 524MB中文维基百科语料&#xff08;需要下载的数据集&#xff09; 2. 下载 hugging face 网站上的数据集 要将H…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站