2023年某科技公司前端开发初级岗的面试笔试真题（含选择题答案、问答题解析、机试题源码）

黛琳ghz

已于 2023-06-27 00:05:12 修改

阅读量3.7k

点赞数 5

分类专栏：前端面试——某互联网公司笔试真题（坐标广州、深圳）文章标签：前端开发面试题笔试题 JavaScript Vue 选择题问答题

于 2023-04-28 08:00:00 首次发布

本文链接：https://blog.csdn.net/weixin_53231455/article/details/130397461

版权

前端面试——某互联网公司笔试真题（坐标广州、深圳）专栏收录该内容

3 篇文章 0 订阅

订阅专栏

📚关于该专栏: 该专栏的发布内容是前端面试中笔试部分真题、答卷类、机试等等的题目，题目类型包括逻辑题、算法题、选择题、问答题等等，除了内容的分享，还有解析和答案。真实来自某些互联网公司，坐标广东广州。

🔥🔥🔥 持续更新 🔥🔥🔥
😉专栏博主: 黛琳ghz，万粉博主，计算机软件专业博主，校专业第一，拥有十余项校级奖项、多项省级奖项、软件著作权一项等等。，专注于软件开发学习和分享，从事于软件开发行业。在 CSDN 获得有 CSDN 实力新星（两期新星计划 TOP5）、CSDN 全栈领域新星创作者、CSDN 前端领域优质创作者、2022年度博客之星前端领域TOP 8、2022年度博客之星TOP 95、华为云社区云享专家、阿里云社区专家博主、CSDN 第四届猿创征文优质博文奖（分数85第一）、以及多项优秀TOP 博文，欢迎你的关注与访问、可私信交流学习、问答等等。

在这里插入图片描述

📋前言

这篇文章来自一个全新的专栏，同时也是这个专栏的第一篇文章，该专栏的发布内容是前端面试中笔试部分真题、答卷类、机试等等的题目，题目类型包括逻辑题、算法题、选择题、问答题等等，除了内容的分享，还有解析和答案。真实来自某些互联网公司，坐标广东广州。

这篇文章分享的真题是来自2023年某科技公司的笔试真题，面试的岗位是初级前端，题目内容包括了选择题、问答题、机试题，当然与面试官交谈的过程也是必不可少的一部分，主要还是针对简历的项目经验、工作经历来展开提问和交流，这里就不过多描述了。

🎯选择题（含多选）

❗注意：背景和颜色是这样的答案的选项是正确答案，没有备注多选题的题目都是单选的。选择题就不详细解析了，这套题不难，都是很基础的内容，如果有疑问和不懂的内容，可以评论区留言和私信我，收到消息第一时间解答。

1. 哪一项不属于数据结构范畴？
A.链表
B.栈、队列
C.树、图
D.表、视图

2. 哪一项不是javascript的typeof返回数据类型？
A.string
B.undefined
C.null
D.object

3. 事件代理是什么原理实现？
A.利用html事件传递原理
B.利用dom具有事件捕获能力
C.利用事件冒泡的原理
D.利用window具有事件捕获能力和冒泡能力

4. typeof null？
A.undefined
B.null
C.array
D.object

5. 哪一项不是js的关键字？
A.import from
B.select interface
C.export extend
D.Object Function

6. 制作级联菜单功能时调用的是下拉列表框的（）事件
A.onChange
B.onFocus
C.selected
D.onClick

7. 使用open方法打开具有浏览器工具条，地址栏，菜单栏的窗口，下列选项正确的是（）
A.open (" x . html " , " HI " , " toolbar =1, scrollbars =1, status =1")；
B.open (" x . html " ,＂ HI " , " toolbar = yes , menubar =1, location =1")；
C.open (" x . html " , " status = yes , menubar =1, loca tion =1")；
D.open (" HI " ," scrollbars =1, location =1, status =1")；

8. 关于setTimeout（“check”，10）中说法正确的是（）
A.程序循环执行10次
B.Check函数每10秒执行一次
C.10做为参数传给函数check
D.Check函数每10毫秒执行一次

9. 下列哪一项不是js闭包的作用？
A可以存变量值
B可以封装对象
C可以做单例工厂
D可以防止内存溢出

10. 不能提高前端性能的手段有（）
A压缩图片物理大小
B使用雪碧合成图
C全部使用块元素布局
D使样式文件合并

11. 哪一项不是ajax请求类型get和post方式区别？
A .post在url后面接参数，get放在虚拟载体里面
B. get在url后面接参数，post放在虚拟载体里面
C. get有大小限制（只能提交少量参数）
D. 应用场景不同，请求数据和提交数据

12. 哪一项不属于对象特性？
A.继承
B.封装
C.多态
D.接口

13. HTML5应用中，在浏览器端大小为50k的数据，并且不受浏览器关闭影响，可以使用以下哪几种技术？【多选题】
A. localStorage
B. sessionStorage
C. cookie
D. indexDB

14. 单向链表有什么特征？
A.同时有指向下一个节点和上一个节点的指针
B.大小固定，不能动态拓展
C.链表定位元素时间复杂度O(n)
D. 链表在插入或删除元素的时间复杂度O(1)

15. 下列对CSS外边距描述正确的是（）（不考虑BFC对边距的影响）
A.外边距的 css 代码是 padding
B.两个上下相邻的同级元素Div1,Div2。Div1的下边距是10px,Div2的上边距是
10px。Div1和Div2的间距是20px
C.两个上下相邻的同级元素Div1,Div2。Div1的下边距是20px,Div2的上边距是 10px。Div1和Div2的间距是20px
D.外边距的值为(10px 20px 30px)。所以其上边距为10px,下边距为20px,左边距
为30px,右边距为30px

16.以下代码输出什么？

(function(){
    var x = y 
    undefined
})();
console.log(y);
console.log(x)

A.undefined,undefined
B.undefined,error
C.null,null
D.error

17. 以下代码输出什么？

var emp = [1,2,3];
for(var i in emp)

以下说法错误的是（）【多选题】
A.for(var i= 0;i<em;i++)能与题中for循环代码互换
B.for(var i= 0;i<Arrar(3);i++)能与题中for循环代码互换
C.for(var i= 0;i<emp.length();i++)能与题中for循环代码互换
D.for(var i= 0;i<emp.length;i++)能与题中for循环代码互换

18.以下代码输出什么？

const obj = {
    1: "a",
    2: "b",
    3: "c"
};
const set = new Set([1, 2, 3, 4]);
console.log(obj.hasOwnProperty("1"));
console.log(obj.hasOwnProperty(1));
console.log(set.has("1"));
console.log(set.has(1));

A.true true false true
B.false false true true
C.false true false true
D.true false false true

19. 不属于行内元素的是（）
A.span
B.p
C.a
D.b

20. 关于重排重绘（回流重绘）描述不正确的是（）
A、重绘一定需要重排,重排必然会导致重绘
B、导致重排,增加、删除节点,改变元素位置、尺寸
C、重绘是在一个元素的外观被改变所触发的浏览器行为,浏览器会根据元素的新
属性重新绘制,使元素呈现新的外观。
D、批量修改 dom 可以先让父级元素脱离文档流,然后进行添加批量 dom 元素,然
后在进行显示,脱离文档流增删元素,不会引起重排

🎯问答题

下面的题目是问答题，每个人的表述的方式都不一定相同，但是道理都一样，得答对、得思路清晰。因此下面的答案仅供参考。

21.HTTP 请求方式 GET 和 POST 区别？

HTTP 是客户端和服务器之间交换信息的协议，它是应用层协议。GET 和 POST 都是 HTTP 协议中常见的请求方法。
GET 请求是一种从服务器获取数据的请求方式。在 GET 请求中，请求参数（例如表单数据、URL 查询字符串）会附加在 URL 后面，并在发送请求时以明文形式发送。GET 请求发送的数据量通常比较小，且请求参数会被浏览器缓存，因此 GET 请求通常被用于数据检索、浏览等场景。
POST 请求是一种向服务器提交数据的请求方式。在 POST 请求中，请求参数（例如表单数据）会被包含在请求体中，并以密文形式发送。POST 请求发送的数据量通常比较大，且请求参数不会被浏览器缓存，因此 POST 请求通常被用于数据提交、文件上传等场景。
总的来说，GET 请求适合获取数据，POST 请求适合提交数据。同时，由于 POST 请求发送的数据具有一定的安全性，因此一些敏感数据也应该使用 POST 请求发送。

22. HTTP 和 HTTPS 的区别？

HTTP（Hypertext Transfer Protocol）和 HTTPS（Hypertext Transfer Protocol Secure）都是用于在客户端和服务器之间传输数据的协议，但它们之间有几个重要区别。
安全性：HTTP 协议传输的数据是明文的，没有任何加密措施，容易被黑客窃取、篡改和窥探。而 HTTPS 协议采用 SSL/TLS 加密技术，可以保证数据传输过程中的安全性，防止数据被中途篡改和窃取。
端口号：HTTP 协议默认使用 80 端口进行通讯，而 HTTPS 协议默认使用 443 端口进行通讯。
证书：HTTPS 协议需要使用 SSL/TLS 证书，这是一种由权威机构颁发的数字证书，用于验证网站的真实性和安全性。如果浏览器在访问网站时发现 SSL/TLS 证书无效或被篡改，那么就会出现警告提示，让用户自行决定是否继续访问该网站。
总体来说，HTTPS 协议相比 HTTP 协议更加安全可靠，适用于需要传输敏感信息（例如信用卡号、密码等）的网站，而 HTTP 协议则适用于不需要保护隐私和安全的信息传输。

23. CSS 如何清除浮动？

这里简单举几个例子。

使用 clear 属性，可以在浮动元素下方插入一个空元素来清除浮动。例如：
.clearfix:after {
 content: "";
 display: table;
 clear: both;
}

使用 overflow 属性，将父元素设置为 overflow: hidden 或 overflow: auto，可以清除浮动。例如：
.parent {
overflow: hidden;
}

使用 clearfix 类，通过添加类名 .clearfix 来清除浮动。例如：
.clearfix::after {
content: "";
 clear: both;
 display: block;
}
.clearfix {
   *zoom: 1;
}

24. Vue 的生命周期及理解？

这里不多赘述了，可以直接参考我的文章，或者官网继续查询学习。文章地址：前端开发面试题—Vue的生命周期

25. jsp 和 js 的区别？

JSP（Java Server Pages）和 JS（JavaScript）是两种完全不同的技术。
JSP 是一种被动的服务端页面技术，它利用 Java 技术动态生成 HTML 页面。在 JSP 页面中可以直接嵌入 Java 代码，可以使用 JavaBean、Servlet 等技术，可以与数据库进行交互，实现动态网页的生成和更改。
JS 是一种脚本语言，它主要运行在客户端浏览器上，用于实现网页的动态效果和交互逻辑。JS 可以直接将网页中的元素进行操作，包括修改文本内容、改变样式、以及响应用户的动作和输入等等。JS 运行在浏览器中，不需要安装任何插件，是一种非常方便的开发技术。
总体来说，JSP 和 JS 的定位和使用场景都不同，各有各的优势和局限性。JSP 主要用于服务端的动态网页生成和交互，而 JS 则主要用于客户端的动态效果和交互逻辑实现。

26. Vue 中 computed 和 watch 区别？

computed 和 watch 指的是计算属性和侦听器，它们都是 Vue.js 中响应式数据的重要机制。它们的区别在于：
计算属性是一个函数，用于定义对一个或多个响应式数据的计算。侦听器是一个对象，用于监听指定数据的变化。
计算属性适合用于需要进行复杂计算或需要缓存计算结果的场景，比如需要对多个响应式数据进行计算。侦听器适合用于需要在数据变化时执行相应操作的场景，比如需要监控某个数据的变化并做出相应操作。
计算属性会缓存计算结果，当计算所依赖的数据没有变化时直接返回缓存的结果。侦听器不会缓存任何东西，每次数据变化都会执行相应操作。
因此，如果需要对多个响应式数据进行计算，并且需要缓存计算结果，应该使用计算属性；如果需要在数据变化时执行相应操作，应该使用侦听器。当然，在实际开发中，我们也可以同时使用计算属性和侦听器，以满足更复杂的业务需求。
除此之外，还可以阅读我的文章，了解更多 computed 和 watch 的内容。文章地址：浅谈在 Vue2 和 Vue3 中计算属性和侦听器的一些变化

27. Vue 第一次加载页面时会触发哪几个钩子？

在 Vue 组件第一次加载页面时，会触发以下两个钩子函数：
beforeCreate：此时组件实例刚被创建，组件的属性和方法都未实例化，无法访问组件的 data、methods 等属性。
created：在组件实例已经创建完成，此时可以访问组件的 data、methods 等属性，但此时组件的 DOM 元素还未被挂载到页面上。
这两个钩子函数分别对应了 Vue 组件的生命周期的创建阶段。在 beforeCreate 钩子函数中，可以进行一些初始化的操作，如通过 this.$options 可以获取到传入组件的 props、data、methods 等属性。在 created 钩子函数中，可以进行一些基于初始化数据的操作，例如通过 Ajax 获取数据，或者使用 computed 计算属性等。
需要注意的是，在 created 钩子函数中组件的 DOM 元素并没有被挂载到页面上，如果需要对挂载后的 DOM 元素进行操作，则需要在 mounted 钩子函数中进行。

28. CSS 的盒子模型由哪几部分组成？

CSS 盒子模型由四个部分组成，分别是：
Content（内容区域）：指的是盒子包含的 HTML 内容。
Padding（内边距）：指的是内容区域与边框之间的空白区域。
Border（边框）：指的是内边距与外边距之间的线性边框。
Margin（外边距）：指的是边框与相邻元素之间的空白区域。
在 CSS 指定盒子的大小时，会将这四个部分统一考虑在内。例如，当我们通过 CSS 指定盒子的宽度为 100px 时，实际上这 100px 是从边框（border）的左侧到右侧的距离，包含了 padding、content 和 border 的宽度。如果要计算出内容（content）的宽度，则需要减去 padding 和 border 的宽度。
对于盒子的大小、边框、内边距和外边距，我们可以使用 CSS 属性来进行设置和调整，如 width、height、border、padding、margin 等属性。这些属性在网页布局中非常重要，能够帮助我们实现各种不同的布局效果。

29. v-if 和 v-show 的区别？

v-if 和 v-show 都是 Vue 中用来控制元素显示和隐藏的指令，但它们的实现方式和应用场景不同。区别如下：
v-if 的实现方式是通过控制 DOM 元素的存在与否来实现条件渲染，即当表达式的值为真才渲染元素，为假则不渲染。而 v-show 的实现方式是通过控制元素的 CSS 样式 display 来切换元素的显示和隐藏。当表达式的值为真时，元素会根据 CSS 显示出来；当表达式的值为假时，元素会被隐藏，但仍然在 DOM 中存在。
v-if 在首次渲染时只会在必要的情况下渲染元素，即表达式的值为真才渲染，而 v-show 则在首次渲染时总是会渲染元素，只是根据表达式的值来切换其显示与隐藏状态。
v-if 适合用于在条件不满足时频繁切换的场景，因为它可以节省不必要的 DOM 渲染和事件处理开销，提高应用性能。相对地，v-show 更适合用于需要频繁切换但渲染开销较小的场景，因为它无需每次切换都重新渲染 DOM。
总的来说，v-if 主要用于条件较复杂或需要频繁切换的场景，而 v-show 则主要用于简单的条件判断和频繁切换且渲染开销较小的场景。在实际应用中，应根据具体情况选择合适的指令。

30. js 数据类型有哪些？

JS的原始类型有7种，分别为Number、String、Boolean、Null、Undefined、Symbol（ES6新增的Symbol）、BigInt（最新：用于整数值大于Number数据类型支持的范围时）
基本数据类型的特点：基本数据类型存储的都是值，一般存储在栈上（栈指的是内存里的栈内存）。值保存在变量本地，且赋值给其他变量后，其他变量改变不影响原来的值。
Object （在JS中除了基本数据类型以外都是对象，Object 是个大类，function 函数、array数组、date日期…等都归属于Object ）
引用数据类型的特点：引用数据类型存储的是地址（也就是指针），一般存储在堆中。当我们创建一个引用类型时，计算机会在堆内存中帮我们开辟一个空间来存放值，当我们访问值时，也就是要访问这个空间所拥有的那个地址（指针）。

31. CSS 中水平垂直居中的方法？

在 CSS 中，实现元素的水平垂直居中通常有以下几种方法：

内容已知时使用 position 和 transform 实现居中。
.center {
 position: absolute; /* 使父元素变成定位元素 */
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%); /* 将元素向上和左移动自身宽度和高度的一半 */
}

只设置宽高时使用 flex 实现居中。

.center {
  display: flex; /* 给父元素加上 flex 属性 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

不使用 flex 时，通过设置行高、文字对齐方式和 text-align 实现居中。

.center {
 height: 100px;
 line-height: 100px; /* 设置行高等于元素高度 */
 text-align: center; /* 文字居中 */
 vertical-align: middle; /* 垂直居中 */
}

使用绝对定位使得 top、bottom、left、right 值相等来实现居中。
.center {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto; /* 需要将 margin 值设置为 auto */
}

32. CSS 的定位方式？

在 CSS 中，常见的定位方式有以下三种：
静态定位（position: static）：元素默认的定位方式就是静态定位，此时 top、bottom、left、right 属性不起作用，元素只会按照在 HTML 中出现的顺序依次排列。
相对定位（position: relative）：相对定位会使元素相对于其正常位置进行移动。通过设置 top、bottom、left、right 来调整元素在页面中的位置，这些属性的值可以是像素、百分比或者是 auto，如果设置负值，则会向相反的方向移动，例如将 top 设置为 -10px，则会使元素向上移动 10 像素。
绝对定位（position: absolute）：绝对定位会使元素的位置相对于最近的已定位祖先元素（即 position 不为 static 的元素）进行定位，如果没有祖先元素，则相对于 body 元素定位。通过设置 top、bottom、left、right 来调整元素的位置，这些属性的值同样可以是像素、百分比或者 auto，如果不设置这些位置属性，则会按照正常的文档流进行排列，并且不会受到其他元素的影响。绝对定位的元素会从文档流中脱离，其他元素的位置不会受到它的影响。
在实际的布局中，可以结合使用不同的定位方式和其他 CSS 属性来实现各种复杂的布局效果。例如，可以使用绝对定位和 z-index 属性来实现弹出层、下拉菜单等效果。

33.前端的存储方式有哪些？

Cookie：Cookie 是存储在客户端的小型文本文件，主要用于存储用户的身份信息、浏览历史等数据。Cookie 的大小有限制，并且会被浏览器自动发送到服务器端，可能对网络带宽产生影响。
Web Storage：Web Storage 包括 localStorage 和 sessionStorage 两种类型，它们都是 HTML5 提供的本地存储方案，可以在客户端存储较大量的数据，也不会被自动发送到服务器端。localStorage 可以长期保存数据，而 sessionStorage 只能在当前会话周期中有效。由于 Web Storage 存储的数据是明文形式，因此需要加密处理。
IndexedDB：IndexedDB 是一个内置在浏览器中的数据库，一般用于存储结构化数据。IndexedDB 提供了非常灵活的数据访问方式和多个数据存储对象，支持高速的数据检索和多种查询方式，是一个功能强大的本地存储方案。
Web SQL：Web SQL 是另一种内置在浏览器中的数据库，在某些浏览器中受到支持。Web SQL 使用 SQL 语言进行数据操作，比 IndexedDB 更加容易使用，但也存在兼容性问题。
服务器存储：前端应用也可以将数据存储到服务器端，通过 AJAX、WebSocket 等技术与服务器进行数据交互。服务器存储的优点是数据可以长期保存，而且不会受到客户端限制，但也需要考虑网络延迟等问题。

34. Vue 中的通信方式？

在 Vue 中，主要有以下几种数据通信方式：
Prop 和事件：Prop 主要是用于父子组件之间的通信，父组件通过 props 把数据传递给子组件，子组件则通过事件向父组件发送数据。这种方式适合于简单的单向数据流场景。
Vuex：Vuex 是 Vue 的状态管理库，主要用于复杂应用中的状态共享和状态管理。Vuex 将数据存储在全局的 store 对象中，任何组件都可以通过 dispatch、commit 等方法访问和修改 store 中的数据。
$emit 和 $on：Vue 实例内部的组件和子组件之间可以通过 $emit 和 $on 方法相互通信，子组件通过 $emit 方法把数据发送给父组件，然后父组件通过 $on 方法接收数据。这种方式适合于简单的父子组件之间的通信。
$parent 和 $children：Vue 组件实例内部也可以通过 $parent 和 $children 属性进行父子组件之间的通信，子组件通过 $parent 属性获取到父组件的实例，父组件通过 $children 属性获取到子组件的实例，从而实现双向通信。
EventBus：EventBus 是一个事件总线，是一种比较常见的组件间通信方式。EventBus 可以理解为一个全局 Vue 实例，通过 $emit 和 $on 方法实现任意两个组件之间的通信，也可以实现跨级组件之间的通信。
根据实际需要和具体场景，我们可以选择合适的通信方式来实现数据的传递和共享。但需要注意的是，在使用任何通信方式时，都需要考虑数据的安全性和传递效率等问题。

35.行内元素、块级元素有哪些？有什么不同？

块级元素：

div、p、h1~h6 等元素都是块级元素，默认会在页面上占据一整行；
可以设置 width、height、margin、padding 等样式属性；
可以嵌套其他的块级元素和行内元素。

行内元素：

a、span、b、i、img 等元素都是行内元素，它们默认只占据自身的大小，不会换行；
设置 width、height、margin-top 和 margin-bottom 属性通常不会起作用，padding-top 和 padding-bottom 属性可用；
只能包含文本或者其他行内元素，不能包含块级元素。

区别：

块级元素默认情况下独占一行，行内元素可以在同一行内并列排列；
块级元素可以设置 width、height、margin、padding 等样式属性，但行内元素只能设置部分属性，如 color、font-size、padding、border 等；
块级元素可以包含其他的块级元素和行内元素，但行内元素只能包含文本或其他行内元素；
在默认情况下，块级元素与行内元素不受彼此限制，可以互相嵌套；
CSS 中的 display 属性可以实现将行内元素转换为块级元素，或者将块级元素转换为行内元素。

在页面布局中，通常采用块级元素和行内元素相结合的方式来实现各种效果。需要注意的是，在选择使用块级元素或行内元素时，要考虑到元素本身的特点以及最终的显示效果。

36. HTML 页面加载完成后，会触发哪个事件？

在 HTML 页面加载完成后，会触发 DOMContentLoaded 事件。这个事件表示文档已经解析完成，但是资源文件可能仍在加载中，例如页面中引入的外部样式表、脚本文件、图片等资源。

DOMContentLoaded 事件是一个非常常用的事件，它可以帮助我们在页面加载完成后执行一些操作，例如初始化页面数据、绑定事件、执行一些函数等等。对于一些简单的页面，我们可以直接在 JavaScript 文件中监听 DOMContentLoaded 事件，进行一些简单的操作。

javascript
document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM 已经加载完成');
  // 执行一些操作
});

除了 DOMContentLoaded 事件之外，还有其他的事件也可以表示页面的加载状态，例如 window.onload 事件。window.onload 事件在页面所有资源文件都加载完成后才会触发，包括图片、脚本、样式表、视频等等所有资源文件。因此，在一些需要等待所有资源文件加载完成后再执行的操作，可以使用 window.onload 事件来实现。

37. newDate() 获取的是哪里的时间？

在 JavaScript 中，调用 new Date() 方法可以获取当前时间。这个方法返回一个包含当前日期和时间的 Date 对象。所获取到的时间是基于客户端电脑上的本地时间，也就是用户所在时区的时间。
同时，可以通过 Date 对象提供的一些方法来获取更详细的日期和时间信息，例如 getFullYear()、getMonth()、getDate()、getHours()、getMinutes()和 getSeconds() 等方法。这些方法返回的值分别表示年份、月份、日期、小时、分钟和秒数。
需要注意的是，因为 JavaScript 是一种基于客户端的脚本语言，因此无法直接获取服务器的时间。如果需要获取服务器时间，通常需要通过 AJAX 等技术发送请求，并从服务器响应中获取时间信息。
另外，由于用户可以自行修改所在电脑的系统时间，因此在某些场景下，不能完全信赖客户端的时间。在这种情况下，需要使用可靠的时间源，例如通过网络访问时间服务器来获取精确的时间信息。

38.两个盒子分别放到父盒子的最左和最右，怎么做？

可以使用 CSS 的定位属性 position 和 left、right 属性来实现左右两个盒子分别放到父盒子的最左和最右。
首先，给每个子盒子设置 position: absolute;，这样它们的位置就可以相对于其父元素进行定位。然后，给左侧的盒子设置 left: 0;，表示它紧贴着父元素的左边界；给右侧的盒子设置 right: 0;，表示它紧贴着父元素的右边界。最后，可以通过设置子盒子的宽度和高度等属性来控制它们的大小。下面是一个示例代码：

<style>
.parent {
  position: relative; /* 确保子盒子相对于父元素进行定位 */
  height: 200px; /* 父盒子的高度 */
  border: 1px solid black; /* 方便查看 */
}

.left-box {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
  left: 0; /* 相对于父元素的左边界 */
}

.right-box {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: blue;
  right: 0; /* 相对于父元素的右边界 */
}
</style>

<div class="parent">
  <div class="left-box"></div>
  <div class="right-box"></div>
</div>

在上面的代码中，父盒子的类名为 parent，左侧盒子的类名为 left-box，右侧盒子的类名为 right-box。通过设置左侧盒子的 left: 0; 和右侧盒子的 right: 0;，它们就分别处于父盒子的最左和最右位置了。运行结果如下。

在这里插入图片描述

🎯机试题

1️⃣第一题

通过第一张图片我们可以看到相关的题目，图二为第一题的效果图，这里第一题的素材和数据没有，使用就不演示第一题了，而且第一题也是很简单的布局和写样式。
在这里插入图片描述

2️⃣第二题

一个简单的注册页面，需要实现简单的数据验证、以及模拟注册和注册成功和失败相对应的操作。接下来看具体代码如下：

代码目录
在这里插入图片描述
html、css代码

定义了一个表单，包含用户名、密码、确认密码和注册按钮。每个输入框后面都有一个空的 span 元素用于显示错误提示信息。此外，还定义了一个隐藏的 div 元素，用于在注册成功后显示提示信息。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  /* 表单元素样式 */
input[type="text"],
input[type="password"] {
  display: block;
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
}

/* 错误提示信息样式 */
.error-message {
  display: block;
  margin-bottom: 10px;
  color: red;
  font-size: 12px;
}

.error {
  border-color: red;
}

/* 注册按钮样式 */
button[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button[type="submit"]:hover {
  background-color: #45a049;
}

/* 成功提示信息样式 */
.hidden {
  display: none;
}
</style>
<body>
  <form id="register-form" onsubmit="submitForm(event)">
    <label>用户名：<input type="text" name="username" required></label>
    <span class="error-message" id="username-error"></span><br>
    <label>密码：<input type="password" name="password" required></label>
    <span class="error-message" id="password-error"></span><br>
    <label>确认密码：<input type="password" name="password-confirm" required></label>
    <span class="error-message" id="password-confirm-error"></span><br>
    <button type="submit">注册</button>
  </form>
  
  <div id="success-message" class="hidden">
    注册成功！
  </div>
</body>

<script  src="./index.js"></script>
</html>

登录页面代码

<h1>欢迎来到登陆页面</h1>

js代码
首先获取到表单元素和各个输入框、错误提示信息、成功提示信息的 DOM 元素。然后，在 submitForm 函数中，阻止表单的默认提交行为，获取输入框的值，并进行数据校验。如果校验未通过，则在每个输入框后面的错误提示信息中显示相应的错误信息。如果校验通过，则调用 simulateRegister 函数模拟注册过程。

在 showError 和 hideError 函数中，分别显示和隐藏错误提示信息，并在元素上添加或删除 error 类名来改变样式。

在 simulateRegister 函数中，可以编写具体的注册逻辑，并在注册成功后显示成功提示信息，并在 5 秒后跳转至登录页面。可以使用 setTimeout 方法来延时执行跳转操作。

var registerForm = document.getElementById('register-form');
var usernameInput = document.getElementsByName('username')[0];
var passwordInput = document.getElementsByName('password')[0];
var passwordConfirmInput = document.getElementsByName('password-confirm')[0];
var usernameError = document.getElementById('username-error');
var passwordError = document.getElementById('password-error');
var passwordConfirmError = document.getElementById('password-confirm-error');
var successMessage = document.getElementById('success-message');

// 定义 submitForm 函数
function submitForm(event) {
  event.preventDefault(); // 阻止表单提交

  // 进行数据校验
  var username = usernameInput.value.trim();
  var password = passwordInput.value.trim();
  var passwordConfirm = passwordConfirmInput.value.trim();
  var isValid = true;

  if (!username) {
    showError(usernameError, '请输入用户名');
    isValid = false;
  } else if (!/^[a-zA-Z0-9_-]{4,16}$/.test(username)) {
    showError(usernameError, '用户名格式不正确');
    isValid = false;
  } else {
    hideError(usernameError);
  }

  if (!password) {
    showError(passwordError, '请输入密码');
    isValid = false;
  } else if (password.length < 6) {
    showError(passwordError, '密码长度不能少于6个字符');
    isValid = false;
  } else if (!/\d/.test(password) || !/[a-z]/i.test(password)) {
    showError(passwordError, '密码必须包含数字和字母');
    isValid = false;
  } else {
    hideError(passwordError);
  }

  if (!passwordConfirm) {
    showError(passwordConfirmError, '请确认密码');
    isValid = false;
  } else if (passwordConfirm !== password) {
    showError(passwordConfirmError, '两次输入的密码不一致');
    isValid = false;
  } else {
    hideError(passwordConfirmError);
  }

  // 如果校验通过，则模拟注册
  if (isValid) {
    simulateRegister(username, password);
  }
}

// 定义 showError 和 hideError 函数
function showError(element, message) {
  element.innerText = message;
  element.classList.add('error');
}

function hideError(element) {
  element.innerText = '';
  element.classList.remove('error');
}

// 定义 simulateRegister 函数
function simulateRegister(username, password) {
  // 模拟注册过程
  // ...

  // 注册成功，显示提示信息并跳转
  successMessage.classList.remove('hidden');
  setTimeout(function() {
    window.location.href = 'login.html';
  }, 5000);
}

运行效果如下：
首先提前输入好用户名、密码。
在这里插入图片描述
然后点击注册，注册成功五秒后，跳转到登录页面。

3️⃣第三题

使用原生拖动 api 完成，商品拖动加入购入车的功能。接下来看具体代码如下：

代码目录 在这里插入图片描述 html、css代码

HTML 代码中，我们定义了三个商品和一个购物车。每个商品都定义了 draggable 属性为 true，表示它是可拖动的。购物车定义了 droppable 属性为 true，表示它可以接受拖动的物品。

CSS 样式代码中，我们定义了商品列表和每个商品的样式，购物车和购物车商品列表的样式，以及总价的样式。在 .product-list 中，我们使用 flex 布局来实现商品列表的对齐方式。每个商品使用了圆角边框、内边距、居中对齐以及拖动光标的样式。

在 .cart 中，我们将购物车和购物车商品列表的边框设置为了圆角边框，并且添加了一些内边距来使其更美观。购物车商品列表被设置为最大高度为 200px，并且超出部分使用滚动条来显示。总价文本的字号被增大并且加粗，突出显示。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .product-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}
.product {
  width: 30%;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  text-align: center;
  cursor: move;
}
.product img {
  max-width: 50%;
  height: auto;
  margin-bottom: 10px;
}
.cart {
  position: fixed;
  right: 20px;
  top: 50%;
  width: 320px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
  z-index: 100;
}
.cart h2 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}
.cart-items {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  max-height: 240px;
}
.cart-items li {
  border-bottom: 1px solid #ccc;
  margin-bottom: 12px;
  padding: 12px;
}
.cart-items img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  margin-right: 12px;
}
.cart-items h3 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
}
.cart-items p {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
  color: #999;
}
.total-price {
  margin-top: 16px;
  font-size: 20px;
  font-weight: bold;
  text-align: right;
}
</style>
<body>
  <ul class="product-list">
    <li class="product" draggable="true">
      <img src="https://img.yzcdn.cn/vant/apple-1.jpg" alt="Product 1">
      <h3>商品1</h3>
      <p>价格：$10</p>
    </li>
    <li class="product" draggable="true">
      <img src="https://img.yzcdn.cn/vant/apple-2.jpg" alt="Product 2">
      <h3>商品2</h3>
      <p>价格：$20</p>
    </li>
    <li class="product" draggable="true">
      <img src="https://img.yzcdn.cn/vant/apple-3.jpg" alt="Product 3">
      <h3>商品3</h3>
      <p>价格：$30</p>
    </li>
  </ul>
  
  <div class="cart" droppable="true">
    <h2>购物车</h2>
    <ul class="cart-items"></ul>
    <p>合计：<span class="total-price">$0</span></p>
  </div>
</body>

<script  src="./index.js"></script>
</html>

js代码
在 JavaScript 代码中，我们首先获取到三个商品和一个购物车的 DOM 元素，然后监听每个商品的 dragstart 事件，将被拖动的元素保存到数据传输对象中。接着，监听购物车的 dragover 和 drop 事件，在购物车放置拖动的元素时，将被拖动的商品加入购物车中，并更新总价。

在 updateTotalPrice 函数中，我们根据操作符 operator 来更新当前的总价。如果操作符为 add，则增加当前价格；如果操作符为 remove，则减少当前价格。

在 getPriceFromHtml 函数中，我们使用正则表达式从 HTML 数据中提取价格信息，并将它转换为数字类型。我们假设每个商品的价格信息都包含在一个 p 元素中，格式为 价格：$X，其中 X 表示价格数字。

var products = document.querySelectorAll('.product');
var cart = document.querySelector('.cart');
var cartItems = document.querySelector('.cart-items');
var totalPrice = document.querySelector('.total-price');
var currentPrice = 0;

// 监听每个商品的拖动事件
for (var i = 0; i < products.length; i++) {
  products[i].addEventListener('dragstart', function(event) {
    // 将被拖动的元素保存到数据传输对象中
    event.dataTransfer.setData('text/plain', event.target.outerHTML);
  });
}

// 监听购物车的放置事件
cart.addEventListener('dragover', function(event) {
  event.preventDefault(); // 阻止默认行为，否则无法放置物品
});

cart.addEventListener('drop', function(event) {
  event.preventDefault();
  var htmlData = event.dataTransfer.getData('text/plain');
  var item = document.createElement('li');
  item.innerHTML = htmlData;
  cartItems.appendChild(item);
  updateTotalPrice(htmlData, 'add');
});

// 更新总价
function updateTotalPrice(htmlData, operator) {
  var price = getPriceFromHtml(htmlData);
  if (operator === 'add') {
    currentPrice += price;
  } else if (operator === 'remove') {
    currentPrice -= price;
  }
  totalPrice.innerText = '$' + currentPrice;
}

// 从 HTML 数据中获取价格
function getPriceFromHtml(htmlData) {
  var regex = /<p>价格：\$(\d+)<\/p>/i;
  var match = htmlData.match(regex);
  return match ? parseInt(match[1]) : 0;
}

运行效果如下：
在这里插入图片描述

📝总结

这套面试题适用于前端开发初级的岗位，适合准备面试或者没有面试经验的同学进行练习和阅读，这套面试题涉及的内容也很多，包括了非常经典的前端三件套、Vue、数据结构、网络传输协议等等知识点。总体来说这套面试题不算很难、都是很基础的内容，但是也是非常重要的知识点和技术。其中也有经常出现在面试中的技术点、比如 Vue 生命周期、computed 和 watch 等等。如果这套题的可以做到9成以上的正确率，说明你的基础很扎实了，继续努力、加油。
在这里插入图片描述

🎯点赞收藏，防止迷路🔥 ✅感谢观看，下期再会📝 @CSDN | 黛琳ghz

黛琳ghz

关注

5
点赞
踩
22

收藏

觉得还不错? 一键收藏
打赏
6
评论
2023年某科技公司前端开发初级岗的面试笔试真题（含选择题答案、问答题解析、机试题源码）

这篇文章分享的真题是来自2023年某科技公司的笔试真题，面试的岗位是初级前端，题目内容包括了选择题、问答题、机试题，当然与面试官交谈的过程也是必不可少的一部分，主要还是针对简历的项目经验、工作经历来展开提问和交流，这里就不过多描述了。
复制链接

扫一扫