2023年前端(1~5年经验)面试题.pdf

《2023年前端(1~5年经验)面试题.pdf》由会员分享，可在线阅读，更多相关《2023年前端(1~5年经验)面试题.pdf（32页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、2023年 前 端(5 年 经 验)面 试 题(一)一、HTML/CSS 篇 1、什 么 是 SVG?【仅 供 参 考】SVG即 可 缩 放 失 量 图 形(Scalable Vector Graphics)o它 是 基 于 文 本 的 图 形 语 言，使 用 文 本、线 条、点 等 来 绘 制 图 像，这 使 得 它 轻 便、显 示 迅 速。2、如 何 区 别 HTML和 HTML5?【仅 供 参 考】用 D0CTYPE声 明 新 增 的 结 构 元 素 和 功 能 元 素 来 区 别 它 们。3 页 面 可 见 性(Page Visibility)API可 以 有 哪 些 用 途【仅 供

2、参 考】1、通 过 visibility state的 值 得 检 测 页 面 当 前 是 否 可 见，以 及 打 开 网 页 的 时 间。2、在 页 面 被 切 换 到 其 他 后 台 进 程 时，自 动 暂 停 音 乐 或 视 频 的 播 放。4、如 何 在 HTML5页 面 中 嵌 入 视 频？【仅 供 参 考】和 嵌 入 音 频 文 件 一 样，HTML5定 义 了 嵌 入 视 频 的 标 准 方 式，支 持 的 格 式 包 括 MP4、WebM和 Ogg等，嵌 入 方 式 如 下。Your browser does,nt support video embedding feature

3、.5、如 果 把 HTML5看 成 一 个 开 放 平 台，它 的 构 建 模 块 有 哪 些？【仅 供 参 考】如 果 把 HTML5看 成 一 个 开 放 平 台，它 的 构 建 模 块 至 少 包 括 以 下 几 个，如 oWnav标 签 用 来 将 具 有 导 航 性 质 的 链 接 划 分 在 一 起，使 代 码 结 构 在 语 义 化 方 面更 加 准 确 header 标 签 用 来 定 义 文 档 的 页 眉。section 标 签 用 来 描 述 文 档 的 结 构。footer 标 签 用 来 定 义 页 脚。在 典 型 情 况 下，该 元 素 会 包 含 文 档 作 者

4、的 姓 名、文 档 的 创 作 日 期 和 联 系 信 息 6、HTML5 Canvas元 素 有 什 么 作 用？【仅 供 参 考】Canvas元 素 用 于 在 网 页 上 绘 制 图 形，该 元 素 标 签 的 强 大 之 处 在 于 可 以 直 接 在 HTML上 进 行 图 形 操 作。7、与 HTML4比 较，HTML5废 弃 了 哪 些 元 素？【仅 供 参 考】废 弃 的 元 素 包 括 frameframeset、noframe applet、big、center 和 basefonto8、如 何 让 老 版 本 IE也 支 持 H5【仅 供 参 考】你 可 以 使 用 IE

5、条 件 注 释 来 调 用 这 个 js文 件，这 样 像 FireFox等 非 IE浏 览 器 就 会 忽 视 这 段 代 码，也 就 不 会 有 无 谓 的 http请 求 了。下 面 这 段 代 码 仅 会 在 IE浏 览 器 下 运 行：以 下 是 j s文 件 中 的 代 码：(function()if(!/*cc_on!*/0)return;var e=“abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav

6、,output,progress,section,time,video”split(J,J),i=e.length;while(i一 一)document.createElement(ei)()9、HTML5标 准 提 供 了 哪 些 新 的 API?【仅 供 参 考】HTML5 提 供 很 多 新 的 API,包 括 Media API、Text Track API、ApplicationCache API、User InteractionAPR Data Transfer API、Command API、Constraintion Validation API 和 History API1

7、0、Doctype作 用？标 准 模 式 与 兼 容 模 式 各 有 什 么 区 别？【仅 供 参 考】D0CTYPE是 用 来 声 明 文 档 类 型 和 DTD规 范 的。CDOCTYPE hlml 声 明 位 于 HTML文 档 中 的 第 一 行，不 是 一 个 HTML标 签，处 于 html标 签 之 前。告 知 浏 览 器 的 解 析 器 用 什 么 文 档 标 准 解 析 这 个 文 档。D0CTYPE不 存 在 或 格 式 不 正 确 会 导 致 文 档 以 兼 容 模 式 呈 现。标 准 模 式 的 排 版 和 J S 运 作 模 式 都 是 以 该 浏 览 器 支 持 的

8、 最 高 标 准 运 行。在 兼 容 模 式 中，页 面 以 宽 松 的 向 后 兼 容 的 方 式 显 示，模 拟 老 式 浏 览 器 的 行 为 以 防 止 站 点 无 法 工 作。11、请 你 说 一 下 Web Worker和 WebSocket的 作 用。【仅 供 参 考】Web Worker的 作 用 如 下：(1)通 过 worker=new Worker(url)加 载 一 个 JavaScript 文 件,创 建 一 个 Worker,同 时 返 回 一 个 Worker实 例(2)用 worker.postMessage(data)向 Worker 发 送 数 据(3)绑

9、定 worker,onmessage接 收 Worker发 送 过 来 的 数 据(4)可 以 使 用 worker,terminate()终 止 一 个 Worker的 执 行。WebSocket的 作 用 如 下。它 是 Web应 用 程 序 的 传 输 协 议，提 供 了 双 向 的、按 序 到 达 的 数 据 流。它 是 HTML5新 增 的 协 议，WebSocket的 连 接 是 持 久 的，它 在 客 户 端 和 服 务 器 之 间 保 持 双 工 连 接，服 务 器 的 更 新 可 以 及 时 推 送 到 客 户 端，而 不 需 要 客 户 端 以 一 定 的 时 间 间 隔

10、去 轮 询。12、HTML5 为 什 么 只 需 要 写!doctype htm?【仅 供 参 考】HTML5不 基 于 SGML,因 此 不 需 要 对 DTD进 行 引 用，但 是 需 要 D0CTYPE来 规 范 浏 览 器 的 行 为(让 浏 览 器 按 照 它 们 的 方 式 来 运 行)。而 HTM4.01基 于 SGML,所 以 需 要 对 DTD进 行 引 用，才 能 告 知 浏 览 器 文 档 所 使 用 的 类 型。13、常 见 兼 容 性 问 题?【仅 供 参 考】浏 览 器 默 认 的 margin和 padding不 同。解 决 方 案 是 加 一 个 全 局 的*m

11、argin:0;padding:0;来 统 一。Chrome中 文 界 面 下 默 认 会 将 小 于 12px的 文 本 强 制 按 照 12px显 示，可 通 过 加 入 CSS 属 性-webkit-text-size-adjust:none;解 决.14、inline-block之 间 的 间 隙 如 何 去 掉？【仅 供 参 考】两 个 并 列 的 inline-block中 间 会 有 一 条 裂 缝，这 个 的 原 因 是 两 个 标 签 之 间 有 空 格，浏 览 器 把 这 些 空 格 当 成 文 字 中 空 格，所 以 这 两 个 块 中 间 多 少 有 间 隙。解 决 办

12、 法：删 除 两 个 标 签 间 的 空 格，但 是 这 样 html排 版 不 好 容 器 元 素 font-size:0 然 后 再 在 里 面 再 重 新 设 置 字 体 大 小 15、画 一 条 0.5px的 直 线?【仅 供 参 考】考 查 的 是 css3的 transformheight:Ipx;transform:scale(0.5);16、Float布 局 有 哪 些 缺 陷？如 何 清 除 浮 动？【仅 供 参 考】使 用 float之 后，元 素 跳 出 文 档 流，容 易 引 发 父 容 器 塌 陷，最 好 的 解 决 方 式 是 给 复 用 器 加 上：after伪

13、类 进 行 清 除 浮 动 17、position的 值，relative和 absolute分 别 是 相 对 于 谁 进 行 定 位 的？【仅 供 参 考】relative:相 对 定 位，相 对 于 自 己 本 身 在 正 常 文 档 流 中 的 位 置 进 行 定 位。absolute:生 成 绝 对 定 位，相 对 于 最 近 一 级 定 位 不 为 static的 父 元 素 进 行 定 位。fixed:(老 版 本 IE不 支 持)生 成 绝 对 定 位，相 对 于 浏 览 器 窗 口 或 者 frame进 行 定 位。static:默 认 值，没 有 定 位，元 素 出 现 在

14、 正 常 的 文 档 流 中。slicky:生 成 粘 性 定 位 的 元 素，容 器 的 位 置 根 据 正 常 文 档 流 计 算 得 出。18、CSS选 择 器 优 先 级 怎 样 的？如 果 我 在 class里 面 写 了 三 个 class,例 如 id class tag 这 个 和 classl,class2,class3在 元 素 中 顺 序 无 关，而 与 css文 件 里 面 写 的 顺 序 有 关，css文 件 里，越 后 面 的 优 先 级 越 高。19、如 何 定 义 高 度 很 小 的 容 器？【仅 供 参 考】因 为 有 一 个 默 认 的 行 高，所 以 在

15、IE6下 无 法 定 义 小 高 度 的 容 器。两 种 解 决 方 案 分 别 是 overflow:hidden或 font-size：容 器 高 度 px20、calc,support,media各 自 的 含 义 及 用 法？【仅 供 参 考】support主 要 是 用 于 检 测 浏 览 器 是 否 支 持 CSS的 某 个 属 性，其 实 就 是 条 件 判 断，如 果 支 持 某 个 属 性，你 可 以 写 一 套 样 式，如 果 不 支 持 某 个 属 性，你 也 可 以 提 供 另 外 一 套 样 式 作 为 替 补。calc()函 数 用 于 动 态 计 算 长 度 值。

16、calc()函 数 支 持“+”，“*”，“/”运 算;media查 询，你 可 以 针 对 不 同 的 媒 体 类 型 定 义 不 同 的 样 式。二、JS/ES6/TS 篇 1、什 么 是 高 阶 函 数？【仅 供 参 考】高 阶 函 数 是 对 其 他 函 数 进 行 操 作 的 函 数；高 阶 函 数 就 是 一 个 接 收 函 数 作 为 参 数 或 将 函 数 作 为 输 出 返 回 的 函 数。例 如，Array,prototype,map,Array,prototype,filter 和 Array.prototype.reduce是 语 言 中 内 置 的 一 些 高 阶 函

17、 数。2、foo=foo|bar,这 行 代 码 是 什 么 意 思？为 什 么 要 这 样 写？【仅 供 参 考】如 果 foo转 为 false,则 返 回 bar；否 则 直 接 返 回 foo逻 辑 或：如 果 第 一 个 值 为 true,直 接 返 回 第 一 个 值；否 则 直 接 返 回 第 二 个 值 逻 辑 与：如 果 第 一 个 值 为 false,直 接 返 回 第 一 个 值；否 则 返 回 第 二 个 值3、JSON 的 了 解？【仅 供 参 考】JSON（JavaScript Object Notation）是 一 种 轻 量 级 的 数 据 交 换 格 式。它

18、是 基 于 JavaScript的 一 个 子 集。数 据 格 式 简 单，易 于 读 写，占 用 带 宽 小 age:12,name:back 4、javascript的 内 存（垃 圾）回 收 机 制？【仅 供 参 考】垃 圾 回 收 器 会 每 隔 一 段 时 间 找 出 那 些 不 再 使 用 的 内 存，然 后 为 其 释 放 内 存 一 般 使 用 标 记 清 除 方 法（mark and sweep）,当 变 量 进 入 环 境 标 记 为 进 入 环 境，离 开 环 境 标 记 为 离 开 环 境 垃 圾 回 收 器 会 在 运 行 的 时 候 给 存 储 在 内 存 中 的

19、所 有 变 量 加 上 标 记，然 后 去 掉 环 境 中 的 变 量 以 及 被 环 境 中 变 量 所 引 用 的 变 量（闭 包），在 这 些 完 成 之 后 仍 存 在 标 记 的 就 是 要 删 除 的 变 量 了 还 有 引 用 计 数 方 法（reference counting）,在 低 版 本 IE中 经 常 会 出 现 内 存 泄 露，很 多 时 候 就 是 因 为 其 采 用 引 用 计 数 方 式 进 行 垃 圾 回 收。引 用 计 数 的 策 略 是 跟 踪 记 录 每 个 值 被 使 用 的 次 数，当 声 明 了 一 个 变 量 并 将 一 个 引 用 类 型 赋

20、 值 给 该 变 量 的 时 候 这 个 值 的 引 用 次 数 就 加 1,如 果 该 变 量 的 值 变 成 了 另 外 一 个，则 这 个 值 得 引 用 次 数 减 1,当 这 个 值 的 引 用 次 数 变 为 0 的 时 候，说 明 没 有 变 量 在 使 用，这 个 值 没 法 被 访 问 了，因 此 可 以 将 其 占 用 的 空 间 回 收，这 样 垃 圾 回 收 器 会 在 运 行 的 时 候 清 理 掉 引 用 次 数 为 0 的 值 占 用 的 空 间。在 IE中 虽 然 JavaScript对 象 通 过 标 记 清 除 的 方 式 进 行 垃 圾 回 收，但 B0M

21、与 DOM对 象 却 是 通 过 引 用 计 数 回 收 垃 圾 的，也 就 是 说 只 要 涉 及 B0M及 D0M就 会 出 现 循 环 引 用 问 题。5、如 何 改 变 this指 针 的 指 向？【仅 供 参 考】可 以 使 用 apply、call、bind方 法 改 变 Ihis指 向（并 不 会 改 变 函 数 的 作 用 域）。比 较 如 下：（1）三 者 第 一 个 参 数 都 是 this要 指 向 的 对 象，也 就 是 想 指 定 的 上 下 文，上 下 文 就 是 指 调 用 函 数 的 那 个 对 象（没 有 就 指 向 全 局 window）；（2）apply第

22、 二 个 参 数 都 是 数 组，call和 bind接 收 多 个 参 数 并 用 逗 号 隔 开；（3）apply和 call只 对 原 函 数 做 改 动，bind会 返 回 新 的 函 数（要 生 效 还 得 再 调 用 一 次）。6、HTML5的 form如 何 关 闭 自 动 完 成 功 能？【仅 供 参 考】将 不 想 要 自 动 完 成 的 form或 input设 置 为 autocomplete=off7、请 说 一 个 pushState与 replaceState两 个 方 法 的 作 用 与 区 别【仅 供 参 考】作 用：都 是 改 变 路 由（路 径）的，路 径

23、改 变 时 不 会 请 求 服 务 器（除 非 你 f5刷 新）区 别：pushState：不 会 替 换 掉 之 前 的 历 史 路 径 replaceState：会 替 换 掉 之 前 的 历 史 路 径 8、如 何 判 断 变 量 为 NaN【仅 供 参 考】通 过 isNaN（）判 断 isNaN(NaN)返 回 trueisNaN(lOOO)/返 回 falseisNaNC 小 明)/返 回 true（判 断 前 会 转 换 成 number类 型）isNaNC 101)/返 回 false9、什 么 是 jsonp【仅 供 参 考】jsonp是 一 种 解 决 跨 域 请 求 问

24、题 的 技 术 不 足 点：它 只 能 是 get请 求 10、对 JS 的 apply,call,bind 的 理 解?【仅 供 参 考】bind是 返 回 对 应 函 数，便 于 稍 后 调 用；apply、call则 是 立 即 调 用。call和 apply都 是 为 了 改 变 某 个 函 数 运 行 时 的 上 下 文（context）而 存 在 的，换 句 话 说，就 是 为 了 改 变 函 数 体 内 部 this的 指 向。JavaScript的 一 大 特 点 是，函 数 存 在 定 义 时 上 下 文 和 运 行 时 上 下 文 以 及 上 下 文 是 可 以 改 变 的

25、 这 样 的 概 念。function fruits（）fruits,prototype=color:red,say:function()console.log(，My color is+this,color);var apple=new fruits;apple,say();/My color is red但 是 如 果 我 们 有 一 个 对 象 banana=color:yellow,我 们 不 想 对 它 重 新 定 义 s a y方 法，那 么 我 们 可 以 通 过 call或 apply用 apple的 s a y方 法：banana=color:yellow”)apple.sa

26、y.call(banana);/My color is yellowapple,say.apply(banana);/My color is yellow对 于 apply,call二 者 而 言，作 用 完 全 一 样，只 是 接 受 参 数 的 方 式 不 太 一 样。call按 顺 序 传 参，apply接 收 数 组 func.call(this,argl,arg2);func.apply(this,argl,arg2)Math.max.apply(Math,5,458,120,-215)Math.max.call(Math,5,458,120,-215)bind。最 简 单 的 用

27、法 是 创 建 一 个 函 数，使 这 个 函 数 不 论 怎 么 调 用 都 有 同 样 的 this值。常 见 的 错 误 就 像 上 面 的 例 子 一 样，将 方 法 从 对 象 中 拿 出 来，然 后 调 用，并 且 希 望 this指 向 原 来 的 对 象。如 果 不 做 特 殊 处 理，一 般 会 丢 失 原 来 的 对 象。使 用 bind。方 法 能 够 很 漂 亮 的 解 决 这 个 问 题：this.num=9;var mymodule=num:81,getNum:function()console.log(this.num);)；mymodule.getNumO;/8

28、1var getNum=mymodule.getNum;getNumO;/9,因 为 在 这 个 例 子 中，this”指 向 全 局 对 象var boundGetNum=getNum.bind(mymodule);boundGetNumO;/81MDN的 解 释 是：bind。方 法 会 创 建 一 个 新 函 数，称 为 绑 定 函 数，当 调 用 这 个 绑 定 函 数 时，绑 定 函 数 会 以 创 建 它 时 传 入 bind。方 法 的 第 一 个 参 数 作 为 this,传 入 bind()方 法 的 第 二 个 以 及 以 后 的 参 数 加 上 绑 定 函 数 运 行 时

29、 本 身 的 参 数 按 照 顺 序 作 为 原 函 数 的 参 数 来 调 用 原 函 数。var foo=bar:1,eventBind:function()$C.someClass).onC click*,function(event)/*Act on the event*/console.log(this.bar);/I/如 果 不 用 bind,this将 指 向 对 应 class的 那 个 元 素 对 象.bind(this);)(function fn(a,b,c)return a+b+c;).bind(null,10,20)(5)/35/转 成 了 一 个 新 函 数,a 和

30、 b 已 经 和 10,20绑 定 了，5传 递 给 了 这 个 新 函 数 的 剩 余 参 数 11、null/undefined 的 区 别【仅 供 参 考】null值：属 于 null类 型，代 表“空 值”，代 表 一 个 空 对 象 指 针；使 用 typeof运 算 得 到“object”,所 以 你 可 以 认 为 它 是 一 个 特 殊 的 对 象 值。undefined值：属 于 undefined类 型，当 一 个 声 明 的 变 量 未 初 始 化 赋 值 时，得 到 的 就 是 undefinedo使 用 typeof运 算 得 到“undefined,12、J S 数

31、 据 类 型？【仅 供 参 考】数 据 类 型 主 要 包 括 两 部 分：基 本 数 据 类 型：Undefined,Null Boolean,Number 和 String引 用 数 据 类 型：Object(包 括 Object、Array、Function)ECMAScript 2015新 增:Symbol(创 建 后 独 一 无 二 且 不 可 变 的 数 据 类 型)13、渐 进 增 强 与 优 雅 降 级【仅 供 参 考】渐 进 增 强：针 对 低 版 本 浏 览 器 进 行 构 建 页 面，保 证 最 基 本 的 功 能，然 后 再 针 对 高 级 浏 览 器 进 行 效 果、

32、交 互 等 改 进，达 到 更 好 的 用 户 体 验。优 雅 降 级：一 开 始 就 构 建 完 整 的 功 能，然 后 再 针 对 低 版 本 浏 览 器 进 行 兼 容。14、如 何 使 用 J S 删 除 cookie【仅 供 参 考】如 果 要 删 除 cookie以 便 后 续 尝 试 读 取 cookie,则 只 需 将 过 期 日 期 设 置 为 过 去 的 时 间。咱 们 应 该 定 义 cookie路 径 以 确 保 删 除 正 确 的 cookie.,如 果 未 指 定 路 径，某 些 浏 览 器 将 不 允 许 咱 们 删 除 cookie15、什 么 时 候 应 该

33、使 用 关 键 字 unknown?【仅 供 参 考】unknown,如 果 你 不 知 道 预 先 期 望 哪 种 类 型，但 想 稍 后 分 配 它，则 应 该 使 用 该 any关 键 字，并 且 该 关 键 字 将 不 起 作 用。16、如 何 理 解 TypeScript中 的 类【仅 供 参 考】TypeScript是 一 种 面 向 对 象 的 JavaScript语 言，支 持 OOP编 程 特 性，比 如 类、接 口 等。与 Java一 样，类 是 用 于 创 建 可 重 用 组 件 的 基 本 实 体。它 是 一 组 具 有 公 共 属 性 的 对 象。类 是 创 建 对

34、象 的 模 板 或 蓝 图。它 是 一 个 逻 辑 实 体。“class”关 键 字 用 于 在 Typescript中 声 明 一 个 类。class Student studCode:number;studName:string;constructor(code:number,name:string)this.studName=name;this.studCode=code;)getGrade():string return A+;类 的 特 征：封 装、继 承、多 态、抽 象 17、ECMAScript 6 怎 么 写 class,为 何 会 出 现 class?【仅 供 参 考】写 法

35、：直 接 用 class来 定 义 ES6的 class可 以 看 作 是 一 个 语 法 糖，它 的 绝 大 部 分 功 能 ES5都 可 以 做 到，新 的 class写 法 只 是 让 对 象 原 型 的 写 法 更 加 清 晰、更 像 面 向 对 象 编 程 的 语 法 18、ES6的 模 板 字 符 串 有 哪 些 新 特 性？并 实 现 一 个 类 模 板 字 符 串 的 功 能【仅 供 参 考】基 本 的 字 符 串 格 式 化。将 表 达 式 嵌 入 字 符 串 中 进 行 拼 接。用$来 界 定 在 ES5时 我 们 通 过 反 斜 杠。来 做 多 行 字 符 串 或 者 字

36、 符 串 一 行 行 拼 接。ES6反 引 号 O 就 能 解 决 类 模 板 字 符 串 的 功 能 let name=web;let age=10;let str=你 好,$name已 经$age岁 了 str=str.replace(/$(*)/g,function()return eval(arguments1);)console,log(str);你 好，web 已 经 10 岁 了 19、解 构 赋 值 过 程 及 其 原 理【仅 供 参 考】解 构 赋 值：其 实 就 是 分 解 出 一 个 对 象 的 解 构，分 成 两 个 步 骤：解 构 赋 值 过 程：变 量 的 声 明

37、变 量 的 赋 值 原 理：ES6变 量 的 解 构 赋 值 本 质 上 是“模 式 匹 配”，只 要 等 号 两 边 的 模 式 相 同，左 边 的 变 量 就 会 被 赋 予 匹 配 的 右 边 的 值，如 果 匹 配 不 成 功 变 量 的 值 就 等 于 undefined20、介 绍 下 Set、Map的 区 别？【仅 供 参 考】应 用 场 景 Set用 于 数 据 重 组，Map用 于 数 据 储 存 Set：（1）成 员 不 能 重 复（2）只 有 键 值 没 有 键 名，类 似 数 组（3）可 以 遍 历，方 法 有 add,delete,hasMap:（1）本 质 上 是

38、健 值 对 的 集 合，类 似 集 合（2）可 以 遍 历，可 以 跟 各 种 数 据 格 式 转 换 三、Vue/React 篇 1、React中 的 事 件 是 什 么？【仅 供 参 考】在 React中，事 件 是 对 鼠 标 悬 停、鼠 标 单 击、按 键 等 特 定 操 作 的 触 发 反 应。处 理 这 些 事 件 类 似 于 处 理 DOM元 素 中 的 事 件。但 是 有 一 些 语 法 差 异，如：用 驼 峰 命 名 法 对 事 件 命 名 而 不 是 仅 使 用 小 写 字 母。事 件 作 为 函 数 而 不 是 字 符 串 传 递。事 件 参 数 重 包 含 一 组 特

39、定 于 事 件 的 属 性。每 个 事 件 类 型 都 包 含 自 己 的 属 性 和 行 为，只 能 通 过 其 事 件 处 理 程 序 访 问 2、有 没 有 自 己 实 现 过 相 关 hooks?说 明 一 下 实 现 思 路？【仅 供 参 考】自 定 义 Hook是 一 个 函 数，其 名 称 以“use”开 头，函 数 内 部 可 以 调 用 其 他 的 Hooko3、什 么 是 Redux?【仅 供 参 考】Redux是 当 今 最 热 门 的 前 端 开 发 库 之 一。它 是 JavaScript程 序 的 可 预 测 状 态 容 器，用 于 整 个 应 用 的 状 态 管

40、理。使 用 Redux开 发 的 应 用 易 于 测 试，可 以 在 不 同 环 境 中 运 行，并 显 示 一 致 的 行 为 4、useEffect的 回 调 函 数 为 什 么 无 法 使 用 async?【仅 供 参 考】React本 身 并 不 支 持 这 么 做，理 由 是 effect function应 该 返 回 一 个 销 毁 函 数（effect：是 指 return返 回 的 cleanup函 数），如 果 useEffect第 一 个 参 数 传入 async,返 回 值 则 变 成 了 Promise,会 导 致 react在 调 用 销 毁 函 数 的 时 候 报

41、 错：function,apply is undefined05、Redux遵 循 的 三 个 原 则 是 什 么？【仅 供 参 考】单 一 事 实 来 源：整 个 应 用 的 状 态 存 储 在 单 个 store中 的 对 象/状 态 树 里。单 一 状 态 树 可 以 更 容 易 地 跟 踪 随 时 间 的 变 化，并 调 试 或 检 查 应 用 程 序。状 态 是 只 读 的：改 变 状 态 的 唯 一 方 法 是 去 触 发 一 个 动 作。动 作 是 描 述 变 化 的 普 通 J S 对 象。就 像 state是 数 据 的 最 小 表 示 一 样，该 操 作 是 对 数 据 更

42、 改 的 最 小 表 示。使 用 纯 函 数 进 行 更 改：为 了 指 定 状 态 树 如 何 通 过 操 作 进 行 转 换，你 需 要 纯 函 数。纯 函 数 是 那 些 返 回 值 仅 取 决 于 其 参 数 值 的 函 数。6、React组 件 生 命 周 期 有 哪 些 不 同 阶 段？【仅 供 参 考】Initialization：在 这 个 阶 段，组 件 准 备 设 置 初 始 化 状 态 和 默 认 属 性。Mounting：react组 件 已 经 准 备 好 挂 载 到 浏 览 器 D0M中。这 个 阶 段 包 括 componentWi 1 IMount 和 comp

43、onentDidMount 生 命 周 期 方 法。Updating：在 这 个 阶 段，组 件 以 两 种 方 式 更 新，发 送 新 的 props和 state状 态。此 阶 段 包 括 shouldComponenlUpdate、componentWillUpdate 和 componentDidUpdate 生 命 周 期 方 法。Unmounting：在 这 个 阶 段，组 件 已 经 不 再 被 需 要 了，它 从 浏 览 器 D0M中 卸 载 下 来。这 个 阶 段 包 含 componentWi 1 lUnmount生 命 周 期 方 法。除 以 上 四 个 常 用 生 命

44、周 期 外，还 有 一 个 错 误 处 理 的 阶 段：Error Handl ing：在 这 个 阶 段，不 论 在 渲 染 的 过 程 中，还 是 在 生 命 周 期 方 法 中 或 是 在 任 何 子 组 件 的 构 造 函 数 中 发 生 错 误，该 组 件 都 会 被 调 用。这 个 阶 段 包 含 了 component Di dCat ch 生 命 周 期 方 法。7、React中 的 StrictMode（严 格 模 式）是 什 么？【仅 供 参 考】React的 StrictMode是 一 种 辅 助 组 件，可 以 帮 助 咱 们 编 写 更 好 的 react组 件，可

45、以 使 用 StrictMode/包 装 一 组 组 件，并 且 可 以 帮 咱 们 以 下 检 查：验 证 内 部 组 件 是 否 遵 循 某 些 推 荐 做 法，如 果 没 有，会 在 控 制 台 给 出 警 告。验 证 是 否 使 用 的 已 经 废 弃 的 方 法，如 果 有，会 在 控 制 台 给 出 警 告。通 过 识 别 潜 在 的 风 险 预 防 一 些 副 作 用。8、什 么 是 jsx?【仅 供 参 考】在 第 一 发 布 react时，还 引 入 了 一 种 新 的 js方 言 jsx,将 原 始 HTML模 板 嵌 入 到 J S 代 码 中。JSX代 码 本 身 不

46、能 被 浏 览 器 读 取，必 须 使 用 Babel和 webpack等 工 具 将 其 转 换 为 传 统 的 JS。很 多 开 发 人 员 就 能 无 意 识 使 用 JSX,因 为 它 已 经 与 React结 合 在 一 起/9、什 么 是 Props?【仅 供 参 考】Props是 React中 属 性 的 简 写。它 们 是 只 读 组 件，必 须 保 持 纯，即 不 可 变。它 们 总 是 在 整 个 应 用 中 从 父 组 件 传 递 到 子 组 件。子 组 件 永 远 不 能 将 prop送 回 父 组 件。这 有 助 于 维 护 单 向 数 据 流，通 常 用 于 呈 现

47、 动 态 生 成 的 数 据 10、vue2和 vue3的 响 应 式 原 理 都 有 什 么 区 别 呢？【仅 供 参 考】vue2 用 的 是 Object,defindProperty 但 是 vue3 用 的 是 ProxyObject.defindProperty 缺 点:一 次 只 能 对 一 个 属 性 进 行 监 听，需 要 遍 历 来 对 所 有 属 性 监 听 对 于 对 象 的 新 增 属 性，需 要 手 动 监 听 对 于 数 组 通 过 push、unshift方 法 增 加 的 元 素，也 无 法 监 听 Proxy就 没 有 这 个 问 题，可 以 监 听 整 个

48、 对 象 的 数 据 变 化，所 以 用 vue3.0会 用 Proxy 代 替 def inedPropertyo11、Vue组 件 间 通 信 有 哪 几 种 方 式？【仅 供 参 考】Vue组 件 间 通 信 是 面 试 常 考 的 知 识 点 之 一，这 题 有 点 类 似 于 开 放 题，你 回 答 出 越 多 方 法 当 然 越 加 分，表 明 你 对 Vue掌 握 的 越 熟 练。Vue组 件 间 通 信 只 要 指 以 下 3 类 通 信：父 子 组 件 通 信、隔 代 组 件 通 信、兄 弟 组 件 通 信，下 面 我 们 分 别 介 绍 每 种 通 信 方 式 且 会 说

49、明 此 种 方 法 可 适 用 于 哪 类 组 件 间 通 信。(1)props/$emit适 用 父 子 组 件 通 信 这 种 方 法 是 Vue组 件 的 基 础，相 信 大 部 分 同 学 耳 闻 能 详，所 以 此 处 就 不 举 例 展开 介 绍。（2）ref与$parent/$children适 用 父 子 组 件 通 信 ref：如 果 在 普 通 的 DOM元 素 上 使 用，引 用 指 向 的 就 是 DOM元 素；如 果 用 在 子 组 件 上，引 用 就 指 向 组 件 实 例$parent/$children：访 问 父/子 实 例（3）EventBus（$emit/

50、$on）适 用 于 父 子、隔 代、兄 弟 组 件 通 信 这 种 方 法 通 过 一 个 空 的 Vue实 例 作 为 中 央 事 件 总 线（事 件 中 心），用 它 来 触 发 事 件 和 监 听 事 件，从 而 实 现 任 何 组 件 间 的 通 信，包 括 父 子、隔 代、兄 弟 组 件。（4）$attrs/$listeners适 用 于 隔 代 组 件 通 信$attrs：包 含 了 父 作 用 域 中 不 被 prop所 识 别（且 获 取）的 特 性 绑 定（class和 style除 外）当 一 个 组 件 没 有 声 明 任 何 prop时，这 里 会 包 含 所 有 父