当前位置: 首页 > news >正文

前端面试题(三)

11. Web API 面试题

  • 如何使用 fetch 发起网络请求?

    • fetch 是现代浏览器中用于发起网络请求的原生 API。它返回一个 Promise,默认情况下使用 GET 请求:
      fetch('https://api.example.com/data').then(response => response.json()).then(data => console.log(data)).catch(error => console.error('Error:', error));
      
      • 可以通过第二个参数传递配置对象来指定请求方法、请求头等:
      fetch('https://api.example.com/data', {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify({ key: 'value' }),
      });
      
  • 什么是 localStoragesessionStorage,它们的区别是什么?

    • localStoragesessionStorage 都是 Web Storage API 的一部分,用于在客户端存储数据。它们的主要区别在于数据的有效期:
      • localStorage:数据没有过期时间,浏览器关闭后数据仍然存在,除非手动删除。
      • sessionStorage:数据仅在页面会话期间有效,浏览器关闭后数据会被清除。
  • 如何使用 FormData 对象?

    • FormData 是用于构建和管理表单数据的接口,特别适用于处理文件上传。可以通过表单元素实例化 FormData,然后通过 fetchXMLHttpRequest 发送表单数据:
      const formData = new FormData();
      formData.append('username', 'example');
      formData.append('file', fileInput.files[0]);fetch('https://api.example.com/upload', {method: 'POST',body: formData,
      });
      

12. 函数式编程与高级 JavaScript 特性

  • 什么是柯里化(Currying)?

    • 柯里化 是将一个接受多个参数的函数转换为接受单一参数的函数,并返回一个新的函数,该函数继续接收剩余的参数,直到参数全部传递完毕:
      function curry(fn) {return function curried(...args) {if (args.length >= fn.length) {return fn.apply(this, args);} else {return function(...args2) {return curried.apply(this, args.concat(args2));};}};
      }const add = (a, b) => a + b;
      const curriedAdd = curry(add);
      console.log(curriedAdd(2)(3)); // 输出 5
      
  • 什么是函数的纯函数(Pure Function)?

    • 纯函数 是指在相同的输入下总是返回相同的输出,并且不产生任何副作用(如修改外部变量或状态)。纯函数使代码更具可预测性和可测试性。
  • 如何使用 Promise.allPromise.race

    • Promise.all 用于并行执行多个 Promise,并在所有 Promise 都 resolve 后返回结果数组。如果有任何一个 Promise reject,它将立即停止并返回错误:

      Promise.all([promise1, promise2, promise3]).then(results => console.log(results)).catch(error => console.error(error));
      
    • Promise.race 用于并发执行多个 Promise,但它会在第一个 Promise 完成时立即返回结果,无论是 resolve 还是 reject:

      Promise.race([promise1, promise2, promise3]).then(result => console.log(result)).catch(error => console.error(error));
      

13. CSS 进阶

  • 如何使用 CSS Grid 实现复杂布局?

    • CSS Grid 是一种二维布局系统,可以轻松创建复杂的网格布局。以下是一个简单的网格布局示例:
      .container {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(2, 200px);gap: 20px;
      }
      .item {background-color: lightblue;
      }
      
      以上代码创建了一个 3 列、2 行的网格布局,每个单元格的宽度和高度分别为 1fr 和 200px,单元格之间有 20px 的间距。
  • 如何使用 CSS Variables(CSS 变量)?

    • CSS 变量通过 --variable-name 的语法定义,可以在整个 CSS 文件中复用。定义全局变量时通常放在 :root 中:
      :root {--main-color: #3498db;--padding: 10px;
      }.button {background-color: var(--main-color);padding: var(--padding);
      }
      
      使用 var(--variable-name) 引用定义的变量。
  • 什么是 BEM 命名法?

    • BEM(Block Element Modifier)是一种 CSS 命名规范,旨在提高代码的可读性和可维护性。结构如下:

      • Block:表示组件的独立部分(如 button)。
      • Element:表示块中的某个部分(如 button__icon)。
      • Modifier:表示元素的状态或变体(如 button--primary)。

      例如:

      <button class="button button--primary"><span class="button__icon"></span>Click Me
      </button>
      

14. 构建工具与打包优化

  • Webpack 中的 Tree Shaking 是什么?

    • Tree Shaking 是一种去除 JavaScript 未使用代码的优化技术。Webpack 使用 ES6 模块的静态结构分析代码,找出哪些导入的模块没有被使用,并在最终打包时将这些未使用的模块移除,从而减小打包体积。
  • 如何使用 Lazy Loading 优化 Web 应用?

    • 懒加载(Lazy Loading)是按需加载资源的技术,常用于优化首屏加载时间。通过 Webpack 的动态导入可以实现懒加载:
      import('./module').then(module => {// 使用动态加载的模块
      });
      
  • 如何配置 webpack-dev-server 实现热模块替换(HMR)?

    • 热模块替换(HMR)允许在不刷新整个页面的情况下替换、添加或删除模块。可以在 webpack.config.js 中配置 devServer
      module.exports = {devServer: {contentBase: './dist',hot: true,},
      };
      

15. 前端安全与加密

  • 如何防止 Clickjacking 攻击?

    • Clickjacking 是通过隐藏的 iframe 诱导用户点击看似正常的按钮或链接,实际执行了恶意操作。可以通过在 HTTP 头中添加 X-Frame-Options 来防止此类攻击:
      X-Frame-Options: DENY
      
      或者可以指定同源站点允许通过:
      X-Frame-Options: SAMEORIGIN
      
  • 如何实现前端的加密和解密?

    • 前端加密可以使用 JavaScript 中的 Crypto API 来实现,如使用 AES 算法加密:
      const crypto = window.crypto.subtle;// 生成加密密钥
      const key = await crypto.generateKey({name: 'AES-GCM',length: 256,
      }, true, ['encrypt', 'decrypt']);// 加密数据
      const encryptedData = await crypto.encrypt({name: 'AES-GCM',iv: iv,
      }, key, data);
      

相关文章:

前端面试题(三)

11. Web API 面试题 如何使用 fetch 发起网络请求&#xff1f; fetch 是现代浏览器中用于发起网络请求的原生 API。它返回一个 Promise&#xff0c;默认情况下使用 GET 请求&#xff1a;fetch(https://api.example.com/data).then(response > response.json()).then(data &g…...

骨传导耳机哪个牌子最好用?实测五大实用型骨传导耳机分析!

在快节奏的现代生活中&#xff0c;耳机已成为我们不可或缺的伴侣。无论是在通勤路上、运动时&#xff0c;还是在安静的图书馆&#xff0c;耳机都能为我们提供一片属于自己的音乐天地。然而&#xff0c;长时间使用传统耳机可能会对听力造成损害&#xff0c;尤其是在高音量下。因…...

18.1 k8s服务组件之4大黄金指标讲解

本节重点介绍 : 监控4大黄金指标 Latency&#xff1a;延时Utilization&#xff1a;使用率Saturation&#xff1a;饱和度Errors&#xff1a;错误数或错误率 apiserver指标 400、500错误qps访问延迟队列深度 etcd指标kube-scheduler和kube-controller-manager 监控4大黄金指标 …...

MacOS Catalina 从源码构建Qt6.2开发库之02: 配置QtCreator

安装Qt-creator-5.0.2 在option命令中配置Qt Versions指向 /usr/local/bin/qmake6 Kits选入CLang...

某建筑市场爬虫数据采集逆向分析

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言 目标网站 aHR0cHM6Ly9qenNjLm1vaHVyZC5nb3YuY24vZGF0YS9jb21wYW55P2NvbXBsZXhuYW1lPSVFNiVCMCVCNA 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面…...

降低存量房贷利率的主要原因和影响

降低存量房贷利率的主要原因和影响可以从以下几个方面来分析&#xff1a; 原因 刺激消费与内需&#xff1a;降低房贷利率可以减少贷款人的月供负担&#xff0c;增加家庭的可支配收入&#xff0c;理论上能刺激消费&#xff0c;促进经济的内循环。在经济面临压力时&#xff0c;这…...

远程桌面连接工具Microsoft Remote Desktop Beta for Mac

Microsoft Remote Desktop Beta for Mac 是一款功能强大的远程桌面连接工具&#xff0c;具有以下功能特点&#xff1a; 软件下载地址 跨平台连接&#xff1a; 允许 Mac 用户轻松连接到运行 Windows 操作系统的计算机&#xff0c;打破了操作系统的界限&#xff0c;无论这些 Wi…...

Linux 之 logrotate 【日志分割】

简介 logrotate 是一个用于管理日志文件的工具。它可以自动对日志文件进行轮转、压缩、删除等操作&#xff0c;以防止日志文件无限增长占用过多磁盘空间。logrotate 通常作为一个守护进程定期运行&#xff0c;也可以通过 cron 任务来调度执行 工作原理 按照配置文件中的规则…...

Canvas简历编辑器-Monorepo+Rspack工程实践

Canvas简历编辑器-MonorepoRspack工程实践 在之前我们围绕Canvas聊了很多代码设计层面的东西&#xff0c;在这里我们聊一下工程实践。在之前的文中我也提到过&#xff0c;因为是本着学习的态度以及对技术的好奇心来做的&#xff0c;所以除了一些工具类的库例如 ArcoDesign、Re…...

uni-app - - - - -vue3使用i18n配置国际化语言

uni-app - - - - -使用i18n配置国际化语言 1. 安装vue-i18n2. 配置文件2.1 创建如下文件2.2 文件配置2.3 main文件导入i18n 3. 页面内使用3.1 template内直接使用3.2 变量接收使用 1. 安装vue-i18n npm install vue-i18n --save2. 配置文件 2.1 创建如下文件 locales文件夹里…...

VSCode好用的插件推荐

1. Chinese 将vscode翻译成简体中文 如果安装了依然是英文&#xff0c;请参考如下方法&#xff1a; ctrlshfitp 2. ESLint 自动检查规范 3. Prettier - Code formatter 可以自动调整代码的缩进、换行和空格&#xff0c;确保代码风格统一。通过配置&#xff0c;Prettier可…...

Linux:八种重定向详解(万字长文警告)

相关阅读Linuxhttps://blog.csdn.net/weixin_45791458/category_12234591.html?spm1001.2014.3001.5482 本文将讨论Linux中的重定向相关问题&#xff0c;在阅读本文前&#xff0c;强烈建议先学习文件描述符的相关内容Linux&#xff1a;文件描述符详解。 重定向分为两类&#x…...

set和map系列容器

前言 学习完二叉搜索树本来是应该直接深化&#xff0c;讲平衡二叉搜索树的。但是在学习它的底层逻辑之前呢&#xff0c;我们先来学学它的应用场面。 set和map的底层不是平衡二叉搜索树而是红黑树&#xff0c;实际上的难度比平衡搜索二叉树大。所以它的底层逻辑会比平衡二叉树更…...

企业告警智策助手 | OPENAIGC开发者大赛企业组AI创作力奖

在第二届拯救者杯OPENAIGC开发者大赛中&#xff0c;涌现出一批技术突出、创意卓越的作品。为了让这些优秀项目被更多人看到&#xff0c;我们特意开设了优秀作品报道专栏&#xff0c;旨在展示其独特之处和开发者的精彩故事。 无论您是技术专家还是爱好者&#xff0c;希望能带给…...

函数组件、Hooks和类组件区别

1. 函数组件&#xff08;Function Components&#xff09; 函数组件是接收props并返回React元素的纯JavaScript函数。它们不能拥有自己的状态&#xff08;state&#xff09;或生命周期方法&#xff0c;但在React 16.8中引入Hooks之后&#xff0c;这种情况发生了变化。 特点&a…...

在线点餐新体验:Spring Boot 点餐系统

摘 要 随着科学技术的飞速发展&#xff0c;各行各业都在努力与现代先进技术接轨&#xff0c;通过科技手段提高自身的优势&#xff1b;对于网上点餐系统当然也不能排除在外&#xff0c;随着网络技术的不断成熟&#xff0c;带动了网上点餐系统&#xff0c;它彻底改变了过去传统的…...

WPF中Viewbox的介绍和用法

在 WPF&#xff08;Windows Presentation Foundation&#xff09; 中&#xff0c;Viewbox 是一个非常有用的容器控件&#xff0c;主要用于根据其自身大小自动调整子元素的缩放比例&#xff0c;以保持其内容的显示效果。无论窗口如何调整大小&#xff0c;Viewbox 内的内容都会按…...

QMT如何获取股票基本信息?如上市时间、退市时间、代码、名称、是否是ST等。QMT量化软件支持!

获取股票概况 包含股票的上市时间、退市时间、代码、名称、是否是ST等。 #获取合约基础信息数据 该信息每交易日9点更新 #内置Python 提示 旧版本客户端中&#xff0c;函数名为ContextInfo.get_instrumentdetail 调用方法 内置python ContextInfo.get_instrument_detai…...

2024年中国科技核心期刊目录(科普卷)

2024年中国科技核心期刊目录 &#xff08;科普卷&#xff09; 序号 期刊名称 1 爱上机器人 2 百科知识 3 保健医…...

[解决]navicat连接mysql成功,但是使用jdbc连接不上

在连接数据库时&#xff0c;最初使用的 JDBC URL 配置如下&#xff1a; jdbc:mysql://192.168.56.100:3306/mzxLiving_manage?useUnicodetrue&characterEncodingUTF-8&serverTimezoneAsia/Shanghai修改之后的JDBC URL为 jdbc:mysql://192.168.56.100:3306/mzxLiving…...

sar信号RD域的距离向傅里叶变换

下面可知&#xff0c;举例傅里叶变换时&#xff0c;posp 距离时间和频率 t不等于ft/K。而方位时间和频率时这种线性关系...

4 html5 web components原生组件详细教程

web components 前面我们已经介绍过&#xff0c;这一期我们就来讲一讲具体用法和这其中的关键只是点&#xff1a; 1 基本使用 如果我们想实现一个封装的原生组件&#xff0c;那就离不开使用js去封装&#xff0c;这里主要就是基于HTMLElement这个类&#xff0c;去创建创建一个…...

nginx+keepalived健康检查案例详解(解决nginx出现故障却不能快速切换到备份服务器的问题)

文章目录 简介配置过程前置环境请看创建健康检查脚本结果测试 简介 在我们通过nginxkeepalived实现高可用后&#xff0c;会发现nginx出现故障的时候keepalived并不会将虚拟ip切换到备份服务器上其原理就是nginx和keepalived是两个独立的服务&#xff0c;Nginx的故障状态不会触…...

什么是AI大模型?

什么是AI大模型? 人工智能&#xff08;AI&#xff09;大模型近年来在各个领域掀起了一场技术革命&#xff0c;从语言生成到图像识别&#xff0c;再到自动驾驶和医疗诊断&#xff0c;AI大模型的应用场景越来越广泛。这些模型的表现令人惊叹&#xff0c;但它们的工作原理和背后技…...

建造者模式__c#

目录 调用 指挥者 抽象建造者 建造者 定义具体产品 调用 用指挥者指挥建造者建造产品 在指挥者这里组装成产品 namespace _建造者模式 {internal class Program{static void Main(string[] args){Builder buildernew JiangHuaiBuilder();//建造者Director director new…...

学习MRI处理过程中搜到的宝藏网站

今天浏览网页查到了一些宝藏网站&#xff0c;正好记录一下&#xff0c;后面搜到好东东再接着填充&#xff0c;方便查阅~ &#xff08;1&#xff09;牛人网站 这个网站是在搜集seed关键词时发现的&#xff0c;用pdf文档记录&#xff0c;可下载查阅&#xff0c;条理清晰&#xf…...

【C语言】const char*强制类型转换 (type cast)的告警问题

void run_upload(const char *ftp_url) {CircularQueue queue;// 初始化环形队列for (int i = 0; i < QUEUE_SIZE; i++) {queue.items[i].data = malloc(BUFFER_SIZE);if (queue.items[i].data == NULL) {fprintf(stderr, "Failed to allocate memory for queue item %…...

python-比较月亮大小/数组下标/人见人爱a+b

一:比较月亮大小 题目描述 小理是一名出色的狼人。众所周知&#xff0c;狼人只有在满月之夜才会变成狼。 同时&#xff0c;月亮的大小随着时间变化&#xff0c;它的大小变化 3030 天为一循环。 它的变化情况(从第一天开始)为 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,14,13,12,1…...

什么是组态、组态的应用场景介绍

随着计算机技术和工业自动化水平迅速提高&#xff0c;而车间现场种类繁杂的控制设备和过程监控装置使得传统的工业控制软件无法满足用户的各种需求。在“组态”概念出现之前&#xff0c;工程技术人员需要通过编写程序来实现某一任务&#xff0c;不但工作量大、周期长&#xff0…...

Java项目: 基于SpringBoot+mybatis+maven实现的智能推荐卫生健康系统分前后台(含源码+数据库+开题报告+任务书+毕业论文)

一、项目简介 本项目是一套基于SpringBootmybatismaven实现的智能推荐卫生健康系统 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界面美…...