开发中遇见的问题

Flex 布局中内容被挤压的问题

问题描述

在 Flex 布局中，子元素可能会因为空间不足而被自动压缩。

解决方案

.child-element {
  flex-shrink: 0; /* 防止元素被挤压 */
}

子元素被选中时修改父元素样式

问题描述

需要根据子元素的状态（如获得焦点）来改变父元素的样式。

解决方案

.parent-element:focus-within {
  /* 当子元素获得焦点时应用的父元素样式 */
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

使用场景

适用于表单输入、导航菜单等需要根据子元素状态高亮显示父容器的场景。

forEach 中使用 async 问题

问题描述

在开发中使用 forEach 遍历数组时，使用 async 调用异步函数，发现异步函数还没有执行完成，就继续向下执行了。

原因分析

在 forEach 循环中使用 async 函数时，forEach 循环会立即执行完所有迭代，而不会等待异步函数完成。这是因为 forEach 是同步的，而 async 函数返回的是一个 Promise 对象，它是异步的。

解决方案

• 使用 for of 替换 forEach
• 使用 reduce 替换 forEach