2025四川九强通信科技有限公司招聘前端开发工程师拟录用人员笔试历年参考题库附带答案详解

2025四川九强通信科技有限公司招聘前端开发工程师拟录用人员笔试历年参考题库附带答案详解一、选择题从给出的选项中选择正确答案（共50题）1、下列代码执行后，`console.log(a)`的输出结果是？`leta=10;functiontest(){console.log(a);leta=20;}test();`A.10B.undefinedC.报错D.202、关于Vue.js中的响应式原理，以下说法错误的是？A.Vue2使用Object.definePropertyB.Vue3使用ProxyC.Proxy可以监听数组索引变化D.Object.defineProperty能检测对象属性的添加删除3、CSS中，`z-index:999`的元素一定显示在`z-index:1000`的元素上方吗？A.是B.否C.取决于颜色D.取决于宽度4、JavaScript中，`null`和`undefined`的区别正确的是？A.null是对象，undefined不是B.undefined是对象，null不是C.两者类型相同D.null表示无值，undefined表示未定义5、下列哪个HTTP状态码表示“重定向”？A.200B.301C.404D.5006、在Webpack中，Loader的作用是什么？A.打包模块B.转换文件类型C.优化代码体积D.启动开发服务器7、JavaScript事件循环（EventLoop）中，微任务（Microtask）和宏任务（Macrotask）的执行顺序是？A.先执行所有宏任务再执行微任务B.每执行完一个宏任务，就清空所有微任务C.随机执行D.同时执行8、CSSFlexbox布局中，`justify-content:space-between`的含义是？A.两端对齐，中间平分剩余空间B.居中对齐C.右对齐D.均匀分布，两端不留空隙9、以下哪种数据结构适合实现“先进先出”（FIFO）？A.栈StackB.队列QueueC.树TreeD.图Graph10、HTML5中，`<canvas>`元素主要用于什么？A.绘制图形B.播放视频C.存储数据D.定义样式11、Git中，`gitmerge`和`gitrebase`的主要区别是？A.merge保留分支历史，rebase重写历史B.merge更快C.rebase更安全D.没有区别12、RESTfulAPI设计中，获取用户列表通常使用什么HTTP动词？A.POSTB.GETC.PUTD.DELETE13、JavaScript中，`Atotype.map()`方法的返回值是？A.修改原数组B.新数组C.单个元素D.undefined14、CSS选择器优先级从高到低排序正确的是？A.ID>Class>TagB.Class>ID>TagC.Tag>Class>IDD.ID>Tag>Class15、下列哪个不是JavaScript的基本数据类型？A.StringB.NumberC.ObjectD.Boolean16、在浏览器中，LocalStorage和SessionStorage的主要区别是？A.LocalStorage容量小B.SessionStorage关闭页面后清除C.LocalStorage仅限同源D.没有区别17、React中，`useEffect`钩子第二个参数为空数组`[]`的作用是？A.每次渲染都执行B.组件挂载时执行一次C.组件卸载时执行D.报错18、HTTPS协议相比HTTP协议的主要优势是？A.速度更快B.数据传输加密C.占用端口更少D.无需证书19、CSS中，`position:fixed`的元素相对于谁定位？A.父元素B.文档流C.浏览器视口（Viewport）D.自身20、JavaScript中，`NaN===NaN`的结果是？A.trueB.falseC.undefinedD.Error21、下列哪种数据结构在插入和删除操作时不需要移动其他元素，且查找效率通常低于数组？

A.栈

B.队列

C.链表

D.哈希表22、在关系型数据库中，用于保证数据一致性和完整性的约束不包括：

A.主键约束

B.外键约束

C.唯一约束

D.索引约束A.主键约束B.外键约束C.唯一约束D.索引约束23、Vue.js中，子组件向父组件传递数据主要通过什么方式？

A.props

B.$emit

C.$refs

D.VuexA.propsB.$emitC.$refsD.Vuex24、HTML5中，用于定义文档导航链接的区域标签是：

A.<div>

B.<section>

C.<nav>

D.<aside>A.<div>B.<section>C.<nav>D.<aside>25、CSS中，position属性的哪个值会使元素相对于其正常位置进行偏移？

A.static

B.relative

C.absolute

D.fixedA.staticB.relativeC.absoluteD.fixed26、JavaScript中，typeofnull的返回值是：

A."null"

B."object"

C."undefined"

D."boolean"A."null"B."object"C."undefined"D."boolean"27、HTTP协议中，表示请求成功并返回内容的状态码是：

A.200

B.301

C.404

D.500A.200B.301C.404D.50028、Git中，将本地分支的提交合并到当前分支的命令是：

A.gitpush

B.gitmerge

C.gitpull

D.gitcommitA.gitpushB.gitmergeC.gitpullD.gitcommit29、下列哪项不是RESTfulAPI设计的最佳实践？

A.使用名词表示资源

B.使用HTTP动词表示操作

C.URL中包含版本号如/api/v1/users

D.使用GET请求修改服务器状态A.使用名词表示资源B.使用HTTP动词表示操作C.URL中包含版本号如/api/v1/usersD.使用GET请求修改服务器状态30、在CSS布局中，Flexbox容器的默认主轴方向是：

A.column

B.row

C.row-reverse

D.column-reverseA.columnB.rowC.row-reverseD.column-reverse31、JavaScript事件循环（EventLoop）中，微任务（Microtask）的执行优先级高于宏任务（Macrotask），下列属于微任务的是：

A.setTimeout

B.setInterval

C.Promise.then

D.DOM渲染A.setTimeoutB.setIntervalC.Promise.thenD.DOM渲染32、SQL语句中，用于从数据库表中检索数据的命令是：

A.INSERT

B.UPDATE

C.SELECT

D.DELETEA.INSERTB.UPDATEC.SELECTD.DELETE33、Linux系统中，查看当前目录下所有文件（包括隐藏文件）的详细列表的命令是：

A.ls-l

B.ls-a

C.ls-la

D.dirA.ls-lB.ls-aC.ls-laD.dir34、前端性能优化中，懒加载（LazyLoading）主要解决的核心问题是：

A.代码体积过大

B.首屏加载时间过长

C.CSS样式冲突

D.JavaScript语法错误A.代码体积过大B.首屏加载时间过长C.CSS样式冲突D.JavaScript语法错误35、在TCP三次握手过程中，服务器收到客户端的SYN包后，回复的包中包含的标志位是：

A.SYN

B.ACK

C.SYN+ACK

D.FINA.SYNB.ACKC.SYN+ACKD.FIN36、CSS选择器中，优先级最高的是：

A.ID选择器(#id)

B.类选择器(.class)

C.标签选择器(div)

D.通配符选择器(*)A.ID选择器(#id)B.类选择器(.class)C.标签选择器(div)D.通配符选择器(*)37、Redis数据类型中，适合存储社交网络中“好友关注列表”的数据结构是：

A.String

B.List

C.Set

D.HashA.StringB.ListC.SetD.Hash38、JavaScript中，箭头函数与普通函数的主要区别不包括：

A.箭头函数没有自己的this

B.箭头函数不能作为构造函数使用

C.箭头函数拥有arguments对象

D.箭头函数简写语法更简洁A.箭头函数没有自己的thisB.箭头函数不能作为构造函数使用C.箭头函数拥有arguments对象D.箭头函数简写语法更简洁39、在浏览器中，localStorage和sessionStorage的主要区别是：

A.存储大小限制不同

B.数据有效期不同

C.数据类型支持不同

D.跨域访问权限不同A.存储大小限制不同B.数据有效期不同C.数据类型支持不同D.跨域访问权限不同40、Web安全中，XSS（跨站脚本攻击）的主要危害是：

A.窃取用户Cookie或会话令牌

B.破坏服务器数据库

C.导致服务器CPU过载

D.拦截网络数据包A.窃取用户Cookie或会话令牌B.破坏服务器数据库C.导致服务器CPU过载D.拦截网络数据包41、在HTML5中，用于定义文档导航链接区域的语义化标签是？A.`<div>`B.`<nav>`C.`<section>`D.`<article>`42、CSS中，`position:fixed`定位的元素相对于什么进行定位？A.浏览器窗口B.父元素C.文档流D.最后一个已定位的祖先元素43、JavaScript中，下列哪个方法可以创建一个新的数组，其中包含调用提供函数的每个元素的结果？A.`forEach()`B.`map()`C.`filter()`D.`reduce()`44、HTTP状态码304表示什么含义？A.请求永久移动B.未修改C.临时重定向D.客户端错误45、Vue.js中，用于监听数据变化并在DOM更新后执行回调的属性是？A.`computed`B.`watch`C.`methods`D.`data`46、在CSSFlexbox布局中，`justify-content:space-between`的作用是？A.项目两端对齐，中间均匀分布B.所有项目居中C.项目均匀分布，首尾贴边D.项目垂直居中47、JavaScript中，`null`和`undefined`的主要区别是？A.类型相同B.null表示有意为空，undefined表示变量已声明但未赋值C.undefined是null的子类D.两者无区别48、HTML中，`<metacharset="UTF-8">`标签的主要作用是？A.设置网页标题B.指定字符编码C.引入外部样式表D.定义视口宽度49、React中，`useState`Hook返回的值是什么形式？A.一个数组B.一个对象C.两个函数D.一个布尔值50、CSS选择器优先级最高的是？A.ID选择器B.类选择器C.内联样式D.标签选择器

参考答案及解析1.【参考答案】C【解析】此题考察变量提升与暂时性死区（TDZ）。在ES6中，`let`和`const`声明的变量存在“暂时性死区”。当进入函数作用域时，`a`虽然被声明，但在声明语句执行前访问该变量会抛出引用错误（ReferenceError），而不是像`var`那样返回`undefined`。因此程序会直接报错中断。2.【参考答案】D【解析】Vue2基于`Object.defineProperty`，其缺点是无法监听对象属性的新增或删除，也无法直接监听数组下标的变化（需重写数组方法）。Vue3改用`Proxy`，可以拦截整个对象的操作，包括新增、删除属性以及数组索引的变化，性能更好且功能更完善。因此D选项描述错误。3.【参考答案】B【解析】`z-index`仅在定位元素（position不为static）且处于同一层叠上下文（StackingContext）时才生效。如果两个元素处于不同的层叠上下文（例如父元素设置了`transform`或`opacity`创建了新的上下文），则`z-index`的比较无效，渲染顺序由DOM结构或父级上下文决定。因此不一定。4.【参考答案】D【解析】`typeofnull`返回`"object"`是历史遗留bug，但语义上null表示“空值”或“无对象”。`typeofundefined`返回`"undefined"`，表示变量已声明但未赋值。两者主要区别在于语义：null是有意赋值的空对象引用，undefined是系统默认的未初始化状态。5.【参考答案】B【解析】200OK表示请求成功；301MovedPermanently表示永久重定向；404NotFound表示资源未找到；500InternalServerError表示服务器内部错误。因此301属于重定向状态码。6.【参考答案】B【解析】Webpack的核心是ModuleBundler。Loader用于对模块的源代码进行转换，例如将TypeScript转为JavaScript，或将Sass转为CSS。Plugin则用于执行更广泛的任务，如打包优化、环境变量注入等。因此Loader的主要作用是转换文件类型。7.【参考答案】B【解析】EventLoop的基本流程是：执行同步代码->执行完当前宏任务->检查并执行所有微任务（直到微任务队列为空）->渲染（如果需要）->进入下一个宏任务。因此，每个宏任务执行完毕后，都会立即清空当前的微任务队列。8.【参考答案】A【解析】`space-between`表示第一项紧贴主轴起始端，最后一项紧贴主轴结束端，其余项目之间的间距相等。`space-around`是每项两侧间距相等，两端留有空隙。`flex-start`是左对齐。因此A描述正确。9.【参考答案】B【解析】栈（Stack）遵循“后进先出”（LIFO）原则；队列（Queue）遵循“先进先出”（FIFO）原则，就像排队一样，先来的先处理。树和图是非线性数据结构。因此选B。10.【参考答案】A【解析】`<canvas>`是一个画布容器，通过JavaScriptAPI（如CanvasRenderingContext2D）可以在其上动态绘制图形、图表、动画等。`<video>`用于播放视频，`localStorage`用于存储数据，`<style>`或CSS用于定义样式。11.【参考答案】A【解析】`gitmerge`会在合并时创建一个“合并提交”，保留分支的完整历史轨迹，适合公共分支。`gitrebase`会将当前分支的提交“重新播放”到目标分支顶端，重写提交历史，使线性历史更整洁，但会改变提交哈希，不适合已推送的公共分支。12.【参考答案】B【解析】GET用于获取资源，幂等且安全；POST用于创建新资源；PUT用于更新/替换资源；DELETE用于删除资源。获取列表属于读取操作，应使用GET。13.【参考答案】B【解析】`map()`方法创建一个新数组，其中的每个元素是调用一次提供的函数后的返回值。它不会修改原数组（除非回调函数中有副作用），也不会返回单个元素或undefined。14.【参考答案】A【解析】CSS优先级计算规则：内联样式（1000）>ID选择器（100）>类/伪类/属性选择器（10）>标签/伪元素选择器（1）。因此ID最高，Class次之，Tag最低。15.【参考答案】C【解析】ES6之前的基本类型有Undefined,Null,Boolean,Number,String,Symbol。Object是引用类型。虽然ES6引入了Symbol，但Object始终属于复杂的引用数据类型，而非基本数据类型。16.【参考答案】B【解析】两者都遵循同源策略。区别在于生命周期：`SessionStorage`的数据在当前浏览器会话期间有效，关闭标签页或窗口后数据会被清除；`LocalStorage`是持久化的，除非手动删除，否则数据一直存在。17.【参考答案】B【解析】`useEffect`的第二个参数是依赖项数组。如果传入空数组`[]`，表示该效果不依赖任何props或state，因此只在组件首次挂载（Mount）时执行一次，之后不再执行。若省略第二个参数，则每次渲染都会执行。18.【参考答案】B【解析】HTTPS（HyperTextTransferProtocolSecure）是在HTTP基础上加入了SSL/TLS协议，主要目的是对传输数据进行加密，防止窃听和篡改，确保数据完整性。HTTPS通常使用443端口，速度因加密解密开销略慢于HTTP，且必须配置数字证书。19.【参考答案】C【解析】`fixed`定位的元素会相对于浏览器视口（Viewport）进行定位，即使页面滚动，该元素也会保持在屏幕的固定位置。`absolute`是相对于最近的非static定位祖先元素。`relative`是相对于自身正常位置。`sticky`是混合定位。20.【参考答案】B【解析】在IEEE754标准中，NaN（NotaNumber）不等于任何值，包括它自己。这是为了区分无效的数值运算结果。要判断一个值是否为NaN，应使用`Number.isNaN()`或`isNaN()`函数，或者利用`x!==x`这一特性（因为只有NaN不等于自身）。21.【参考答案】C【解析】链表通过指针连接节点，插入和删除只需修改指针，无需移动元素，时间复杂度为O(1)（已知位置）。而数组需要移动元素。栈和队列是受限的线性表，底层多由数组或链表实现，其核心限制在于存取顺序（LIFO/FIFO），而非结构本身的存储特性。哈希表查找平均为O(1)，但最坏情况较差。链表相比数组，随机访问效率低，需遍历，故符合题意。22.【参考答案】D【解析】主键约束确保记录唯一且非空；外键约束维护表间引用完整性；唯一约束确保列值不重复。索引主要用于加速查询检索，优化性能，但它本身不是一种数据完整性约束机制，创建或删除索引不影响数据的逻辑正确性或一致性。因此，索引约束不属于保证一致性和完整性的核心约束。23.【参考答案】B【解析】在Vue中，数据流动遵循“单向数据流”原则。父组件通过props向子组件传递数据。若子组件需要向父组件发送消息或传递数据，需使用$emit触发自定义事件，父组件监听该事件并处理。$refs用于获取DOM元素或组件实例，Vuex用于状态管理，均非直接的子传父通信标准机制。24.【参考答案】C【解析】<nav>标签专门用于定义导航链接的部分。<div>是无语义的容器。<section>表示文档中的一个独立章节或区域。<aside>表示与页面主内容稍微独立的内容，如侧边栏。虽然<div>也可用来做导航，但<nav>具有明确的语义，利于SEO和无障碍访问。25.【参考答案】B【解析】relative使元素相对于其在文档流中的原始位置进行偏移，且不脱离文档流，原空间保留。static是默认值，不发生偏移。absolute使元素脱离文档流，相对于最近的已定位祖先元素偏移。fixed使元素相对于浏览器窗口固定，滚动页面无影响。26.【参考答案】B【解析】这是一个历史遗留Bug。在JS早期版本中，值是以机器码存储的，类型信息存储在低位。null被视为空指针（0），而被错误地分类为对象类型。尽管ECMAScript规范后来进行了修正，但为了保持向后兼容性，typeofnull仍返回"object"。正确判断null应使用严格相等运算符null===null。27.【参考答案】A【解析】200OK表示服务器成功处理了请求。301MovedPermanently表示资源永久重定向。404NotFound表示请求的资源未找到。500InternalServerError表示服务器内部错误。题目要求返回内容且成功，故选200。28.【参考答案】B【解析】gitmerge用于将指定分支的更改合并到当前分支。gitpush是将本地提交推送到远程仓库。gitpull是从远程获取并合并。gitcommit是将暂存区的更改提交到本地仓库历史。29.【参考答案】D【解析】RESTful强调无状态和统一接口。GET应仅用于获取资源，不应产生副作用或修改服务器状态。修改状态应使用PUT、PATCH或DELETE。使用名词、HTTP动词和版本号均符合常规设计原则，但利用GET进行修改违反了幂等性和安全性原则。30.【参考答案】B【解析】Flexbox容器默认的主轴（mainaxis）方向为行（row），即从左到右排列子元素。可通过flex-direction属性修改为column（从上到下）或反向排列。这是CSSFlexbox规范的基础定义。31.【参考答案】C【解析】setTimeout和setInterval属于宏任务，放在任务队列末尾等待执行。Promise.then/catch/finally以及MutationObserver属于微任务，在当前宏任务结束后、下一次渲染前立即执行。DOM渲染通常在宏任务之后、微任务之前或之后视具体浏览器实现而定，但通常不被视为JS引擎直接调度的任务队列项。32.【参考答案】C【解析】SELECT用于查询数据。INSERT用于插入新数据。UPDATE用于修改现有数据。DELETE用于删除数据。题目要求“检索”，故对应SELECT。33.【参考答案】C【解析】ls是列出目录内容的命令。-l表示长格式列表，显示权限、所有者等详细信息。-a表示显示所有文件，包括以点开头的隐藏文件。-la结合两者，既显示详细信息又包含隐藏文件。dir在Windows中常用，Linux中虽可用但功能类似ls。34.【参考答案】B【解析】懒加载技术（如图片懒加载、路由懒加载）的核心目的是延迟加载非首屏必需的资源。这样可以在用户访问页面初期只加载关键资源，减少初始请求数量和文件大小，从而显著缩短首屏渲染时间，提升用户体验。它不直接解决代码体积（需压缩）、样式冲突或语法错误。35.【参考答案】C【解析】第一次握手：客户端发送SYN=1,seq=x。第二次握手：服务器收到后，回复SYN=1,ACK=1,seq=y,ack=x+1，即SYN+ACK。第三次握手：客户端回复ACK=1,seq=x+1,ack=y+1。FIN用于断开连接。36.【参考答案】A【解析】CSS优先级规则大致为：内联样式>ID选择器>类/属性/伪类选择器>标签/伪元素选择器>通配符。ID选择器权重为100，类为10，标签为1，通配符为0。因此ID选择器优先级高于类和标签。37.【参考答案】C【解析】Set（集合）具有无序性和唯一性，适合存储好友列表，因为一个人不能重复关注同一个人，且关注关系通常不需要特定顺序。List适合有序列表（如微博动态流，但可能有重复或需去重）。Hash适合存储对象属性。String适合简单键值对。38.【参考答案】C【解析】箭头函数继承外层作用域的this，自身没有this绑定，也不能作为构造函数（无prototype）。箭头函数不绑定自己的arguments对象，而是通过rest参数...args替代。普通函数才有自己的arguments对象。39.【参考答案】B【解析】两者都存储字符串，大小限制通常相同（约5MB），且都不支持跨域。主要区别在于生命周期：sessionStorage的数据在页面会话结束时（关闭标签页或浏览器）被清除；localStorage的数据除非手动删除，否则永久保存。40.【参考答案】A【解析】XSS通过在网页中注入恶意脚本，当其他用户浏览该页面时，脚本在当前用户的上下文中执行。这可能导致攻击者窃取用户的敏感信息（如Cookie、Token），冒充用户身份进行操作。SQL注入用于破坏数据库，DDoS导致CPU/带宽过载，中间人攻击涉及数据包拦截。41.【参考答案】B【解析】`<nav>`标签定义导航链接的部分。`<div>`是非语义化的容器；`<section>`定义文档中的节（section、区段）；`<article>`定义独立的创作内容。HTML5引入了大量语义化标签以增强网页的可访问性和SEO，`<nav>`专门用于包裹主要的导航区块。42.【参考答案】A【解析】`fixe