前端面试

理灵文化

汗流浃背

汗流浃背

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

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非常方便。

1
2
3
4
5
6
7
8
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:接收一个对象类型，以及一个字面量类型组成的联合类型，这个联合类型只能是由对象类型的属性名组成的。它会对这个对象类型进行裁剪，只保留你传入的属性名组成的部分

1
2
3
4
5
6
7
8
type User = {
  name: string;
  age: number;
  email: string;
  phone: string;
};
// 只提取其中的 name 与 age 信息
type UserBasicInfo = Pick<User, 'name' | 'age'>;

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

1
2
3
4
5
6
7
8
9
type User = {
  name: string;
  age: number;
  email: string;
  phone: string;
};

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

Exclude 和Extract:差集和交集

1
2
3
4
5
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

1
2
3
4
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 可以确保屏幕阅读器能够访问元素的内容，以提供更好的可访问性。
额外
display: none visibility: hidden opacity: 0
是否占有空间 × √ √
是否可以进行DOM事件监听 × × √
是否可以点击 × × √
是否可以被子元素继承 × √ √
子元素能否通过改变属性值来改变继承自父亲的隐藏状态 × √ ×

visibility: hidden 是什么？

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

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