| 2023年深圳某互联网公司前端开发初级岗笔试真题（含解析和源码） | 您所在的位置：网站首页 › 选中正文不含图表独立成行的公式 › 2023年深圳某互联网公司前端开发初级岗笔试真题（含解析和源码） |
2023年深圳某互联网公司前端开发初级岗笔试真题（含解析和源码）
|
📚关于该专栏: 该专栏的发布内容是前端面试中笔试部分真题、答卷类、机试等等的题目，题目类型包括逻辑题、算法题、选择题、问答题等等，除了内容的分享，还有解析和答案。真实来自某些互联网公司，坐标广东广州、深圳。 🔥🔥🔥 持 续 更 新 🔥🔥🔥 😉专栏博主: 黛琳ghz，万粉博主，计算机软件专业博主，CSDN 实力新星、CSDN 全栈领域新星创作者、CSDN 前端领域优质创作者、2022年度博客之星前端领域TOP 8、2022年度博客之星TOP 95、华为云社区云享专家、阿里云社区专家博主、CSDN 第四届猿创征文优质博文奖（分数85第一）、以及多项优秀TOP 博文，欢迎你的关注与访问、可私信交流学习、问答等等。
文章目录
📋前言📑题目总览与分析🎯题目一💻代码和解析
🎯题目二💻代码和解析
🎯题目三💻代码和解析
🎯题目四💻代码和解析
🎯题目五💻代码和解析
🎯题目六💻代码和解析
📝最后
这篇文章来自一个全新的专栏，同时也是这个专栏的第一篇文章，该专栏的发布内容是前端面试中笔试部分真题、答卷类、机试等等的题目，题目类型包括逻辑题、算法题、选择题、问答题等等，除了内容的分享，还有解析和答案。真实来自某些互联网公司，坐标广东广州、深圳。 这篇文章分享的真题是来自2023年某科技公司的笔试真题，面试的岗位的范围是初级前端，题目内容包括了布局样式题、逻辑题、字符串题，根据题目的要求和提供的代码，补全功能。 📑题目总览与分析首先这份笔试题一共有 六道题目 ，而且有一个笔试题选题规则，具体规则如下图（顺应这份题目的规则的同时，这篇文章也会对全部题目进行解析和通过源码）。接下来我们来看看有哪些题目类型。 一、输出一个菱形 请补充一个renderDiamond方法的实现，根据入参的一个奇数n，在控制台打印出一个由 * 填充而成的菱形，横向最长的填充为n个 * ； 例如输入 5 ，输出的结果为 * *** ***** *** *例如输入 7 ，输出的结果为 * *** ***** ******* ***** *** * 💻代码和解析 Document const n =prompt("Please enter an odd number:") function renderDiamond(n) { // 当输入的数字不为奇数或小于1时，输出错误信息 if (n % 2 === 0 || n let row = ""; // 计算当前行需要填充的空格数和星号数 let spaceNum = (n - i) / 2; let starNum = i; // 生成当前行 for (let j = 0; j row += "*"; } console.log(row); } // 输出下半部分菱形 for (let i = n - 2; i >= 1; i -= 2) { let row = ""; // 计算当前行需要填充的空格数和星号数 let spaceNum = (n - i) / 2; let starNum = i; // 生成当前行 for (let j = 0; j row += "*"; } console.log(row); } } renderDiamond(n)运行在 html 文件中的 script 标签，方便调试和运行（第四、六题也是如此），该方法首先会检查输入的数字是否为正奇数，如果不满足条件则输出错误信息。然后，该方法会分别输出菱形的上半部分和下半部分。对于每一行，会先计算需要填充的空格数和星号数，然后按照一定的格式生成当前行并输出到控制台。运行效果如下。 二、请通过HTML+CSS 实现以下页面的布局和大致样式 效果图如下。 这题没啥难度，很基础的样式布局题，有点搬砖的感觉。首先题目中的箭头没用用字符图标，升降是直接用符号来表示，右箭头是用 html 和 css 写的。然后是数据，知道是那个意思就行了，所以复制粘贴了第一条数据填充全部页面。 页面中包含一个股票列表的容器（class=“stock-container”），以及每个股票的行数据（class=“stock-row”）。整个页面的 CSS 样式比较简洁，使用了 flex 布局。页面中的表头（class=“stock-heading”），显示着股票名称、价格涨跌、占比和占比较上期。在股票价格中涨跌的情况下，会显示相应的红色或绿色字体以及对应的箭头图标（class=“stock-arrow-up”、class=“stock-arrow-down”）。 每个股票行数据中包含左侧列（class=“left-col”），显示着股票名称（class=“stock-name”）和股票描述（class=“stock-desc”）；中间列（class=“middle-col”），显示着股票价格（class=“stock-price”）和占比（class=“stock-percentage”）；右侧列分两个部分（class=“right-col”），第一个部分显示着占比（class=“stock-price-number”），第二个部分是一个箭头图标（class=“stock-arrow-next”）。运行效果如下。 这个箭头图标的绘制通过伪元素（::after）实现，该伪元素使用了border进行绘制。其样式选项包括：设置内联块级元素（display: inline-block;）、内容为空格（content: " ";）、高度和宽度分别为10px（height: 10px; width: 10px;）、三个边框宽度设置为2px、0、0和2px（border-width: 2px 2px 0 0;）、边框颜色设置为#999（border-color: #999;）、边框样式设置为实线（border-style: solid;）、旋转45度（transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);）以及绝对定位（position: absolute;）和左边距为10px（left: 10px;）以调整位置。 🎯题目三三、实现一下悬浮弹窗的布局和样式 效果图如下。 这题也是没啥难度，很基础的样式布局题，不搬砖，很快就能完成。首先要设置好布局，这个弹窗分为上中下三个部分，其中每个部分里面的内容使用 flex 布局来完成，其中让弹窗固定在页面的居中位置使用了 fixed 定位来完成。 .modal 是整个弹窗的容器，固定了宽度、位置和样式。.modal-header 是弹窗的头部，包含了标题和关闭图标。.modal-title 是标题部分的样式，包括了字体大小、内边距等。.close 是关闭按钮的样式，固定了大小、颜色和内边距，并添加了光标指针的样式。.modal-body 是弹窗的主体部分，包括了文本内容。.modal-footer 是弹窗的底部部分，包括了两个按钮分别是.btn-close 关闭按钮和.btn-save 保存按钮。运行效果如下。 四、实现一个方法查找字符串中出现最多的字符和个数。 例：abbcccddddd => 字符最多的是d，出现了5次。请实现以下方法： function getLongestStrNum (date){ //请在这里编码 } 💻代码和解析 DOCTYPE html> Document const str = prompt("Please enter a string:") function getLongestStrNum(str) { if (typeof str !== "string") { console.error("Please enter a correct string!"); return; } let maxChar = ""; let maxCount = 0; let charMap = {}; // 统计每个字符出现的次数 for (let i = 0; i charMap[char]++; } else { charMap[char] = 1; } } // 找到出现次数最多的字符 for (let char in charMap) { if (charMap[char] > maxCount) { maxChar = char; maxCount = charMap[char]; } } console.log(`字符最多的是${maxChar}，出现了${maxCount}次`); } getLongestStrNum(str)该方法首先会判断输入的内容是否为字符串，然后遍历字符串，统计每个字符出现的次数，并将结果存储在一个对象 charMap 中。接着，从 charMap 中找到出现次数最多的字符和对应的出现次数，最后输出结果。运行效果如下。 五、实现一个方法把日期转换成特定格式的字符串 例如：date2Str(new Date()) 输出 Y/M/d/h/m/s/ms 格式的字符串，即执行date2Str 输出的结果是 2023/5/17/0/39/15 。请实现以下方法： function date2Str (date){ //请在这里编码 } 💻代码和解析 DOCTYPE html> Document const date = new Date() function date2Str(date) { let year = date.getFullYear(); let month = date.getMonth() + 1; let day = date.getDate(); let hour = date.getHours(); let minute = date.getMinutes(); let second = date.getSeconds(); let millisecond = date.getMilliseconds(); console.log("转换前："+new Date()); console.log("转换后："+year + "/" + month + "/" + day + "/" + hour + "/" + minute + "/" + second + "/" + millisecond); } date2Str(date)该方法首先从传入的日期对象中获取年、月、日、小时、分钟、秒以及毫秒等数据，然后将它们拼接成 Y/M/d/h/m/s/ms 格式的字符串，并返回该字符串。 需要注意的是，该方法返回的月份从1开始编号，因此在获取月份时必须加上1。此外，毫秒数有可能非常小，因此最好使用字符串连接符将所有字段连接起来，而不是使用加号。运行效果如下。 六、写一个简单的计数函数，执行第 1 次打印 1 ，执行第 2 次打印 2 ，执行第 N 次打印 N 例如： fn();//1 fn();//2 fn();//3 . . . fn();//n请实现这个这个计数函数： function fn(){ //请在这里编码 } 💻代码和解析 DOCTYPE html> Document function fn() { let count = 0; return function () { count++; console.log(count); }; } let counter = fn(); counter(); // 输出 1 counter(); // 输出 2 counter(); // 输出 3这题我们可以使用闭包函数来解决，该函数返回了一个新的函数，每次调用该新函数，都会将计数器（count 变量）的值加1，并将其打印到控制台中。由于该计数器定义在 fn() 函数的作用域内，并且返回的新函数可以访问该作用域，因此在多次调用该新函数时，计数器的值会持续增加。
这套面试题适用于前端开发初级的岗位，适合准备面试或者没有面试经验的同学进行练习和阅读，这套面试题涉及的内容非常基础，难度不大，但是涉及到的初级内容还是很丰富的。比如说逻辑题涉及到的简单算法、字符串的运用、时间对象、闭包函数等等，样式布局题涉及到绝对定位、相对定位、fixed 定位、flex 布局等等内容。 而且这套题的规则是选做的方式，不用六题全部做完，因此就需要考核面试的同学的做题速度了，基础好不好通过这套题就能看出来了。如果这套题的可以在规定的时间内完成并且效果都大致实现了，说明你的基础很扎实了、思维逻辑能力很强了，继续努力、加油。 |
通过目录我们可以大致了解题目类型，分别是非常非常基础的输出内容题（必选题）（学C语言、Java都应该做过这题吧）、样式布局两题二选一、最后是逻辑题三选二（涉及到了字符串的运用和 JavaScript 内置函数、对象的使用）。接下来按照顺序来解决这六道题目吧。
下面还有一个更加简短的方法，该方法的思路与上面的方法类似，但是使用了字符串的 padStart 方法来填充空格。对于每一行，可以直接使用字符串的 repeat 方法生成一行星号，然后使用 padStart 方法在其左侧填充指定数量的空格来实现居中对齐。代码如下。（关于 padStart 方法和 repeat 方法等等 ES6 新增的字符串方法也会在之后的博客中介绍到，留意更新内容）
最后这题说一下如何用 html 和 css 来制作一个箭头，以本题的这个箭头为例子，下面是具体的代码实现。
【本文地址】
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |