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

在这里插入图片描述

文章目录

- 解释下 JavaScript 中的async，await与Promise
- JavaScript 预编译到底干了什么
- css的选择器嵌套过多带来的问题
- 简单说下css的尺寸体系
- 简单说下自适应布局和响应式布局

解释下 JavaScript 中的async，await与Promise

在JavaScript中，async、await和Promise是用于处理异步操作的关键字和对象。

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) => {
  // 处理异步操作失败的错误
});

async 和 await 是 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 完成并返回结果。

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

JavaScript 预编译到底干了什么

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

变量预编译（变量提升）：
- 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;

函数预编译：
- 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 中，选择器的嵌套过多可能会带来以下问题：

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

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

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

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

简单说下css的尺寸体系

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

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

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

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

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

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

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