39 KiB
tags, create time
| tags | create time | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
2026-04-30 14:30 |
武科大 - 第六次前端摸底测试（错题复盘）
概述
本文档记录金山考试 - 武科大第六次前端摸底测试的全部 110 道单选题错题。本次测试覆盖 JavaScript 基础、事件机制、异步编程、Axios/Fetch、浏览器 API、HTTP 协议、CSS、Vue 3、React Hooks、Node.js / npm、Webpack 等知识领域。
错题库已按知识点主题分组，每题附带详细解析、代码示例和图解，帮助查漏补缺。
[!summary] 错误统计
- 总题数：110 道题
- 错题数：27 道
- 正确率：~75%
- 薄弱领域：事件机制理解、异步执行顺序、Vue/React 深度概念、HTTP 状态码区分
错题详解
一、事件处理
Q2 — 取消默认事件 vs 阻止冒泡 ❌ 答 A，正确 C
题目：如何取消默认事件效果？
选项 内容 A cancelBubble=trueB stopPropagation()C preventDefault()✅D return
[!warning] 核心混淆
cancelBubble和stopPropagation()是阻止事件冒泡，不是取消默认行为！
e.preventDefault()→ 取消元素的默认动作（如<a>跳转、<form>提交）e.stopPropagation()→ 停止事件向父元素传播（不冒泡了）e.cancelBubble = true→ IE 旧版写法，等同于stopPropagation()- 在行内
onclick="return false"可以等效于preventDefault() + stopPropagation()
flowchart LR
subgraph "事件流"
A[捕获阶段] --> B[目标阶段]
B --> C["冒泡阶段"]
end
preventDefault["preventDefault()\n→ 阻止默认行为\n不影响冒泡"] -.-> B
stopPropagation["stopPropagation()\n→ 阻止向上冒泡\n不影响默认行为"] -.-> C
style preventDefault fill:#EF4444,color:#fff
style stopPropagation fill:#3B82F6,color:#fff
[!tip] 常见默认行为
<a href>点击跳转<form>提交刷新页面- 右键菜单
- 文本选择拖拽
- 鼠标滚轮页面滚动
Q19 — CSS 继承性 ❌ 答 D，正确 C
题目：下面哪个属性不会继承？
选项 内容 A colorB font-sizeC border✅D line-height
[!answer] 解析 CSS 中只有部分属性会继承给子元素。可继承的属性主要是与文本渲染相关的：
color、font-*、line-height、text-*、visibility等。而布局相关属性几乎都不继承：border、margin、padding、width、height、background等。
graph TB
subgraph "可继承的属性"
T1["color"]
T2["font-size / font-family"]
T3["line-height"]
T4["text-align"]
end
subgraph "不可继承的属性 ← 重点记 border!"
B1["border"]
B2["margin / padding"]
B3["width / height"]
B4["background"]
end
style B1 fill:#EF4444,color:#fff
Q16 — 获取 CSS 样式 ❌ 答 A，正确 B
题目：下面哪个方法可以获取元素的 CSS 样式？
选项 内容 A getElementStyle()B getComputedStyle()✅C getStyle()D getCurrentStyle()
[!answer] 解析
- 标准方法：
window.getComputedStyle(element)→ 返回所有最终计算后的样式- IE8 兼容：
element.currentStyle（已过时，仅 IE 支持）- A、C 都不是原生 API
const el = document.querySelector('.box');
const styles = window.getComputedStyle(el);
console.log(styles.backgroundColor); // 计算后的值，如 "rgb(255, 0, 0)"
[!tip]
getComputedStylevsel.style
方法 能读什么 返回值类型 el.style.prop只读元素内联样式（ style="..."）字符串 getComputedStyle()读所有生效样式（含 CSS 文件、类） CSSStyleDeclaration 对象
Q31 — 阻止事件冒泡 ❌ 答 C，正确 B
题目：用于阻止事件冒泡的方法？
选项 内容 A 事件对象.stopDeafault()B 事件对象.stopPropagation()✅C 事件对象.preventPropagation()D 事件对象.preventDefault()
[!answer] 解析 注意拼写！
stopPropagation()是标准方法。A 选项stopDeafault是个拼写陷阱（应为preventDefault），D 是阻止默认行为而非冒泡。
Q32 — 事件委托 ❌ 答 D，正确 D（此题作答正确，但文档中标注为错题——请确认）
题目：关于事件委托，说法错误的是？
选项 内容 D（错误说法） 事件委托中的 this与e.target指向同一个对象，它们可以随意互换
[!answer] 解析 事件委托中绑定的回调函数的
this指向注册事件的父元素，而e.target指向实际触发事件的子元素——两者可能不同！
ul.addEventListener('click', function(e) {
console.log(this); // <ul>（委托绑定的元素）
console.log(e.target); // <li>（实际点击的元素）
});
Q17 — TypeError ❌ 答 A（其实正确），待核实
[!note] 本题标注有误：正确答案应为 B（将函数作为对象使用会抛 TypeError）。
undefined变量操作抛出的是ReferenceError。原题答案可能有误。
二、JavaScript 数据类型与作用域
Q7 — 不属于 JS 对象数据类型的 ❌ 答 A，正确 D
题目：下列不属于 JS 对象（引用）数据类型的是？
选项 内容 A RegExp B Function C Array D String ✅（原始类型）
[!answer] 解析 JS 的数据类型分两类：
graph TD All["JS 数据类型"] --> Prim["原始类型 Primitive"] All --> Ref["引用类型 Object"] Prim --> P1["String"] Prim --> P2["Number"] Prim --> P3["Boolean"] Prim --> P4["null"] Prim --> P5["undefined"] Prim --> P6["Symbol"] Prim --> P7["BigInt"] Ref --> R1["Object"] Ref --> R2["Array"] Ref --> R3["Function"] Ref --> R4["RegExp"] Ref --> R5["Date"] style P1 fill:#EF4444,color:#fff style R2 fill:#4FC08D,color:#fff style R3 fill:#4FC08D,color:#fff style R4 fill:#4FC08D,color:#fff
String是原始类型（ primitive ），而 RegExp、Function、Array 都是对象类型（继承自 Object）。
Q23 — typeof +'136' ❌ 答 D，正确 B
题目：
console.log(typeof +'136')输出的结果？[!tip] 一元运算符
+会将字符串转为数字'136'→Number('136')→136，所以typeof 136→"number"
Q24 — 闭包作用域 ❌ 答 A（实际作答正确，待核实）
[!note]
f2访问的是外层f1中的num = 123，通过闭包实现。输出 123。若答案为 A 则作答正确。
三、异步编程 & 执行顺序
Q13 & Q44 — Promise + setTimeout 执行顺序 ❌ 答 C/Q44答D，正确 A/C
题目（Q13 等价于 Q44）：以下代码输出顺序？
setTimeout(function () { console.log(1); }, 0); new Promise(function executor(resolve) { console.log(2); for (var i = 0; i < 10000; i++) { i == 9999 && resolve(); } console.log(3); }).then(function () { console.log(4); }); console.log(5);答案：
2 3 5 4 1
[!danger] 高频考点：JS 执行模型 JS 是单线程的，事件循环 Event Loop 的执行优先级如下：
flowchart TD Sync["同步代码 → 立即执行"] --> Micro["微任务 Microtask<br/>Promise.then / queueMicrotask"] Micro --> Macro["宏任务 Macrotask<br/>setTimeout / setInterval"] style Sync fill:#4FC08D,color:#fff style Micro fill:#EAB308,color:#000 style Macro fill:#3B82F6,color:#fff逐行分析：
setTimeout(...0)→ 注册为宏任务，放入定时器队列new Promise(...)→ 构造函数是同步执行的 → 打印2- for 循环内调用了
resolve()→ 但.then()是微任务，不会立刻执行console.log(3)→ 同步代码 → 打印3console.log(5)→ 同步代码 → 打印5- 同步代码执行完毕 → 清空微任务 →
.then(() => 4)执行 → 打印4- 微任务清空 → 进入下一轮宏任务 →
setTimeout回调 → 打印1顺序：2 → 3 → 5 → 4 → 1
[!tip] 记忆口诀 "同步先走，微任务跟上，宏任务压轴"
Q43 — var + setTimeout 闭包问题 ❌ 答 B，正确 A
题目：下面的输出结果是什么？
console.log(8); for (var i = 0; i < 5; i++) { setTimeout(function () { console.log(i); }, 1000 * i); } console.log(9);答案：
8, 9, 5, 5, 5, 5, 5
[!warning] 经典闭包陷阱
var声明的i是函数作用域（全局）变量，所有 setTimeout 回调共享同一个i。当回调执行时，for 循环早已结束，i === 5（条件i < 5不成立时的值）。解决方法：
// 方案1：let（块级作用域） for (let i = 0; i < 5; i++) { /* 每个循环创建独立 i */ } // 方案2：IIFE 闭包保存快照 for (var i = 0; i < 5; i++) { (function(j) { setTimeout(() => console.log(j), 1000 * j); })(i); }
Q6 — 参数传值 vs 传引用 ❌ 答 A（实际正确，待核实）
[!note] 函数参数传值，
num = num + 1只修改局部变量，原值不变。答案 A 正确。
Q14 — 数组传引用 ❌ 答 C（实际正确，待核实）
[!note] 数组是引用类型，push 直接修改原数组，答案 C 正确。
Q27 — 对象引用 ❌ 答 B（实际正确，待核实）
[!note]
obj2 = obj1是引用赋值，修改 obj2.uname 也影响 obj1。答案 B 正确。
四、浏览器 API & BOM
Q5 — AJAX 核心对象 ❌ 答 C（实际正确，待核实）
[!note]
XMLHttpRequest首字母大写全称才是标准答案，xhr只是变量名缩写。答案 C 正确。
Q9 — load vs DOMContentLoaded ❌ 答 B（实际正确，待核实）
[!note]
window.onload（即load事件）在 HTML 及其所有外部资源（图片、样式表、iframe）全部加载完毕后触发。DOMContentLoaded只需 DOM 树构建完成即可。题目问的是"HTML + 所有外部资源都加载完成"，所以是load。
Q73 — BOM 中操作地址栏的对象 ❌ 答 D（实际正确，待核实）
[!note]
location对象提供 URL 相关信息和操作。
Q36 — :nth-child 伪类 ❌ 答 D，正确 C
题目：
:nth-child()用于选择什么？[!answer]
:nth-child(n)根据序号匹配子元素。例如:nth-child(2)选中第 2 个子元素，:nth-child(odd)选奇数位。它不看元素类型，只看位置。
Q37 — text-overflow 用途 ❌ 答 C（实际正确，待核实）
[!note]
text-overflow: ellipsis用于隐藏超长文本并用省略号替代，需配合white-space: nowrap; overflow: hidden使用。
Q38 — AJAX 请求完成事件 ❌ 答 A（实际正确，待核实）
[!note]
xhr.onload在请求成功完成后触发（readyState === 4）。
Q40 — 解析 JSON 响应的对象 ❌ 答 B，正确 A
题目：接收到
xhr.responseText后使用哪个对象解析？[!answer]
JSON.parse()。xhr 收到的永远是字符串，需要手动JSON.parse(responseText)转换为 JS 对象。注意不要和eval()混用——JSON.parse()更安全、更快。
Q28 — 自定义 data- 属性 ❌ 答 D（实际正确，待核实）
[!note]
dataset是一个DOMStringMap对象，不是函数。通过element.dataset.id访问data-id的值。
Q29 — innerText vs innerHTML ❌ 答 D（实际正确，待核实）
[!note]
innerText只处理纯文本，不解析标签；innerHTML会解析 HTML 标签。D 说两者作用一致是错误的。
Q30 — 事件委托获取目标元素 ❌ 答 A（实际正确，待核实）
[!note]
event.target指向真正触发事件的元素，.tagName获取标签名。
Q33 — localStorage vs sessionStorage ❌ 答 D，正确 A
题目：关于 localStorage/sessionStorage，下列说法错误的是？
[!answer] A 错误——localStorage/sessionStorage 只能存储字符串类型的数据。存储对象需要先
JSON.stringify()，读取后JSON.parse()。虽然看起来像能存任意类型，但实际上底层全部存为字符串。
Q34 — 定时器 ❌ 答 C（实际正确，待核实）
[!note]
setTimeout不是立即执行的，它会在延迟时间后将回调加入宏任务队列等待执行。
Q35 — classList 方法 ❌ 答 C（实际正确，待核实）
[!note] 切换类的方法是
classList.toggle()，没有toggleClass()这个方法名。
五、HTTP & 网络
Q51 — HTTP 400 状态码 ❌ 答 B，正确 D
题目：HTTP 状态码 400 表示什么意思？
[!warning] 高频易混的四组 4xx 状态码
状态码 含义 典型场景 400 Bad Request 请求格式错误、参数校验失败 401 Unauthorized 未认证/token 过期 403 Forbidden 无权限访问（已认证但级别不够） 404 Not Found 资源不存在 本题容易把 400（请求参数错误）和 401（token 过期）搞混。记住：400 是客户端语法/参数问题，401 是身份验证问题。
Q52 — Content-Type 的作用 ❌ 答 D，正确 A
题目：Content-Type 通常用于指定什么？
[!answer] 请求体的类型。告诉服务器"我的请求体是 JSON / form-urlencoded / multipart/form-data"。
常见值：
application/json— 发送 JSON 数据application/x-www-form-urlencoded— 传统表单提交multipart/form-data— 文件上传text/plain— 纯文本
六、Axios & 请求封装
Q12 — 响应拦截器错误处理 ❌ 答 A，正确 C
题目：响应拦截中想处理异常且仍被 catch 捕获，正确的是？
[!answer]
axios.interceptors.response.use(() => {}, error => { return Promise.reject(error) })关键点：
response.use接收两个参数：第一个是成功回调，第二个是错误回调- 错误回调中必须
return Promise.reject(error)才能让下游.catch()收到// 正确写法 —— 双参数形式 axios.interceptors.response.use( response => response, // ✅ 成功回调（第一参数） error => Promise.reject(error) // ✅ 失败回调（第二参数） ); // 错误写法 —— 只给了一个参数，当成成功回调处理了 axios.interceptors.response.use(error => {...}) // ❌ error 被当成成功处理
七、Node.js & npm
Q49 — Node.js 发 HTTP 请求的模块 ❌ 答 D，正确 A
题目：Node.js 中允许执行 HTTP 请求的内置模块？
[!answer]
http模块。它提供http.request()和http.get()方法用于发起 HTTP 请求。https模块也存在，但http是最通用的标准答案。import http from 'node:http'; const req = http.get('http://example.com', (res) => { let data = ''; res.on('data', chunk => data += chunk); res.on('end', () => console.log(JSON.parse(data))); });
Q10 — Node.js 描述不正确的一项 ❌ 答 D，正确 A
题目：下列关于 Node.js 描述不正确的是？
[!answer] Node.js 不能操作 DOM。DOM（Document Object Model）是浏览器提供的 API，Node.js 运行在服务端没有浏览器环境。Node.js 可以做文件操作 (
fs)、发请求 (http/https)、爬虫等。[!tip] 如果非要在 Node.js 中操作 DOM，可以用
jsdom库模拟浏览器环境。
Q11 — 非 Node.js 内置模块 ❌ 答 D（实际正确，待核实）
[!note]
dayjs是第三方库，需要通过 npm 安装。path/url/http 都是内置模块。
八、Vue 3
Q41 — onMounted vs mounted ❌ 答 D，正确 A
题目：Vue 3 Composition API 中组件挂载后调用的钩子？
[!answer] Vue 3 Composition API（
<script setup>/setup()）中使用onMounted()以函数形式调用。 Vue 2 Options API 中使用mounted: function() {}配置项形式。两套 API 的区别：
// Vue 2 Options API export default { mounted() { console.log('组件已挂载'); } } // Vue 3 Composition API import { onMounted } from 'vue'; onMounted(() => { console.log('组件已挂载'); });
Q95 — script setup 错误说法 ❌ 答 D，正确 C
题目：关于
<script setup>的说法错误的是？[!answer]
<script setup>不需要 return。它会自动暴露顶层绑定（变量、函数），因此 C 说"需要使用 return 暴露数据"是错误的。<script setup> import { ref } from 'vue'; const count = ref(0); // ✅ 自动暴露，模板中可直接用 count const increment = () => count.value++; // ✅ 自动暴露 // ❌ 不需要 return { count, increment } </script>
Q102 — reactive 解构导致响应式失效 ❌ 答 A，正确 B
题目：哪种情况可能导致响应式失效？
[!warning] reactive 对象解构会丢失响应性！
const state = reactive({ count: 0, name: 'vue' }); // ❌ 解构后 count 是普通 number，不再响应 const { count } = state; count++; // ❌ 不会触发视图更新 // ✅ 正确做法：用 toRef / toRefs const count = toRef(state, 'count'); count.value++; // ✅ 保持响应式原理：解构时提取的是值的副本，断开了与 reactive Proxy 的联系。Object.assign 会触发 Proxy set trap，所以不受影响。
Q103 — Vue 生命周期顺序 ❌ 答 D，正确 B
题目：父子组件 mounted 执行顺序？
[!answer] 子组件先 mounted，父组件后 mounted。
flowchart TD A["父组件 setup"] --> B["子组件 setup"] B --> C["子组件 render + mount"] C --> D["子组件 onMounted 🔔"] D --> E["父组件 render + mount"] E --> F["父组件 onMounted 🔔"] style D fill:#4FC08D,color:#fff style F fill:#3B82F6,color:#fff记忆：先子后代，先上后下。
Q105 — Teleport ❌ 答 B，正确 C
题目：关于 teleport 的正确理解？
[!answer]
teleport可以使用toprop 动态禁用（<Teleport :to="disabled ? '#default' : '#modal'" />）✅- 传送的内容保持与原组件的数据绑定 ❌（A 说只能传 body 是错的）
- 一个组件可以有多个 teleport ❌
[!tip] Teleport 本质 Teleport 只是改变 DOM 的物理位置，组件的逻辑归属和数据绑定完全不变，就像"搬家但户口没变"。
Q101 — provide/inject 适用场景 ❌ 答 C，正确 B
题目：何时用 provide/inject 比 props 更合适？
[!answer] 当跨多层组件（深嵌套）传递数据时，props drilling 会让中间层不得不透传 props，这时 provide/inject 可以直接从祖先注入到任意后代，跳过中间层。
Q96 — Koa 中间件执行顺序 ❌ 答 A（实际正确，待核实）
[!note] Koa 中间件像洋葱圈模型：
┌─────────────────────────────┐ │ middlewares in order: │ │ [1] → [3] │ │ ...body... │ │ [4] ← [2] │ └─────────────────────────────┘输出：
1 → 3 → 4 → 2（before next → after next）
九、React
Q68 — useEffect 只执行一次 ❌ 答 C，正确 A
题目：useEffect 如何执行只运行一次的副作用？
[!answer] 传入空依赖数组
[]。这等价于 Class 组件的componentDidMount。useEffect(() => { // 只在组件挂载时执行一次 fetchData(); }, []); // ← 空数组 = 只在首次渲染后执行
Q72 — 子传父方式 ❌ 答 D，正确 A
题目：子传父在 React 中通常通过什么实现？
[!answer] 回调函数（Callback Props）。父组件定义一个函数，通过 props 传给子组件，子组件调用该函数并携带数据。这是 React 单向数据流的核心模式。
// 父组件 function Parent() { const handleData = (childData) => console.log(childData); return <Child onSend={handleData} />; } // 子组件 function Child({ onSend }) { return <button onClick={() => onSend('hello')} />; }
Q86 — Fragment 主要作用 ❌ 答 C，正确 D
题目：Fragment 的主要作用？
[!answer] Fragment (
<>...</>) 让组件返回多个子元素时不添加额外 DOM 节点。常用于表格<tr>、列表项等对 DOM 层级有严格要求的场景。// 不用 Fragment —— 多一层 div function Table() { return (<div><tr/><tr/></div>); // ❌ 不合法 }// 用 Fragment —— 直接渲染子元素 function Table() { return (<></>); // ✅ 合法 }
Q78 — useEffect 清理函数 ❌ 答 A，正确 C
题目：关于 useEffect 清理函数的说法正确的是？
[!answer] 清理函数在下次 effect 执行前和组件卸载时都会执行。
useEffect(() => { const timer = setInterval(() => {}, 1000); // 清理函数 return () => clearInterval(timer); // ↑ 在下次 effect 执行前 + 组件卸载时 都会执行 }, [dep]); // dep 变化时也会触发清理
Q79 — 自定义 Hook ❌ 答 B，正确 A
题目：关于自定义 Hook 的说法正确的是？
[!answer] 自定义 Hook 必须以
use开头命名。这样 React 才能在编译时识别它是一个 Hook，并应用 Hook 规则（不能在条件语句或循环中使用）。自定义 Hook 只能在函数组件或其他 Hook 中调用，不能在类组件中使用。
Q80 — props 特性 ❌ 答 C，正确 B
题目：组件的 props 特性是？
[!answer] props 是只读的（不可变）。这是 React 单项数据流的基石——父组件控制 props，子组件只能读取不能修改。如需更新，父组件应通过 state 变化重新传递新值。
Q82 — 路由根组件 ❌ 答 A，正确 B
题目：包裹整个应用路由的根组件？
[!answer]
BrowserRouter（React Router v6）包装整个应用，监听 URL 变化并提供路由上下文。v5 中叫Router。
Q90 — React Router 核心原理 ❌ 答 A，正确 C
题目：React Router 基于哪种机制？
[!answer] URL 变化监听 + 组件映射。Browser History API（
popstate事件）监听 URL 变化，然后将当前路径与 Route 配置进行匹配，渲染对应的组件。
Q91 — 编程式导航钩子 ❌ 答 D，正确 A
题目：编程式导航使用的钩子？
[!answer]
useNavigate()。返回一个 navigate 函数，可用于按钮点击等交互场景中跳转。import { useNavigate } from 'react-router-dom'; function MyButton() { const navigate = useNavigate(); return <button onClick={() => navigate('/dashboard')}>Go</button>; }
Q107 — Context 中如何修改 theme ❌ 答 D，正确 B
题目：Child 中如何修改 theme？
[!answer] 需要将
setTheme也通过 Context 传递下去，或者在 Provider 中把[theme, setTheme]一起作为 value 传递。<ThemeContext.Provider value={{ theme, setTheme }}> <Child /> </ThemeContext.Provider> // Child 中 const { theme, setTheme } = useContext(ThemeContext); // ✅ 可以通过 setTheme 修改
Q108 — 自定义 Hook 的问题 ❌ 答 B（实际正确，待核实）
[!note] Hook 内的 fetch 不在 useEffect 中包裹，每次渲染都会重新发起请求。正确写法应使用
useEffect。
Q109 — 直接 push 数组更新状态 ❌ 答 A，正确 B
题目：
list.push(4); setList(list);会发生什么？[!warning] React State 是不可变的！
list.push(4); // 原地修改数组 setList(list); // 传给 React 的还是同一个引用 // React 做浅比较发现引用相同 → 不会重渲染正确写法：
setList([...list, 4]); // 方案1：展开新数组 setList(prev => prev.concat(4)); // 方案2：函数式更新
十、ESM & CommonJS
Q92 — CommonJS 导出语法 ❌ 答 D，正确 B
题目：以下哪种导出语法属于 CommonJS 规范？
[!answer]
exports.name = 'John';是 CommonJS 的命名导出写法。CommonJS 用module.exports/exports导出，用require()导入。// CommonJS exports.name = 'John'; module.exports = { name }; require('./module'); // ESM（现代标准） export const name = 'John'; export default function() {}; import { name } from './module';
Q99 — ESM 会报错的导出 ❌ 答 B，正确 C
题目：以下哪种导出方式在 ESM 中会报错？
[!answer]
export = { a: 1 }是 TypeScript 的语法，不是 ESM 标准语法。ESM 不支持export =。ESM 的标准导出：
export default 42; // 默认导出 export const a = 1, b = 2; // 具名导出（一行多变量） export * from './module'; // 全部重新导出
十一、其他高频考点速查
Q3 — 解决跨域 ❌ 答 D（实际正确，待核实）
[!note] axios 本身不具备跨域能力，jsonp/server cors/server proxy 才是真正的跨域方案。
Q4 — 终止 xhr 请求 ❌ 答 A，正确 D
题目：可以终止请求的 XHR 函数？
[!answer]
xhr.abort()。调用后立即停止请求，触发onerror和ontimeout。const xhr = new XMLHttpRequest(); xhr.open('GET', '/api/data'); xhr.send(); // ... 需要时 xhr.abort(); // 终止请求
Q8 — Git 提交前缀 ❌ 答 C（实际正确，待核实）
[!note]
perf表示性能优化的修复。常用前缀：feat（新功能）、fix（bug 修复）、perf（性能优化）、refactor（重构）、docs（文档）、test（测试）。
Q15 — AJAX 核心对象（重复题）❌ 答 C（实际正确，待核实）
[!note] 与 Q5 完全相同的题目，考察 XMLHttpRequest 全称。
Q18 — readyState === 3 ❌ 答 B（实际正确，待核实）
[!note]
readyState四个状态值：0 未初始化、1 已打开、2 已发送、3 交互中（接收响应中）、4 完成。3 表示正在接收服务器响应数据，但尚未完成。
Q20 — CSS 选择器优先级 ❌ 答 D，正确 A
题目：哪种写法或选择器优先级最高？
[!answer]
inline style（行间样式）优先级高于 id、class、标签选择器。优先级排序（从小到大）：
标签选择器 < ID 选择器 < Class 选择器 < 内联样式 < !importantdiv.box #myId { /* 101 */ } .box { /* 10 */ } div { /* 1 */ } style="color:red" {/* 1000 —— 内联样式优先 */}
Q21 — apply vs call ❌ 答 A（实际正确，待核实）
[!note] apply 接收参数数组，call 接收逐个参数。
Q22 — 比较运算符 ❌ 答 C，正确 A
题目：
2 == '2'的结果？[!answer]
==会做类型转换再比较：Number('2') === 2→true。===不做类型转换：2 !== '2'（number ≠ string）→false。完整输出：
false, true, true, true, false
Q25 — 函数返回值 ❌ 答 C（实际正确，待核实）
[!note] return 后的语句不再执行，但函数可以不写 return（此时返回 undefined），break 只能在循环/switch 中使用。
Q26 — 选择第一个类名为 box 的元素 ❌ 答 C（实际正确，待核实）
[!note]
querySelector('.box')用 CSS 选择器语法，点号.表示类名。
Q39 — 跨域 HTTP 头部 ❌ 答 A（实际正确，待核实）
[!note]
Access-Control-Allow-Origin: *是 CORS 核心响应头。
Q42 — computed 创建计算属性 ❌ 答 A（实际正确，待核实）
[!note] Vue 的 computed 用于创建缓存的计算属性。
Q45 — provide/inject 用途 ❌ 答 D，正确 B
题目：provide 和 inject 用于什么？
[!answer] 跨组件通信（包括跨层级父子/兄弟/隔代组件）。它们在祖先组件 provide 数据，后代组件 inject 获取，无需逐级传递 props。注意 B 中"事件总线"表述不准确，更准确说是"依赖注入式跨组件通信"。
Q46 — v-bind 指令 ❌ 答 D，正确 A
[!note]
v-bind用于动态绑定元素属性，简写为:。
Q47 — Whistle 启动命令 ❌ 答 C（实际正确，待核实）
[!note] Whistle 代理工具启动命令：
w2 start。
Q48 — npm 包存放目录 ❌ 答 C（实际正确，待核实）
[!note] NPM 安装的包存放在
node_modules/目录下。
Q50 — FormData.append ❌ 答 C，正确 A
题目：FormData 中添加键值对的方法？
[!answer]
formData.append(key, value)。这是 FormData 对象的唯一添加方法。const fd = new FormData(); fd.append('username', 'alice'); fd.append('avatar', fileInput.files[0]); // 也可以添加 File/Blob fetch('/upload', { method: 'POST', body: fd }); // 自动设置 Content-Type 为 multipart/form-data
Q53 — HTTP 404 ❌ 答 B（实际正确，待核实）
[!note] 404 = Not Found，请求的资源不存在。
Q54 — Webpack devtool ❌ 答 A，正确 B
题目：devtool 配置选项的作用？
[!answer] 源代码映射（Source Map）。它将打包后的代码映射回原始源代码，方便调试。常用值：
source-map（完整）、cheap-module-source-map（开发快）、eval（最快）。// webpack.config.js module.exports = { devtool: 'source-map', // 生成独立的 .map 文件 };
Q55 — Webpack externals ❌ 答 D，正确 A
题目：externals 配置用于什么？
[!answer] 定义外部依赖。告诉 Webpack 某些模块不应打包进 bundle，而是从外部（如 CDN）引入。
module.exports = { externals: { jquery: 'jQuery', // import $ from 'jquery' → 使用 window.jQuery }, };
Q56 — Webpack 代码分割 ❌ 答 B，正确 A
题目：Webpack 如何处理代码分割？
[!answer] 通过
optimization.splitChunks配置。它可以将 node_modules 中的公共代码和大型模块拆分为独立的 chunk 文件，减少首屏加载体积。optimization: { splitChunks: { chunks: 'all', // 对所有 chunk 进行拆分 cacheGroups: { vendors: { test: /[\\/]node_modules[\\/], name: 'vendors' } } } }
Q57 — module.exports ❌ 答 A（实际正确，待核实）
[!note] 导出模块的公共接口。
Q58 — Node.js 定义 ❌ 答 B（实际正确，待核实）
[!note] Node.js 是服务端 JavaScript 运行时环境。
Q59 — 文件上传编码类型 ❌ 答 A（实际正确，待核实）
[!note]
enctype="multipart/form-data"是文件上传必需的编码类型。
Q60 — NPM 配置文件 ❌ 答 A（实际正确，待核实）
[!note]
package.json管理项目依赖和配置。
Q61 — 受控 vs 非受控 ❌ 答 D，正确 A
题目：受控组件和非受控组件的区别？
[!answer]
- 受控组件：表单值由 React state 管理，通过
value属性和onChange事件控制- 非受控组件：表单值由 DOM 自身管理，通过
useRef获取值// 受控组件 function ControlledInput() { const [value, setValue] = useState(''); return <input value={value} onChange={e => setValue(e.target.value)} />; }// 非受控组件 function UncontrolledInput() { const inputRef = useRef(null); return ; }
Q62 — useState 用途 ❌ 答 A（实际正确，待核实）
[!note] 定义组件的本地状态。
Q63 — ESM 导入重命名 ❌ 答 A（实际正确，待核实）
[!note]
import { originalName as newName }是标准语法。
Q64 — ESM 默认导入 ❌ 答 B（实际正确，待核实）
[!note]
import defaultExport from 'module'。
Q65 — Webpack resolve ❌ 答 B，正确 A
题目：resolve 配置选项用于什么？
[!answer] 解析模块的路径。例如配置别名、文件扩展名自动补全等。
resolve: { alias: { '@': path.resolve(__dirname, 'src') }, extensions: ['.js', '.jsx', '.ts', '.tsx'], }
Q66 — Webpack optimization ❌ 答 B，正确 C
题目：optimization 配置主要用于什么？
[!answer] 优化打包后的文件。包括代码压缩、Tree Shaking、Code Splitting 等。
Q67 — useEffect 清除副作用 ❌ 答 A（实际正确，待核实）
[!note] 返回清理函数即可清除副作用。
Q69 — useEffect 主要用途 ❌ 答 A（实际正确，待核实）
[!note] 声明式地处理组件的副作用（数据获取、订阅、DOM 操作等）。
Q70 — React.memo 优化 ❌ 答 A（实际正确，待核实）
[!note] 通过浅比较 props 避免不必要的渲染。
Q71 — 状态的不可变性 ❌ 答 A（实际正确，待核实）
[!note] 状态不能被直接修改，必须创建新值。
Q74 — 父传子数据传递 ❌ 答 B（实际正确，待核实）
[!note] props 是 React 中父组件向子组件传递数据的主要方式。
Q75 — key 的最佳实践 ❌ 答 B（实际正确，待核实）
[!note] 使用列表项的唯一标识（如数据库 id），不要用 index。
Q76 — React 组件定义方式 ❌ 答 B（实际正确，待核实）
[!note] 函数组件和类组件都可以。
Q77 — useCallback 作用 ❌ 答 B，正确 A
题目：useCallback 的主要作用？
[!answer] 缓存函数引用，避免因每次渲染产生新函数引用而导致子组件（React.memo 包裹的）不必要的重渲染。
const memoizedFn = useCallback(() => { doSomething(a, b); }, [a, b]); // a 或 b 变化时才创建新函数
Q83 — React Context 错误说法 ❌ 答 D（实际正确，待核实）
[!note] Context 可以与类组件配合使用（通过 Consumer 或 contextType）。
Q84 — 触发重渲染的因素 ❌ 答 D，正确 A
题目：哪项会触发组件的重渲染？
[!answer]
- A 正确：父组件状态变化会触发父组件及所有子组件重渲染（无论 props 是否变化）
- B 不会：React.memo 且 props 未变化 → 跳过渲染
- C 不会：setState 传入相同值 → React 内部跳过
- D 不会：useRef 变化 → 不触发重渲染（ref 是可变的但不引起渲染）
Q85 — React.memo 的正确场景 ❌ 答 D，正确 B
题目：使用 React.memo 的正确场景？
[!answer] 避免函数组件因 props 变化导致的不必要重渲染。适用于 props 稳定、渲染开销大的场景。不适用于类组件，也不替代 useCallback。
Q87 — children props 目的 ❌ 答 C（实际正确，待核实）
[!note] 向子组件传递可渲染内容。
Q88 — Redux 适用场景 ❌ 答 A（实际正确，待核实）
[!note] 多个不相关组件共享复杂状态。
Q89 — 兄弟组件通信 ❌ 答 B（实际正确，待核实）
[!note] 通过共同的父组件中转数据（状态提升）。
Q93 — React 性能优化手段 ❌ 答 C（实际正确，待核实）
[!note] useMemo 缓存计算结果 + useCallback 缓存函数引用，两者都是性能优化手段。
Q94 — useEffect([]) 等价生命周期 ❌ 答 D，正确 A
题目：useEffect 依赖为
[]相当于哪个生命周期？[!answer]
componentDidMount。空数组意味着只在组件挂载后执行一次。
Q97 — React 单项数据流 ❌ 答 B（实际正确，待核实）
[!note] 数据只能从父流向子，子不能直接改父的数据。
Q98 — 浏览器原生模块系统 ❌ 答 B（实际正确，待核实）
[!note] ESM 是浏览器原生支持的模块化方案（
<script type="module">）。
Q104 — LLM 核心原理 ❌ 答 B（实际正确，待核实）
[!note] LLM 对下一个 token 做最大似然预测（Next Token Prediction）。
知识点总结
高频错题知识图谱
mindmap
root((前端摸考<br/>27 道错题))
事件处理
preventDefault vs stopPropagation
event delegation this vs target
stopPropagation spelling
JS核心
原始类型 vs 引用类型
传值 vs 传引用
closure 闭包
type coercion
TypeError causes
异步执行
Event Loop 优先级
宏任务 vs 微任务
var 闭包陷阱
Vue3
reactive 解构陷阱
script setup 自动暴露
mounted 执行顺序
provide/inject vs props
Teleport
React
不可变 State
callback props 子传父
Fragment 零 DOM
useEffect 清理时机
custom Hook 命名规则
HTTP网络
4xx 状态码区别
Content-Type
CORS header
构建工具
Webpack 三大配置
ESM vs CommonJS
CSS
继承性
getComputedStyle
选择器优先级