百度2021校招Web前端研发工程师笔试卷（第一批）2024/12/18
1.某主机的 IP 地址为 212.212.77.55，子网掩码为 255.255.252.0。若该主机向其所在子网发送广播分组，则目的地址可以是？ 212.212.79.255
2.小牛在学习了二叉树三种遍历方式后，自己发明了一直与中序遍历相反的遍历方式，称为"反中序遍历"，中序遍历的遍历方式为左孩子->根节点->右孩子，他发明的"反中序遍历"遍历方式为右孩子->根节点->左孩子，那么使用他发明的"反中序遍历"遍历如下图的二叉树，输出的节点应为? 3，1，7，5，6，2，4
3.下列程序的运行结果是什么？ ["", " is ", " years old"] "Lydia" 21
javascript
function getPersonInfo (one, two, three) {
console.log(one)
console.log(two)
console.log(three)
}
const person = 'Lydia'
const age = 21
getPersonInfo `${person} is ${age} years old`解析
标签模板其实不是模板，而是函数调用的一种特殊形式。"标签"指的就是函数，紧跟在后面的模板字符串就是它的参数。
但是，如果模板字符里面有变量，就不是简单的调用了，而是会将模板字符串先处理成多个参数，再调用函数。
let a = 5; let b = 10;
tag `Hello ${ a + b } world ${ a * b }`;
// 等同于 tag(['Hello ', ' world ', ''], 15, 50); 上面代码中，模板字符串前面有一个标识名tag，它是一个函数。整个表达式的返回值，就是tag函数处理模板字符串后的返回值。
函数tag依次会接收到多个参数。
function tag(stringArr, value1, value2){ // ... } tag函数的第一个参数是一个数组 ，该数组的成员是模板字符串中那些没有变量替换的部分，也就是说，变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间，以此类推。
tag函数的其他参数，都是模板字符串各个变量被替换后的值。由于本例中，模板字符串含有两个变量，因此tag会接受到value1和value2两个参数。
4.若数据元素序列 9，10，11，5，6，7，12，3，4是采用下列排序方法之一得到的 第二趟升序排序后的结果，则该排序算法只能是?B
A.冒泡排序
B.插入排序
C.选择排序
D.二路归并排序
5.下列程序的运行结果是什么？ 2
javascript
function addToList(item, list) {
return list.push(item)
}
const result = addToList("nowcoder", ["hello"])
console.log(result)解析
list.push()返回的值是添加元素后list的长度。
6.关于将 Promise.all 和 Promise.race 传入空数组的两段代码的输出结果说法正确的是： all 会被输出，而 race 不会被输出
javascript
Promise.all([]).then((res) => {
console.log('all');
});
Promise.race([]).then((res) => {
console.log('race');
});解析
Promise.all([ ])中，数组为空数组，则立即决议为成功执行resolve( )；
Promise.race([ ])中数组为空数组，就不会执行，永远挂起7.对于一个数字组成的数组 nums，现在需要执行在不改动 nums 的基础上去重操作，返回一个新的无重复元素的数组，以下几段代码能完成这一操作的是（
(1)、（2）、（4））
javascript
（1）
const newNums = Array.from(new Set(nums))
(2)
const newNums = nums.filter((n, i) => {
return nums.indexOf(n) === i
})
(3)
const newNums = nums.forEach((n, i) => {
return nums.indexOf(n) === i
})
(4)
const newNums = nums.reduce((acc, n, i) => {
return [].concat(acc, nums.indexOf(n) === i ? n : []
)
})解析
filter返回一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。
forEach无返回值。返回的是undefined。
8.以下使用 typeof 操作符的代码的输出结果为（String）
javascript
var x = typeof x
var res = typeof typeof x;
console.log(res)解析
由于x前面没有定义值，所以typeof x得到的是undefined字符串。总之typeof的返回值一定是字符串。
9.内存泄漏是 javascript 代码中必须尽量避免的，以下几段代码可能会引起内存泄漏的有（(1)、（2））
javascript
(1)
function getName() {
name = 'javascript'
}
getName()
(2)
const elements = {
button: document.getElementById('button')
};
function removeButton() {
document.body.removeChild(elements.button);
}
removeButton()
(3)
let timer = setInterval(() => {
const node = document.querySelector('#node')
if(node) {
clearInterval(timer)
}
}, 1000);解析
JavaScript内存泄露的4种方式及如何避免_js防止内存修-CSDN博客
第一段代码 name 没有使用 var、let、const，name 变成了意外的全局变量，可能引起内存泄漏；第二段代码，button 元素被 elements 对象引用，removeChild 后并不能被 GC 回收，会造成内存泄漏；第三段代码及时清除定时器，避免了内存泄漏，
10.利用 sourcemap 定位线上 js 问题是必须掌握的技能，以下关于 sourcemap 文件说法不正确的是（C）
A.利用 sourcemap 可以定位到具体的出错代码文件的行、列信息
B.sourcemap 文件通过记录列号的相对位置来提高性能
C.在 chrome 渲染过程中，请求完 js 文件后会立即尝试请求对应的 sourcemap 文件并解析
D.sourcemap 文件使用了 VLQ 编码做映射表
解析
浏览器是在用户开发开发者浏览器后才会尝试请求 sourcemap 文件并解析的，普通情况并不会请求 sourcemap 文件
11.身在乙方的小明去甲方对一网站做渗透测试，甲方客户告诉小明，目标站点由wordpress搭建，请问下面操作最为合适的是B
A.访问robots.txt，查看站点结构及敏感目录
B.使用wpscan对网站进行扫描
C.使用appscan或awvs对网站进行漏洞扫描
D.寻找网站后台，进行暴力破解登录账号密码
解析
已经知道目标站点为wordpress搭建，没必要再去看robots.txt。
wpscan为wordpress站点专用扫描工具，可扫描wordpress版本、插件及漏洞、用户名泄露、暴力破解接口等。
appscan等web漏洞扫描工具很难扫到wordpress站点漏洞，直接找后台进行暴力破解账号密码效率不高。故B相对于CD，最为合适
12.如何仅获得下述值为3的DOM节点引用(不包含其他元素) D
A .aaa > li
B .bbb ~ li
C .ccc ~ li
D .ccc + li
解析
A，>为后代选择符，即包含.aaa的所有后代
B，~为一般同辈选择符，即匹配.bbb后面所有兄弟(同级)元素，此处的值为三个元素的数组
C，此处的值为两个元素的数组
D，+为相邻同辈选择符，即匹配.bbb后面的第一个兄弟(同级)元素，此处的值为<li>3</li>
13.下面哪个选项不能实现除第一个<li>标签外的<li>标签字体都为红色，即如下注释效果 C
html
<ul class="word">
<li class="text">1</li> //字体为黑色
<li class="text">2</li> //字体为红色
<li class="text">3</li> //字体为红色
</ul>A.text ~ .text {
color: red;
}
B.word:not(:first-child) {
color: red;
}
C.text:nth-last-child(2){
color: red;
}
D.text + .text {
color: red;
}
解析
A，~为一般同辈选择符，可匹配第一个.text后所有.text
B，:not(:first-child) 可匹配除第一个外的所有元素
C，:nth-last-child(2)仅匹配倒数第二个元素，即仅值为2的标签为红色
D，+为相邻同辈选择符，匹配每一个.text后的相邻.text
14.关于html的canvas的绘制、缩放，下列说法正确的是？ A
A.图像绘制在canvas元素之外也可见
B.使用 drawImage方法绘制的图片可以用css3的tramsform:scale的属性实现缩放
C.默认情况下，canvas是一个可以获取焦点的元素
D.其他3个选项都不正确
解析
图像既可以绘制在canvas里，又开始绘制在canvas之外
canvas的缩放需要通过context的scale()、transform方法。
canvas不可获取焦点，所以不能在canvas元素上新增键盘事件监听器。
15.下面这段代码在浏览器中渲染出来的div高度是多少 500px
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.heightTest {
height: 1000px;
min-height: 500px;
max-height: 300px;
}
</style>
</head>
<body>
<div class="heightTest"></div>
</body>
</html>解析
1、max-height和height一起使用时，取小值。
2、min-height和height一起使用时，取大值。
3、min-height、height和max-height一起使用时：
当min值最小，谁在中间用谁，其余都是用min值。
16.假设tempStr字符串长度为N(N足够大)，试分析以下算法平均时间复杂度和额外空间复杂度(传进来的tempStr不算额外的空间)最接近为多少? O(N)，O(1)
java
private boolean isPalindrome(String tempStr){
int len=tempStr.length();
if (len==1) return true;
for (int i=0,j=len-1;i<tempStr.length()/2;i++,j--){
if (tempStr.charAt(i)!=tempStr.charAt(j)){
return false;
}
}
return true;
}17.下面可以按照从小到大顺序排列显示磁盘中各个分区利用率的命令是 C
A.du | grep -o "\<[0-9]*%.*" -o | sort -n
B.df | grep -o "\<[0-9]*%.*" -o | sort -r
C.df | grep -o "\<[0-9]*%.*" -o | sort -n
D.du | grep -o "\<[0-9]*%.*" -o | sort -m
解析
首先du命令用于显示目录或文件的大小，df用于显示分区的使用情况
sort命令中：
-n 依照数值的大小排序
-m 将几个排序好的文件进行合并
-r 以相反的顺序来排序 即降序
18.生产者与消费者模型是一个非常经典的同步与互斥问题，如下伪码实现了简单的消费者的功能(生产者的功能是往队列里面添加元素，消费者的功能是从队列里面取元素)
isEmpty()， m_notEmpty.wait()， m_notFull.notify()
php
void consumption() {
while(____){
____;
}
P(mutex);
往队列里面取一个元素;
V(mutex);
------------------------;
}里面的P,V就是指PV操作，mutex是互斥信号量；现有如下方法：
isFull() : 表示队列元素满了
isEmpty(): 表示队列元素为空
m_notFull.wait(): 阻塞当前进程，直到队列元素不满
m_notFull.notify(): 队列元素不满了，唤醒某个进程
m_notEmpty.wait()：阻塞当前进程，直到队列元素不为空
m_notEmpty.notify():队列元素不为空了，唤醒某个进程
19.关于网络请求延迟增大的问题，以下哪些描述是正确的(BCD)
A.使用ping来测试 TCP 端口是不是可以正常连接
B.使用tcpdump 抓包分析网络请求
C.使用strace观察进程的网络系统调用
D.使用Wireshark分析网络报文的收发情况
解析
ping是基于ICMP协议不能测试TCP。 ping是网络层的，TCP是传输层的。
20.对于以下代码分析，以下选项最接近上面程序的时间复杂度是？
cpp
int test(int N)
{
int i = 0;
int cnt = 0;
while (cnt<N)
{
i = i + 2;
cnt = cnt + i;
}
return i;
}21.编程题-优质奶牛
牛牛管理这一片牧场，在这片牧场中，一共有 𝑛 头奶牛，为方便统计，它们排成了一排，编号为 1 ~ 𝑛。
现在质检员牛妹在检测这些奶牛的质量，她列出了 𝑚 条特性，只有满足所有特性的奶牛才可称之为优质奶牛。
但是，牛牛现在只知道对于某条特性，某几段连续区间内的奶牛是满足条件的，如果这样依次排查，会浪费很多时间。由于牛妹时间很急，马上要赶往下一个牧场，所以，牛牛请你帮助他筛选优质奶牛。
cpp
#include <bits/stdc++.h>
using namespace std;
/*
思路
首先确定m个不同类型的区间，求同时满足这m个不同类型的区间重叠的区间
不放假设1-m分别为这m个类型区间的标记，那么只需要输出最后和为m个区间累加的值
注意一点就是对于每个标记的区间 首先要先进行简单的排序按照起点升序，终点升序，避免重复标记
*/
int T,n,m,k,l,r;
int main() {
cin>>T;
while(T--){
cin>>n>>m;
vector<int> a(n+1,0);
for(int i=1;i<=m;i++){
cin>>k;
vector<pair<int,int>> area; //记录区间
for(int j=0;j<k;j++){
cin>>l>>r;
area.push_back({l,r});
}
//排序
sort(area.begin(),area.end());
//边进行合并边标记
int start=1,ed=0; //标记当前最右和最左端点
for(int j=0;j<k;j++){
if(area[j].first>ed){
//说明当前区间与前面不重叠 那么将前面标记区间都增加
for(int p=start;p<=ed;p++) a[p]+=i;
//更新起点和终点
start=area[j].first;
ed=area[j].second;
}else {
//说明有重叠部分 那么合并一下
ed=max(ed,area[j].second);
}
if(j==k-1){
//说明是最后一段了 不管那种情况都需要计算最后一段区间
for(int p=start;p<=ed;p++) a[p]+=i;
}
}
// for(int j=1;j<=n;j++) cout<<a[j]<<" ";
// cout<<endl;
}
//检查哪些是满足和为(1+m)*m/2的
int sum=(1+m)*m/2,cnt=0;;
vector<int> ans;
for(int i=1;i<=n;i++){
if(a[i]==sum) {
cnt++;
ans.push_back(i);
}
}
cout<<cnt<<endl;
for(int i=0;i<ans.size();i++) cout<<ans[i]<<" ";
cout<<endl;
}
return 0;
}22.HTML题-分页
本题展示了一个分页组件，界面中存在id=jsContainer的节点A，系统会随机实例化各种Pagination实例，请按照如下要求补充完成Pagination函数。
1、最多连续显示5页，居中高亮显示current页（如demo1所示)
2、total <= 1 时，隐藏该组件（如demo2所示）
3、如果total<=5，则显示全部页数，隐藏"首页"和"末页"元素（如demo3所示）
4、当current居中不足5页，向后(前)补足5页，隐藏"首页"("末页")元素(如demo4和demo5所示)
5、total、current均为正整数，1 <= current <= total
6、当前界面中，节点A为系统执行 new Pagination(节点A，20, 10) 后的展示效果
7、请不要手动修改html和css
8、不要使用第三方插件
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.demo{
margin-bottom: 20px;
border: 1px solid #ebedf0;
border-radius: 2px;
padding: 10px;
}
.demo div{
margin-bottom: 10px;
font-size: 14px;
}
.pagination{
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 14px;
line-height: 1.5;
list-style: none;
display: inline-block;
}
.pagination.hide{
display: none;
}
.pagination li{
position: relative;
display: inline-block;
float: left;
height: 32px;
margin: 0;
padding: 0 15px;
line-height: 30px;
background: #fff;
border: 1px solid #d9d9d9;
border-top-width: 1.02px;
border-left: 0;
cursor: pointer;
transition: color 0.3s, border-color 0.3s;
}
.pagination li:first-child{
border-left: 1px solid #d9d9d9;
border-radius: 4px 0 0 4px;
}
.pagination li:last-child{
border-radius: 0 4px 4px 0;
}
.pagination li:first-child{
box-shadow: none !important;
}
.pagination li.current{
border-color: #1890ff;
color: #1890ff;
border-left: 1px solid #1890ff;
}
.pagination li.current:not(:first-child) {
margin-left: -1px;
}
</style>
</head>
<body>
<div>
<div id="jsContainer">
<ul class="pagination">
<li>首页</li>
<li>8</li>
<li>9</li>
<li class="current">10</li>
<li>11</li>
<li>12</li>
<li>末页</li>
</ul>
</div>
<div class="demo">
<div>(Demo1) total: 10，current: 4</div>
<ul class="pagination">
<li>首页</li>
<li>2</li>
<li>3</li>
<li class="current">4</li>
<li>5</li>
<li>6</li>
<li>末页</li>
</ul>
</div>
<div class="demo">
<div>(Demo2) total: 0，current: 0</div>
<ul class="pagination hide"></ul>
</div>
<div class="demo">
<div>(Demo3) total: 3，current: 2</div>
<ul class="pagination">
<li>1</li>
<li class="current">2</li>
<li>3</li>
</ul>
</div>
<div class="demo">
<div>(Demo4) total: 10，current: 2</div>
<ul class="pagination">
<li>1</li>
<li class="current">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>末页</li>
</ul>
</div>
<div class="demo">
<div>(Demo5) total: 10，current: 9</div>
<ul class="pagination">
<li>首页</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li class="current">9</li>
<li>10</li>
</ul>
</div>
</div>
<script type="text/javascript">
function Pagination(container, total, current) {
this.total = total; //总页数
this.current = current; //当前页数
this.html = html;
this.val = val;
this.el = document.querySelector('.pagination'); //TODO: 创建分页组件根节点
if (!this.el) return;
this.el.innerHTML = this.html();
container.appendChild(this.el);
//total <= 1 时，隐藏该组件
if (total == 0) this.el.className = 'pagination hide'; //TODO: 判断是否需要隐藏当前元素
function html() {
if (this.total <= 1) return '';
const lisArr = [];
let start;
let end;
// start和end的三种情况
if (this.current - 2 >= 1 && this.current + 2 <= this.total) {
// 1.正好current在中间
start = this.current - 2;
end = this.current + 2;
} else if (this.current - 2 < 1) {
// 2. start不满足要求啊，太小了，截断，同时考虑total很小的情况
start = 1;
end = Math.min(this.total, 5);
} else if (this.current + 2 > this.total) {
// 2.end不满足要求，同时totol可能很小
end = this.total;
start = Math.max(this.total - 4, 1);
}
// 到底渲染多少的li，是由start和end来决定的
for (let i = start; i <= end; i++) {
lisArr.push(`<li>${i}</li>`);
}
// 给current添加类名
lisArr[this.current - start] = lisArr[this.current - start].replace('<li>', '<li class="current">')
// 判断是否要显示首页和末页
if (start > 1) lisArr.unshift('<li>首页</li>');
if (end < this.total) lisArr.push('<li>末页</li>');
return lisArr.join('');
}
function val(current) {
if (arguments.length === 0) return this.current;
if (current < 1 || current > this.total || current === this.current) return;
this.current = current;
this.el.innerHTML = this.html();
};
}
</script>
</body>
</html>