前端笔试复盘 | 知识点总结
考察点：
递归
选择器判断（ 、+、~、>分别是声明选择器，找出第一个p的选择器）
meta 打开x秒后自动跳转
栈
console.info(parseInt(2021xxx))
选择器优先级，伪类、子代、后代
（数据结构）后序遍历，二叉树的遍历
== 与 ===，instanceof 的用法，“123” 与 new String("123")
（数组）不会改变原数组的方法？ reverse、map、splice、sort
（数据结构）逻辑结构：集合结构、图形结构、树形结构、线性结构。顶点集、边集
z-index 生效 图的层级，浮动？
（计网）防火墙，状态检测维护连接表的作用—— 跟踪TCP连接？还是用户访问
（操作系统）进程的创建与终止——显示系统调用fork，也允许一个进程引发另一个进程？
var 变量提升、重复声明——一个是变量，一个是函数。
属性表达式
多选题：
grig布局，grid-template-columns，gap
null、undefined 在 1 + _ = 1 中的应用；isNaN(null) == Number.isNaN(null)——》例如：1 + null = 1 ， null 转数值，正确
HTML5 Canvas API 的方法，fillRect、moveTo、beginPath、drawCircle
Proxy
CSS transform属性
编程题 - 进度环
css样式的设置&逻辑计算&判空&阅读代码
复盘知识点与汇总：
选择器判断（ 、+、~、>分别是声明选择器，找出第一个p的选择器）
后代，所有子孙元素
> 子代，只选择直接子元素
+ 兄弟，紧接在另一个元素后的元素，且二者有相同父元素
~ 通用兄弟选择器，选择某元素后面的所有兄弟元素
找出第一个 p 的选择器可以是
:first-child、:first-of-type、:nth-child(1)等。element1 ~ element2 解释：
- element1 ~ element2：表示选择所有在element1后面的element2，且它们共享同一个父元素。
- element1 和 element2 必须是 兄弟关系（同父）
- 只会选element1之后的元素，之前的不会被选择。
★ meta 打开x秒后自动跳转
✅ 在 HTML 中，如果你想在 1 秒后自动跳转到指定页面，正确的写法如下：
<meta http-equiv="refresh" content="1; url=https://example.com">
💡 解释：
http-equiv="refresh"：告诉浏览器刷新或跳转。
content="1; url=..."：
1表示等待 1 秒后执行。
url=后跟要跳转的目标地址。
🌟 示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="refresh" content="1; url=https://www.google.com"><title>页面跳转中...</title>
</head>
<body><p>页面将在 1 秒后跳转到 Google...</p>
</body>
</html>
打开 x 秒后自动跳转的方法：
使用
<meta http-equiv="refresh" content="x; url=目标网址">实现。也可用 JavaScript 的 setTimeout 实现跳转。
console.info(parseInt(2021xxx))
一、parseInt ——> 从头解析数字直到遇非数字
parseInt("2021xxx") //✅ 2021 ——> parseInt 从头解析数字直到遇非数字
🧩 小结表格：
| 表达式 | 结果 | 原因 |
|---|---|---|
parseInt(2021xxx) | ❌ 报错 | xxx 未定义变量 |
parseInt(xxx2021xxx) | ❌ 报错 | 整个是未定义变量 |
parseInt("2021xxx") | ✅ 2021 | 从头解析数字直到遇非数字 |
parseInt("xxx2021xxx") | ✅ NaN | 首字符非数字，无法解析 |
parseInt() 与 Number() 的区别
| 对比项 | parseInt() | Number() |
|---|---|---|
| 解析规则 | 从左往右读，遇到 非数字停止 | 必须整个字符串合法 |
| 空格 | 忽略 前后空格 | 忽略前后空格 |
| 小数 | 截断为整数 | 返回小数 |
| 字符混合 | 返回部分数字 或 NaN | 必然 NaN |
示例 "12.34abc" | 12 | NaN |
二、console.info 是什么？
console.info() 是 浏览器控制台输出方法，与 console.log() 类似，用于在开发时打印调试信息。
console.info("这是提示信息");
👉 会在 浏览器控制台（Console 面板） 输出一条信息。
🧩 与其他 console 方法的区别
| 方法 | 作用 | 控制台显示样式 |
|---|---|---|
console.log() | 普通日志输出 | 默认样式（白色/灰色） |
console.info() | 信息输出（语义上更偏“提示”），用于流程或状态提示。 | 某些浏览器显示蓝色(或浅灰) 或带 ℹ️ 图标 |
console.warn() | 警告输出 | 黄色带 ⚠️ 图标 |
console.error() | 错误输出 | 红色带 ❌ 图标 |
console.debug() | 调试信息（有时被隐藏） | 通常灰色 |
console.table() | 以表格形式输出对象或数组 | 格式化显示 |
例子：
console.log("普通输出");
console.info("提示信息");
console.warn("警告信息");
console.error("错误信息");
选择器优先级：行内 > ID＞ 类 ＝ 伪类 ＝ 属性 > 标签 = 伪元素 > 通配符/组合符/后代/子代
优先级计算：内联样式（1000）> ID选择器（100）> 类 选择器/属性 选择器/伪类（10）> 元素/标签选择器/伪元素（1）> 通用选择器/通配符/组合符/后代/子代（0）。
注意：!important优先级最高，但尽量少用。
伪类（如:hover）和伪元素（如::before）的区别：伪类是交互型，伪元素是静态的。
🧩 一、CSS 优先级基础公式
（记忆口诀：行内 > ID > 类 > 标签）：
| 类型 | 权重表示 | 举例 |
|---|---|---|
| 行内样式 | (1, 0, 0, 0) | <div style="color:red;"> |
| ID 选择器 | (0, 1, 0, 0) | #app |
| 类、伪类、属性选择器 | (0, 0, 1, 0) | .box、[type="text"]、:hover |
| 标签、伪元素选择器 | (0, 0, 0, 1) | div、p::after |
| 通配符/组合符/后代/子代 | (0, 0, 0, 0) | *、>、 （空格） |
当多个规则作用在同一个元素上时，比较权重大小（从左到右），大的优先。
例子：
span:first-child是 CSS 中 伪类选择器，选中在父元素中是第一个子元素，并且这个子元素是<span>的元素优先级：伪类 > 通配符后代/子代
（数据结构）★后序遍历，二叉树的遍历（默认层次遍历）
先序遍历：根->左->右
中序遍历：左->根->右
★ 后序遍历：左->右->根
层序遍历：按层遍历
相同点：左—》右，左右节点的遍历顺序不变
形容一棵二叉树的节点顺序” 默认是层次遍历（Level Order Traversal）。
== 与 ===，instanceof 的用法，“123” 与 new String("123")
==：相等，会进行类型转换。
===：严格相等，不会类型转换，类型和值都必须相同。
instanceof ，用于检测 构造函数的prototype属性 是否出现在 某个实例对象的原型链上。
示例：
"123" == new String("123") // true，因为会转换成字符串比较
"123" === new String("123") // false，因为类型不同，前者是字符串，后者是对象
new String("123") instanceof String // true
（数组）不会改变原数组的方法？ reverse、map、splice、sort
不会改变原数组：map、filter、slice 截断、concat、reduce等
会改变原数组的方法：reverse、splice、sort、push、pop
（数据结构）逻辑结构：集合结构、图形结构、树形结构、线性结构。顶点集、边集
集合结构：元素之间没有关系。
线性结构：元素之间存在一对一的关系，如数组、链表。
树形结构：元素之间存在一对多的关系，如二叉树、B树。
图形结构：元素之间存在多对多的关系，如无向图、有向图。
顶点集、边集，构成多对多的关系。
z-index 生效
- zindex 仅在定位元素（ position 不为 static ）上生效
层叠上下文：形成层叠上下文的条件（根元素、position为absolute/relative 且 z-index 不为auto、flex子项且z-index不为auto等）。
浮动元素会脱离文档流，但不会脱离文本流，浮动元素之间会相互影响。
z-index 与浮动无关，与 position 有关
（计网）防火墙，状态检测维护连接表的作用—— ✅ 跟踪TCP连接？还是❌用户访问
状态检测防火墙会维护一个连接表，跟踪TCP连接的状态（如SYN_SENT、ESTABLISHED等）。
作用：根据连接状态来允许或拒绝数据包，提高安全性。
（操作系统）进程的创建与终止——显示系统调用fork，也允许一个进程引发另一个进程？
fork：创建一个 与父进程几乎完全相同 的子进程。
进程终止：正常终止（exit）和异常终止（收到信号等）。
一个进程可以通过 系统调用（如fork、exec）创建另一个进程。
var 变量提升、重复声明—— 同名，一个变量，一个函数
- 函数声明提升 在 变量提升 之前。
var声明的变量会提升到作用域顶部，但赋值不提升。
函数声明也会提升，且整体提升（包括函数体）。
重复声明：var可以重复声明，let和const不可以。
判断如下代码，会输出：undefined "a" function()
console.log(a);
var a = "a";
var a = ()=>{console.log(a); var a = "a1"
}
a();
consolo.log(a);15题单选，5题多选，1题编程题。