前端面试题(三)
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' }), });
-
什么是
localStorage
和sessionStorage
,它们的区别是什么?localStorage
和sessionStorage
都是 Web Storage API 的一部分,用于在客户端存储数据。它们的主要区别在于数据的有效期:localStorage
:数据没有过期时间,浏览器关闭后数据仍然存在,除非手动删除。sessionStorage
:数据仅在页面会话期间有效,浏览器关闭后数据会被清除。
-
如何使用
FormData
对象?FormData
是用于构建和管理表单数据的接口,特别适用于处理文件上传。可以通过表单元素实例化FormData
,然后通过fetch
或XMLHttpRequest
发送表单数据: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.all
和Promise.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
是一种二维布局系统,可以轻松创建复杂的网格布局。以下是一个简单的网格布局示例:
以上代码创建了一个 3 列、2 行的网格布局,每个单元格的宽度和高度分别为 1fr 和 200px,单元格之间有 20px 的间距。.container {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(2, 200px);gap: 20px; } .item {background-color: lightblue; }
-
如何使用
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)
引用定义的变量。
- CSS 变量通过
-
什么是 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>
- Block:表示组件的独立部分(如
-
14. 构建工具与打包优化
-
Webpack 中的
Tree Shaking
是什么?- Tree Shaking 是一种去除 JavaScript 未使用代码的优化技术。Webpack 使用 ES6 模块的静态结构分析代码,找出哪些导入的模块没有被使用,并在最终打包时将这些未使用的模块移除,从而减小打包体积。
-
如何使用
Lazy Loading
优化 Web 应用?- 懒加载(Lazy Loading)是按需加载资源的技术,常用于优化首屏加载时间。通过 Webpack 的动态导入可以实现懒加载:
import('./module').then(module => {// 使用动态加载的模块 });
- 懒加载(Lazy Loading)是按需加载资源的技术,常用于优化首屏加载时间。通过 Webpack 的动态导入可以实现懒加载:
-
如何配置
webpack-dev-server
实现热模块替换(HMR)?- 热模块替换(HMR)允许在不刷新整个页面的情况下替换、添加或删除模块。可以在
webpack.config.js
中配置devServer
:module.exports = {devServer: {contentBase: './dist',hot: true,}, };
- 热模块替换(HMR)允许在不刷新整个页面的情况下替换、添加或删除模块。可以在
15. 前端安全与加密
-
如何防止 Clickjacking 攻击?
- Clickjacking 是通过隐藏的 iframe 诱导用户点击看似正常的按钮或链接,实际执行了恶意操作。可以通过在 HTTP 头中添加
X-Frame-Options
来防止此类攻击:
或者可以指定同源站点允许通过:X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN
- Clickjacking 是通过隐藏的 iframe 诱导用户点击看似正常的按钮或链接,实际执行了恶意操作。可以通过在 HTTP 头中添加
-
如何实现前端的加密和解密?
- 前端加密可以使用 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);
- 前端加密可以使用 JavaScript 中的
相关文章:
前端面试题(三)
11. Web API 面试题 如何使用 fetch 发起网络请求? fetch 是现代浏览器中用于发起网络请求的原生 API。它返回一个 Promise,默认情况下使用 GET 请求:fetch(https://api.example.com/data).then(response > response.json()).then(data &g…...

骨传导耳机哪个牌子最好用?实测五大实用型骨传导耳机分析!
在快节奏的现代生活中,耳机已成为我们不可或缺的伴侣。无论是在通勤路上、运动时,还是在安静的图书馆,耳机都能为我们提供一片属于自己的音乐天地。然而,长时间使用传统耳机可能会对听力造成损害,尤其是在高音量下。因…...

18.1 k8s服务组件之4大黄金指标讲解
本节重点介绍 : 监控4大黄金指标 Latency:延时Utilization:使用率Saturation:饱和度Errors:错误数或错误率 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...

某建筑市场爬虫数据采集逆向分析
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 目标网站 aHR0cHM6Ly9qenNjLm1vaHVyZC5nb3YuY24vZGF0YS9jb21wYW55P2NvbXBsZXhuYW1lPSVFNiVCMCVCNA 提示:以下是本篇文章正文内容,下面…...
降低存量房贷利率的主要原因和影响
降低存量房贷利率的主要原因和影响可以从以下几个方面来分析: 原因 刺激消费与内需:降低房贷利率可以减少贷款人的月供负担,增加家庭的可支配收入,理论上能刺激消费,促进经济的内循环。在经济面临压力时,这…...

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

Linux 之 logrotate 【日志分割】
简介 logrotate 是一个用于管理日志文件的工具。它可以自动对日志文件进行轮转、压缩、删除等操作,以防止日志文件无限增长占用过多磁盘空间。logrotate 通常作为一个守护进程定期运行,也可以通过 cron 任务来调度执行 工作原理 按照配置文件中的规则…...
Canvas简历编辑器-Monorepo+Rspack工程实践
Canvas简历编辑器-MonorepoRspack工程实践 在之前我们围绕Canvas聊了很多代码设计层面的东西,在这里我们聊一下工程实践。在之前的文中我也提到过,因为是本着学习的态度以及对技术的好奇心来做的,所以除了一些工具类的库例如 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翻译成简体中文 如果安装了依然是英文,请参考如下方法: ctrlshfitp 2. ESLint 自动检查规范 3. Prettier - Code formatter 可以自动调整代码的缩进、换行和空格,确保代码风格统一。通过配置,Prettier可…...

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

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

企业告警智策助手 | OPENAIGC开发者大赛企业组AI创作力奖
在第二届拯救者杯OPENAIGC开发者大赛中,涌现出一批技术突出、创意卓越的作品。为了让这些优秀项目被更多人看到,我们特意开设了优秀作品报道专栏,旨在展示其独特之处和开发者的精彩故事。 无论您是技术专家还是爱好者,希望能带给…...
函数组件、Hooks和类组件区别
1. 函数组件(Function Components) 函数组件是接收props并返回React元素的纯JavaScript函数。它们不能拥有自己的状态(state)或生命周期方法,但在React 16.8中引入Hooks之后,这种情况发生了变化。 特点&a…...
在线点餐新体验:Spring Boot 点餐系统
摘 要 随着科学技术的飞速发展,各行各业都在努力与现代先进技术接轨,通过科技手段提高自身的优势;对于网上点餐系统当然也不能排除在外,随着网络技术的不断成熟,带动了网上点餐系统,它彻底改变了过去传统的…...
WPF中Viewbox的介绍和用法
在 WPF(Windows Presentation Foundation) 中,Viewbox 是一个非常有用的容器控件,主要用于根据其自身大小自动调整子元素的缩放比例,以保持其内容的显示效果。无论窗口如何调整大小,Viewbox 内的内容都会按…...

QMT如何获取股票基本信息?如上市时间、退市时间、代码、名称、是否是ST等。QMT量化软件支持!
获取股票概况 包含股票的上市时间、退市时间、代码、名称、是否是ST等。 #获取合约基础信息数据 该信息每交易日9点更新 #内置Python 提示 旧版本客户端中,函数名为ContextInfo.get_instrumentdetail 调用方法 内置python ContextInfo.get_instrument_detai…...
2024年中国科技核心期刊目录(科普卷)
2024年中国科技核心期刊目录 (科普卷) 序号 期刊名称 1 爱上机器人 2 百科知识 3 保健医…...
[解决]navicat连接mysql成功,但是使用jdbc连接不上
在连接数据库时,最初使用的 JDBC URL 配置如下: jdbc:mysql://192.168.56.100:3306/mzxLiving_manage?useUnicodetrue&characterEncodingUTF-8&serverTimezoneAsia/Shanghai修改之后的JDBC URL为 jdbc:mysql://192.168.56.100:3306/mzxLiving…...
uniapp 对接腾讯云IM群组成员管理(增删改查)
UniApp 实战:腾讯云IM群组成员管理(增删改查) 一、前言 在社交类App开发中,群组成员管理是核心功能之一。本文将基于UniApp框架,结合腾讯云IM SDK,详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版分享
平时用 iPhone 的时候,难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵,或者买了二手 iPhone 却被原来的 iCloud 账号锁住,这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

YSYX学习记录(八)
C语言,练习0: 先创建一个文件夹,我用的是物理机: 安装build-essential 练习1: 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件,随机修改或删除一部分,之后…...
Linux云原生安全:零信任架构与机密计算
Linux云原生安全:零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言:云原生安全的范式革命 随着云原生技术的普及,安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测,到2025年,零信任架构将成为超…...

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码,CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短,所以CPU会不断地切换线程执行,从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...
【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)
1.获取 authorizationCode: 2.利用 authorizationCode 获取 accessToken:文档中心 3.获取手机:文档中心 4.获取昵称头像:文档中心 首先创建 request 若要获取手机号,scope必填 phone,permissions 必填 …...
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
以下是一个完整的 Angular 微前端示例,其中使用的是 Module Federation 和 npx-build-plus 实现了主应用(Shell)与子应用(Remote)的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

从 GreenPlum 到镜舟数据库:杭银消费金融湖仓一体转型实践
作者:吴岐诗,杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言:融合数据湖与数仓的创新之路 在数字金融时代,数据已成为金融机构的核心竞争力。杭银消费金…...
6️⃣Go 语言中的哈希、加密与序列化:通往区块链世界的钥匙
Go 语言中的哈希、加密与序列化:通往区块链世界的钥匙 一、前言:离区块链还有多远? 区块链听起来可能遥不可及,似乎是只有密码学专家和资深工程师才能涉足的领域。但事实上,构建一个区块链的核心并不复杂,尤其当你已经掌握了一门系统编程语言,比如 Go。 要真正理解区…...

解析两阶段提交与三阶段提交的核心差异及MySQL实现方案
引言 在分布式系统的事务处理中,如何保障跨节点数据操作的一致性始终是核心挑战。经典的两阶段提交协议(2PC)通过准备阶段与提交阶段的协调机制,以同步决策模式确保事务原子性。其改进版本三阶段提交协议(3PC…...