理灵文化

汗流浃背

汗流浃背

甚至不小心鸽了一个多小时

1.介绍js数组方法，数组遍历方法的相关区别

2.react常用hook

3.css居中

4.ts工具类型

5.== 和 === 区别

6.filter 和 find 区别

7.语义化标签用处，怎么用

8.interface和type区别

9.学习路线，怎么学习的，看谁的博客

10.display:none和opacity: 0的区别

11.严格模式会渲染两次吗

项目相关 (失忆完了)

五天内

TS工具类型

一种在类型别名的基础上，基于泛型去动态创建新类型

Partial：将所有类型设置为可选Partial<A>

Required:所有属性必选

readonly：将属性标记为只读

Record:声明属性名还未确定的接口类型

Record<K,T>构造具有给定类型T的一组属性K的类型。在将一个类型的属性映射到另一个类型的属性时，Record非常方便。

type UserProps = "name" | "job" | "email";
// 等价于你一个个实现这些属性了
type User = Record<UserProps, string>;
const user: User = {
  name: "John Doe",
  job: "fe-developer",
  email: "john.doe@example.com",
};

Pick:接收一个对象类型，以及一个字面量类型组成的联合类型，这个联合类型只能是由对象类型的属性名组成的。它会对这个对象类型进行裁剪，只保留你传入的属性名组成的部分

type User = {
  name: string;
  age: number;
  email: string;
  phone: string;
};
// 只提取其中的 name 与 age 信息
type UserBasicInfo = Pick<User, "name" | "age">;

Omit:就是 Pick 类型的另一面，它的入参和 Pick 类型一致，但效果却是相反的——它会移除传入的属性名的部分，只保留剩下的部分作为新的对象类型

type User = {
  name: string;
  age: number;
  email: string;
  phone: string;
};

// 只移除 phone 属性
type UserWithoutPhone = Omit<User, "phone">;

Exclude 和Extract:差集和交集

type UserProps = "name" | "age" | "email" | "phone" | "address";
type RequiredUserProps = "name" | "email";
// OptionalUserProps = UserProps - RequiredUserProps
type OptionalUserProps = Exclude<UserProps, RequiredUserProps>;
const optionalUserProps: OptionalUserProps = "age"; // 'age' | 'phone' | 'address';

Extract

type UserProps = "name" | "age" | "email" | "phone" | "address";
type RequiredUserProps = "name" | "email";
type RequiredUserPropsOnly = Extract<UserProps, RequiredUserProps>;
const requiredUserPropsOnly: RequiredUserPropsOnly = "name"; // 'name' | 'email';

display none 和 opacity 0二者的区别

display:none

• 完全隐藏HTML元素并从页面布局移除他，不会显示在页面上，也不会占据空间，不会响应任何交互事件

opacity:0

• 完全透明，但元素仍然存在于页面布局中，并保持原始大小和位置，但对用户来说不可见，仍然可以接收交互事件，包括键盘和屏幕阅读器事件。

无障碍性考虑

display:none：

• 可见性：display: none 隐藏了元素，对于所有用户，包括屏幕阅读器用户，它都是不可见的。
• 交互性：由于元素被隐藏，因此不会响应键盘或屏幕阅读器事件。这可能导致对于视力障碍者而言，无法访问其中的内容或功能。
• 语义：如果使用 display: none 隐藏了某些重要内容，屏幕阅读器无法访问这些内容，因此会导致可访问性问题。

opacity: 0:

• 可见性：opacity: 0 使元素不可见，但仍然存在于页面布局中，因此对于视力障碍者来说，它是可见的（虽然不可见，但占据页面空间）。
• 交互性：元素保持交互性，因此可以响应键盘和屏幕阅读器事件，使其内容和功能可访问。
• 语义：使用 opacity: 0 可以确保屏幕阅读器能够访问元素的内容，以提供更好的可访问性。

额外

visibility: hidden 是什么？

display: none： 从这个世界消失了, 不存在了； opacity: 0： 视觉上隐身了, 看不见, 可以触摸得到； visibility: hidden： 视觉和物理上都隐身了, 看不见也摸不到, 但是存在的。

来源：opacity: 0、visibility: hidden、display: none 优劣和适用场景，以及隐藏元素的几种方法 - 掘金 (juejin.cn)