No2.精选前端面试题,享受每天的挑战和学习

简介: No2.精选前端面试题,享受每天的挑战和学习

解释下 JavaScript 中的async,await与Promise

在JavaScript中,asyncawaitPromise是用于处理异步操作的关键字和对象。

Promise 是一种表示异步操作最终完成或失败的对象。它有三个状态:pending(进行中)、fulfilled(已完成)和rejected(已失败)。通过调用 new Promise() 构造函数,可以创建一个 Promise 对象,并指定异步操作的处理逻辑。

const promise = new Promise((resolve, reject) => {
  // 异步操作
  const result = ... // 执行异步操作的代码
  if (result) {
    resolve(result); // 异步操作成功时调用 resolve
  } else {
    reject(Error('Something went wrong')); // 异步操作失败时调用 reject
  }
});

通过 then() 方法可以注册回调函数处理异步操作的结果。

promise.then((result) => {
  // 处理异步操作成功的结果
}).catch((error) => {
  // 处理异步操作失败的错误
});

asyncawait 是 ES2017(ES8)引入的语法糖,用于编写更简洁、可读性更高的异步代码。

async 函数是一个返回 Promise 的函数,在函数内部可以使用 await 关键字来等待一个 Promise 完成并返回其结果。await 只能在 async 函数内部使用。

async function fetchData() {
  try {
    const result = await fetch(url); // 等待异步操作完成并获取结果
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

在上述代码中,fetchData() 是一个 async 函数。通过使用 await 关键字,我们可以等待 fetch() 函数返回的 Promise 完成,并将结果赋值给 result 变量。使用 try...catch 语句可以捕获可能发生的异常。

总结:

  • Promise 是用于处理异步操作的对象,可以表示操作的状态和最终结果。
  • then()catch() 方法用于注册回调函数处理 Promise 的结果。
  • async 函数是一个返回 Promise 的函数,内部使用 await 来暂停执行等待 Promise 完成。
  • await 关键字只能在 async 函数内部使用,等待一个 Promise 完成并返回结果。

通过结合使用 asyncawaitPromise,可以编写更清晰、简洁的异步代码,并更好地处理异步操作的结果和错误。

JavaScript 预编译到底干了什么

JavaScript 的预编译(Hoisting)是 JavaScript 引擎在代码执行之前对变量和函数进行处理的过程。预编译可以分为两个阶段:变量(变量提升)和函数。

  1. 变量预编译(变量提升):
  • JavaScript 在执行代码之前会通过 var、let 或 const 声明的变量,将其声明提升到作用域的顶部。这意味着变量在声明之前就可以被访问。
  • 使用 var 关键字声明的变量会被提升到所在作用域的顶部,并初始化为 undefined。
  • 使用 let 或 const 声明的变量也会被提升到所在作用域的顶部,但不会被初始化,直到实际的声明语句被执行之前。

示例:

console.log(x); // 输出 undefined
var x = 10;
console.log(y); // 报错 ReferenceError: y is not defined
let y = 20;

以上代码在预编译阶段会被转换为:

var x; // 变量提升
console.log(x); // 输出 undefined
x = 10;
console.log(y); // 报错 ReferenceError: y is not defined
let y = 20;
  1. 函数预编译:
  • JavaScript 中的函数声明会被提升到作用域的顶部,可以在声明之前调用函数。
  • 函数表达式(使用变量赋值的方式定义函数)不会被提升,只有在赋值语句执行时才能访问到。

示例:

foo(); // 输出 "Hello"
function foo() {
  console.log("Hello");
}
bar(); // 报错 TypeError: bar is not a function
var bar = function() {
  console.log("World");
};

以上代码在预编译阶段会被转换为:

function foo() {
  console.log("Hello");
}
foo(); // 输出 "Hello"
var bar; // 变量提升
bar(); // 报错 TypeError: bar is not a function
bar = function() {
  console.log("World");
};

综上所述,JavaScript 的预编译阶段主要是将变量声明和函数声明提升到作用域顶部。通过了解 JavaScript 预编译的工作原理,可以更好地理解代码执行过程中的行为和错误。

css的选择器嵌套过多带来的问题

在 CSS 中,选择器的嵌套过多可能会带来以下问题:

  1. 复杂性增加:当选择器的嵌套层级过多时,CSS 规则变得复杂且难以维护。阅读和理解具有深层嵌套的选择器需要更多的时间和精力。这会增加代码的复杂性,使代码难以修改和调试。
  2. 样式命名冲突:嵌套选择器可能会导致样式命名冲突。当选择器嵌套在一起时,选择器的特定性也会增加。如果多个地方使用相同的选择器嵌套结构,可能会出现不意料的样式重叠或覆盖问题,导致样式不符合预期。
  3. 性能下降:浏览器在解析 CSS 时需要处理选择器的匹配和渲染过程。选择器的嵌套层级越多,浏览器需要更多的计算资源来确定选择器是否匹配某个元素。这可能会导致页面加载和渲染速度变慢,对性能产生负面影响。
  4. 可读性和可维护性降低:深层嵌套的选择器会导致 CSS 规则难以理解和修改。代码的可读性和可维护性降低,增加了引入错误或产生副作用的风险。

如何避免选择器嵌套过多的问题:

  1. 保持选择器简洁和扁平化:尽量避免多层级的选择器嵌套,使用简洁的选择器来定位元素。将样式规则分解为更小的部分,使其更易于理解和维护。
  2. 使用类名和 ID:利用类名和 ID 来定义更具语义的选择器,通过给元素添加类名或 ID 来选择元素,而不是依赖于嵌套选择器。
  3. 使用父子关系选择器:在 CSS 中,可以使用父子关系选择器(如后代选择器和子选择器)来限定选择器的范围,减少不必要的嵌套。
  4. 使用预处理器:CSS 预处理器(如 Sass、Less)提供了更强大的选择器嵌套功能,并且可以编写更具层次结构的代码。然而,仍应谨慎使用,避免滥用嵌套功能。

总的来说,尽量避免选择器的嵌套过多,保持 CSS 代码的简洁性和可读性,有助于提高代码的可维护性和性能。

简单说下css的尺寸体系

在 CSS 中,有多种用于表示尺寸的单位。下面是常见的 CSS 尺寸单位:

  1. 像素(px):像素是最常见的尺寸单位,表示屏幕上的一个物理像素点。例如,width: 200px; 表示元素的宽度为 200 像素。
  2. 百分比(%):百分比尺寸单位相对于其父元素的尺寸进行计算。例如,width: 50%; 表示元素的宽度占父元素宽度的 50%。
  3. 视窗单位(vw、vh、vmin、vmax):视窗单位相对于浏览器视口的尺寸进行计算。其中,vw 表示视口宽度的百分之一,vh 表示视口高度的百分之一,vmin 表示视口宽度和高度中较小的那个值,vmax 表示视口宽度和高度中较大的那个值。
  4. em(相对于父元素的字体大小):em 是相对于元素所在的父元素的字体大小计算的单位。例如,font-size: 1.5em; 表示字体大小为父元素字体大小的1.5倍。
  5. rem(相对于根元素的字体大小):rem 是相对于根元素(通常是  元素)的字体大小计算的单位。例如,font-size: 1.2rem; 表示字体大小为根元素字体大小的1.2倍。
  6. 字体相对单位(ex、ch):ex 表示小写字母 x 的高度,ch 表示数字字符 0 的宽度。这些单位主要用于字体相关的尺寸。
  7. 其他绝对单位(in、cm、mm、pt、pc):除了像素外,CSS 还支持其他绝对单位来表示尺寸,如英寸(in)、厘米(cm)、毫米(mm)、磅(pt)和 Pica(pc)。但这些单位在屏幕上的实际显示尺寸可能有所不同,因此在网页设计中较少使用。

尺寸单位的选择取决于实际需求和设计目标。通常,使用相对单位(如百分比、视窗单位、em、rem)可以实现更好的响应式布局和适应性。而固定单位(如像素)适合于需要精确控制尺寸的情况,如图形设计和特定像素级布局要求。

简单说下自适应布局和响应式布局

自适应布局和响应式布局都是用于适应不同屏幕大小和设备的网页布局方法,但它们之间有些许不同。

  1. 自适应布局(Adaptive Layout):
  • 自适应布局使用固定的布局尺寸,通过媒体查询(Media Queries)来适应不同的屏幕大小和设备。
  • 布局会根据预定义的断点(Breakpoints)在不同的屏幕宽度范围内切换。
  • 在每个断点处,页面的布局会发生变化,以便显示最佳的布局。
  • 自适应布局通常使用百分比或固定单位(如像素)来定义容器和元素的宽度。
  1. 响应式布局(Responsive Layout):
  • 响应式布局使用流式网格(Fluid Grids)和弹性图片等技术,使网页能够自动适应不同的屏幕大小和设备。
  • 布局的尺寸使用相对单位(如百分比)来定义,使其能够根据屏幕的宽度进行伸缩。
  • 响应式布局可以实现无缝的流动效果,让内容在不同屏幕上显示得更加自然。
  • 对于小屏幕设备,响应式布局可能会隐藏或重新排列某些元素,以提供更好的用户体验。

选择自适应布局还是响应式布局取决于项目需求和设计目标。下面是一些考虑因素:

  • 自适应布局相对较简单,适合于对特定设备进行优化的情况。它可以通过针对不同断点定义不同的布局来实现针对性调整。
  • 响应式布局更加灵活,可以适应各种屏幕尺寸和设备类型。它允许网页以流动的方式自适应不同的屏幕大小,并且更易于管理和维护。

无论选择哪种布局方式,重要的是在设计和开发过程中考虑到多种设备和屏幕尺寸,并确保用户能够获得良好的体验。

相关文章
|
10天前
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
30 5
|
2月前
|
存储 开发框架 前端开发
从零开始学习前端开发
前端开发是现代互联网应用程序开发中不可或缺的一部分。本文将带您从零开始学习前端开发,包括HTML、CSS和JavaScript等核心技术,以及常见的开发框架和工具。
|
9天前
|
前端开发 JavaScript Java
通过学习mayfly,我学会了前端如何优雅设计字典值
`shigen`是一位擅长多种编程语言的博主,他在探索[mayfly-go](https://juejin.cn/post/7319365035552309248)项目后,发现了对枚举值管理的优雅设计。他分享了如何将字典和枚举值结构化,使用Vue+typescript实现更易维护的代码。通过创建`TagType`和`EnumValue`类,以及提供静态方法,实现了模块化和简洁的字典处理。示例展示了如何在页面中高效引用和显示字典数据,提高了代码的可读性和可维护性。
16 3
通过学习mayfly,我学会了前端如何优雅设计字典值
|
1月前
|
存储 缓存 监控
2024年春招小红书前端实习面试题分享
春招已经拉开帷幕啦! 春招的拉开,意味着新一轮的求职大战已经打响,希望每位求职者都能充分准备,以最佳的状态迎接挑战,找到心仪的工作,开启职业生涯的新篇章。祝愿每位求职者都能收获满满,前程似锦!
65 3
|
1月前
|
前端开发 数据可视化 安全
2024金三银四必看前端面试题!简答版精品!
2024金三银四必看前端面试题!2w字精品!简答版 金三银四黄金期来了 想要跳槽的小伙伴快来看啊
78 3
|
2月前
|
存储 移动开发 前端开发
从零开始学习前端开发
前端开发是一项非常有前途的技能,在当今数字化时代中变得越来越重要。本文将介绍从零开始学习前端开发所需的基本知识,包括HTML、CSS和JavaScript的基础知识以及相关工具和框架。
|
2月前
|
前端开发 JavaScript 开发者
从零开始学习前端开发
前端开发是当前最热门的IT职业之一,随着互联网的飞速发展,对于具有良好前端知识的开发者需求不断增长。然而,对于初学者来说,学习前端开发需要掌握一系列的技术和工具,这可能会让他们感到非常困难和挫败。本文将从零开始,为初学者介绍前端开发的核心技术和实践经验。
|
2月前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
62 1
|
8月前
|
Web App开发 前端开发 JavaScript
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
95 0
|
8月前
|
前端开发 定位技术
前端学习笔记202305学习笔记第二十三天-地图单线程配置
前端学习笔记202305学习笔记第二十三天-地图单线程配置
62 0
前端学习笔记202305学习笔记第二十三天-地图单线程配置