前端基础面试题(一)

news2024/11/20 18:46:20

摘要：最近，看了下慕课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.coloradmin.cn/o/1475259.html

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

相关文章

如何使用Logstash搜集日志传输到es集群并使用kibana检测

如何使用Logstash搜集日志传输到es集群并使用kibana检测

引言：上一期我们进行了对Elasticsearch和kibana的部署，今天我们来解决如何使用Logstash搜集日志传输到es集群并使用kibana检测 目录 Logstash部署 1.安装配置Logstash （1）安装 （2）测试文件 &#xff…
阅读更多...
【DDD】学习笔记-领域驱动设计体系

【DDD】学习笔记-领域驱动设计体系

从统一语言到限界上下文，从限界上下文到上下文映射，从领域分析建模到领域设计建模，再从领域设计建模到领域实现建模，我将软件架构设计、面向对象设计、场景驱动设计和测试驱动开发有机地融合起来，贯穿于领域驱动设计的…
阅读更多...
mac打不开xxx软件， 因为apple 无法检查其是否包含恶意

mac打不开xxx软件， 因为apple 无法检查其是否包含恶意

1. 安全性与隐私下面的允许来源列表，有些版本中的‘任何来源’选项被隐藏了，有些从浏览器下载的软件需要勾选这个选项才能安装 打开‘任何来源’选项 sudo spctl --master-disable 关闭‘任何来源’选项 sudo spctl --master-enable
阅读更多...
UE4c++ ConvertActorsToStaticMesh

UE4c++ ConvertActorsToStaticMesh

UE4c ConvertActorsToStaticMesh ConvertActorsToStaticMesh UE4c ConvertActorsToStaticMesh创建Edior模块（最好是放Editor模块毕竟是编辑器代码）创建UBlueprintFunctionLibraryUTestFunctionLibrary.hUTestFunctionLibrary.cpp:.Build.cs 目标:为了大量…
阅读更多...
探索IP地址定位工具：解读IP数据云的功能与优势

探索IP地址定位工具：解读IP数据云的功能与优势

在当今数字化时代，IP地址定位工具成为了许多领域中不可或缺的技术支持，为网络安全、地理定位服务和个性化推荐等提供了重要数据支持。其中，IP数据云作为一种领先的IP地址定位工具，具有一系列功能和优势，本文将对其进行…
阅读更多...
k8s service的概念以及创建方法

k8s service的概念以及创建方法

Service 的功能： Service主要用于提供网络服务，通过Service的定义，能够为客户端应用提供稳定的访问地址（域名或IP地址）和负载均衡功能，以及屏蔽后端Endpoint的变化，是K8s实现微服务的核心资源。…
阅读更多...
如何选择科技公司或者技术团队来开发软件项目呢

如何选择科技公司或者技术团队来开发软件项目呢

最近有客户问我们为什么同样软件项目不同公司报价和工期差异很大，我们给他解释好久才讲清楚，今天整理一下打算写一篇文章来总结一下，有需要开发朋友可以参考，我们下次遇到客户也可以直接转发文章给客户自己看。 我们根据我们自己报…
阅读更多...
计算机网络：IP

计算机网络：IP

引言： IP协议是互联网协议族中的核心协议之一，负责为数据包在网络中传输提供路由寻址。它定义了数据包如何在互联网上从源地址传输到目的地址的规则和流程。IP协议使得各种不同类型的网络设备能够相互通信，实现了全球范围内的信息交换。 目录…
阅读更多...
人像背景分割SDK，智能图像处理

人像背景分割SDK，智能图像处理

美摄科技人像背景分割SDK解决方案：引领企业步入智能图像处理新时代 随着科技的不断进步，图像处理技术已成为许多行业不可或缺的一部分。为了满足企业对于高质量、高效率人像背景分割的需求，美摄科技推出了一款领先的人像背景分割SDK&#xf…
阅读更多...
Cluster-Level Contrastive Learning for Emotion Recognition in Conversations

Cluster-Level Contrastive Learning for Emotion Recognition in Conversations

对话情绪识别的聚类级对比学习 摘要一、介绍二、相关工作2.1 对话情感识别2.2 对比学习 三、方法3.1 任务定义和模型概述3.2 上下文感知的话语编码器3.3 使用适配器进行知识注入3.4 有监督的集群级对比学习3.4.1情感原型3.4.2集群级别对比学习 3.5 模型训练 四 实验设置4.1 数据…
阅读更多...
idea 更新maven java版本变化

idea 更新maven java版本变化

今天遇到个问题就是&#xff0c;点击maven的reload&#xff0c;会导致setting 里的java compiler 版本变化 这里的话&#xff0c;应该是settings.xml文件里面的这个限定死了&#xff0c;修改一下或者去掉就可以了 <profile><id>JDK-1.8</id><activatio…
阅读更多...
Qt下使用modbus-c库实现PLC线圈/保持寄存器的读写

Qt下使用modbus-c库实现PLC线圈/保持寄存器的读写

系列文章目录 提示&#xff1a;这里是该系列文章的所有文章的目录 第一章&#xff1a;Qt下使用ModbusTcp通信协议进行PLC线圈/保持寄存器的读写&#xff08;32位有符号数&#xff09; 第二章&#xff1a;Qt下使用modbus-c库实现PLC线圈/保持寄存器的读写 文章目录 系列文章目录…
阅读更多...
如何使用程序通过OCR识别解析PDF中的表格

如何使用程序通过OCR识别解析PDF中的表格

https://github.com/PaddlePaddle/PaddleOCR/blob/release/2.7/ppstructure/table/README_ch.md#41-%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B Paddle-structure是目前我们能找到的可以做中英文版面分析较好的一个基础模型&#xff0c;其开源版可以识别十类页面元素。这篇文章介绍…
阅读更多...
VL817-Q7 USB3.0 HUB芯片 适用于扩展坞 工控机 显示器

VL817-Q7 USB3.0 HUB芯片 适用于扩展坞 工控机 显示器

VL817-Q7 USB3.1 GEN1 HUB芯片 VL817-Q7 USB3.1 GEN1 HUB芯片 VIA Lab的VL817是一款现代USB 3.1 Gen 1集线器控制器&#xff0c;具有优化的成本结构和完全符合USB标准3.1 Gen 1规范&#xff0c;包括ecn和2017年1月的合规性测试更新。VL817提供双端口和双端口4端口配置&…
阅读更多...
windows安装部署node.js并搭建Vue项目

windows安装部署node.js并搭建Vue项目

一、官网下载安装包 官网地址&#xff1a;https://nodejs.org/zh-cn/download/ 二、安装程序 1、安装过程 如果有C/C编程的需求&#xff0c;勾选一下下图所示的部分&#xff0c;没有的话除了选择一下node.js安装路径&#xff0c;直接一路next 2、测试安装是否成功 【winR】…
阅读更多...
VUE从0到1创建项目及基本路由、页面配置

VUE从0到1创建项目及基本路由、页面配置

一、创建项目：（前提已经安装好vue和npm） 目录：E:\personal\project_pro\ windows下，win+R 输入cmd进入命令行： cd E:\personal\project_pro E：# 创建名为test的项目 vue create test# 用上下键选择vue2或vue3，回车确认创建本次选择VUE3 创建好项目后，使用…
阅读更多...
css transform 会影响position 定位

css transform 会影响position 定位

比如通过以下代码.实现导航条上的每个li栏目,以不同的时间间隔,从上向下移动进来并显示 .my-navbar ul li {position: relative;opacity: 0;transform: translateY(-30px);transition: transform .6s cubic-bezier(.165,.84,.44,1),opacity .6s cubic-bezier(.165,.84,.44,1);…
阅读更多...
书生·浦语大模型全链路开源体系介绍

书生·浦语大模型全链路开源体系介绍

背景介绍 随着人工智能技术的迅猛发展&#xff0c;大模型技术已成为当今人工智能领域的热门话题。2022 年 11 月 30 日&#xff0c;美国 OpenAI 公司发布了 ChatGPT 通用型对话系统 并引发了全球 的极大关注&#xff0c;上线仅 60 天月活用户数便超过 1 亿&#xff0c;成为历史…
阅读更多...
租赁系统|租赁软件提供免押金等多种租赁方式

租赁系统|租赁软件提供免押金等多种租赁方式

租赁小程序是一种全新的租赁模式&#xff0c;为用户提供了免押金、多种租赁方式、定制化服务等多项优势&#xff0c;让用户的租赁体验更加美好。让我们来了解一下它的特点和功能。 首先&#xff0c;租赁小程序支持租完即送&#xff0c;无需等待固定租期。它提供了多种租赁方式&…
阅读更多...
Rocky Linux 运维工具 ls

Rocky Linux 运维工具 ls

一、ls 的简介 ​​ls​ 用于列出当前目录下的文件和目录&#xff0c;以及它们的属性信息。通过 ​ls​命令可以查看文件名、文件大小、创建时间等信息&#xff0c;并方便用户浏览和管理文件。 二、ls 的参数说明 序号参数描述1-a显示所有文件&#xff0c;包括以 ​.​开头的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023