百度2020校招Web前端工程师笔试卷（第二批）

百度2020校招Web前端工程师笔试卷（第二批） 2024/12/17

1.FIFO为先进先出的次序来完成页面的访问，而如果在采用先进先出页面镌汰算法的系统中，一进程在内存占3块（开始为空），页面访问序列为1、2、3、4、1、2、5、1、2、3、4、5、6。运行时会产生（ 10  ）次缺页中断？

剖析

访问1，队列中没1，缺页一次，读入页面1；队列为1
访问2，队列中没2，缺页两次，读入页面2，队列为1,2；
访问3，队列中没3，缺页三次，读入页面3，队列为1,2,3；
访问4，队列中没4，缺页4次，读入页面4，队列为2,3,4；
访问1，队列中没1，缺页5次，读入页面1，队列为3,4,1；
访问2，队列中没2，缺页6次，读入页面2，队列为4,1,2；
访问5，队列中没5，缺页7次，读入页面5，队列为1,2,5；
访问1，不存在缺页，队列中为1,2,5；
访问2，不存在缺页，队列中为1,2,5；
访问3，队列中没3，缺页8次，读入页面3，队列中为2,5,3；
访问4，队列中没4，缺页9次，读入页面4，队列中为5,3,4；
访问5，不存在缺页，队列中为5,3,4；
访问6，队列中没6，缺页10次，队列中为3,4,6；
2.下列代码的执行结果 C

1. function sum(a, b) {
2.   return a + b;
3. }
4. sum(1, "2");

复制代码

A.NaN
B.TypeError
C."12"
D.3
剖析

+两边有一边是字符串，那这个+就是字符串毗连符，它会把其他数据类型调用String()方法转成字符串然后拼接；
3.下列代码的执行结果 0 2 2

1. let number = 0;
2. console.log(number++);
3. console.log(++number);
4. console.log(number);

复制代码

4.下列代码的执行结果   C

1. function fn(...args) {
2.   console.log(typeof args);
3. }
4. fn(21);

复制代码

A.number"
B."array"
C."object"
D.“NaN"
剖析

Rest 参数可以通过使用三个点...并在后面跟着包罗剩余参数的数组名称，来将它们包罗在函数界说中。args是一个数组，typeof的返回值中没有array，数组会被一并辨认为object。

5.下列代码的执行结果  jack undefined

1. function Fn1(name) {
2.  if(name){
3.   this.name = name;
4.  }
5. }
6. Fn1.prototype.name="jack"
7. let a = new Fn1();
8. console.log('a:', a.name);
10. function Fn2(name) {
11.  this.name = name;
12. }
13. Fn2.prototype.name="jack"
14. let b = new Fn2();
15. console.log('b:', b.name);

复制代码

剖析

• Fn1 构造函数:
  
  
  
  • 当你调用 new Fn1() 创建实例 a 时，没有传入参数，因此 name 参数为 undefined。
    
  • 由于 if (name) 的判断条件为 false（因为 name 是 undefined），因此 this.name 不会被赋值。
    
  • 访问 a.name 时，这并不会返回原型链上的值，而是实例本身的属性值。由于实例本身并没有界说 name 属性（因为 this.name 未被赋值），会向原型链查找。
    
  • 在 Fn1.prototype 上，name 被设置为 "jack"，所以最终 a.name 的值为"jack"。
    
  
  
• Fn2 构造函数:
  
  
  
  • 当你调用 new Fn2() 创建实例 b 时，同样没有提供参数，因此 name 参数为 undefined。
    
  • this.name = name; 被执行，因此 b.name 被设置为 undefined。
    
  • 在 Fn2.prototype 上，name 也是 "jack"，但实例 b 已经有一个本身的 name 属性，该属性的值是 undefined，所以访问 b.name 时返回的是 undefined，而不是原型链上的值。
    
  
  

 

6.下面代码大输出次序是 2 5 1 3 4

1. setTimeout(() => {
2. console.log(1)
3. }, 0)
5. const P = new Promise((resolve, reject) => {
6. console.log(2)
7. setTimeout(() => {
8. resolve()
9. console.log(3)
10. }, 0)
11. })
13. P.then(() => {
14. console.log(4)
15. })
16. console.log(5)

复制代码

剖析

• setTimeout(() => { console.log(1) }, 0)
  
  
  
  • 这个 setTimeout 会把一个回调函数放入任务队列，等待变乱循环处置惩罚。因为延迟为0ms，它会在当前执行栈清空后立刻执行，但实际在浏览器/Node.js处置惩罚时，仍旧是在主线程空闲后。
    
  
  
• const P = new Promise(...)
  
  
  
  • 创建一个新的 Promise 对象。
    
  • 这个 Promise 的执行函数（executor function）会立刻执行，因此会立刻打印 2。
    
  
  
• 内部门的 setTimeout(() => { resolve(); console.log(3); }, 0)
  
  
  
  • 这个 setTimeout 同样会把一个回调放入任务队列等候执行，在当前执行栈清空后执行。
    
  • 但它不会立刻执行，因为它处于 Promise 的 executor function 内部。因此在执行栈中的当前代码都执行完毕之后，才会处置惩罚这个任务。
    
  
  
• P.then(() => { console.log(4) })
  
  
  
  • 这里通过 then 注册了一个回调函数，这个回调函数会在 Promise 被办理（resolved）后执行。因为 resolve() 在下一个变乱循环中被调用（在上面的 setTimeout 中），所以 console.log(4) 同样是排入了变乱队列。
    
  
  
• console.log(5)
  
  
  
  • 这个语句会立刻执行，输出 5。
    
  
  

执行次序总结

到现在为止，立刻输出的次序为：

• 2（从 Promise executor 内部）
  
• 5（直接执行）
  

下一步，变乱循环会开始处置惩罚队列中的任务：

• 第一次变乱循环:
  
  
  
  • 执行第一个 setTimeout 中的回调：打印 1。
    
  
  
• 第二次变乱循环:
  
  
  
  • 处置惩罚 Promise 内部的 setTimeout 回调，首先执行 resolve()，然后执行在 then 中注册的回调，打印 4。
    
  • 同时打印 3 在 resolve() 之后，因为它位于 setTimeout 的回调内。
    
  
  

7.有a.js和b.js两个文件，请选择b文件中代码的输出  1 {} 1 {b:2}

1. // a.js
2. let a = 1
3. let b = {}
4. setTimeout(() => {    
5. a = 2    
6. b.b = 2
7. }, 100)
8. module.exports = { a, b }
10. // b.js
11. const a = require('./a')
12. console.log(a.a)
13. console.log(a.b)
14. setTimeout(() => {    
15. console.log(a.a)    
16. console.log(a.b)
17. }, 500)

复制代码

剖析

module.exports 将 a 和 b 导出，因此在其他模块中可以引用它们。必要留意的是，在导出时所引用的 a 和 b 是初始值，而不是后续更新后的值。
这里就是一个深浅拷贝的题目，这里a.js中的b变量存的是一个对象的地点，由于在100ms后改变了堆中的对象属性，所以在500ms时，对于b.js中的a.b来说会引用在100ms时改变的那个对象（浅拷贝）
说白了就是值不会变，对象会发生改变。
 
8.请选择下面代码输出1的次数  1次
 

1. var vm = new Vue({  
2.     el: '#example',  
3.     data: {    
4.         message: 'Hello'  
5.     },  
6.     computed: {    
7.         test: function () {      
8.             console.log(1)      
9.             return this.message    
10.         }  
11.     },  
12.     created: function (){    
13.         this.message = 'World'    
14.         for (var i = 0; i < 5; i++) {        
15.             console.log(this.test)    
16.         }  
17.     }
18. })

复制代码

剖析

因为vue的computed具有缓存功能。message只更新了一次，所以test只触发一次，执行一次console.log(1)。
详细来说，computed内的test函数会被加入到message这个相应式数据的依靠视图中，当修改了message（触发了message的set）之后，test这个computed的dirty属性会被设置为true，当视图渲染的时候，发现dirty为true了，就会执行1次test函数以获取最新的值。
9.以下哪行代码添加之后不会造成父容器高度塌陷 A

A.display: flex;
B.display:inline;
C.float:left;
D.position:fixed;
10.以下这种写法不规范，但是不会报错，其在浏览器中的表现形式是<p>1<p>2</p></p>。

<p>1</p><p>2</p><p></p>
11.下面样式在网页中打开大致是什么形状

1. .arrow {
2.   border-top: 10px solid #000;
3.   border-right: 10px solid transparent;
4.   display: inline-block;
5. }
6. <span class="arrow"></span>

复制代码

剖析

CSS绘制三角形—border法 - 简书
12.数字 `1` 和 `2` 被浏览器渲染出来的颜色分别是是？ red red

1 2 3 4 5 6 7 8 9 10 11 12

<html>   <head>     <style>       .classA { color: blue; }       .classB { color: red; }     </style>   </head>   <body>     <p class='classB classA'>1</p>     <p class='classA classB'>2</p>   </body> </html>

剖析

标签中使用多个class，不看这些class添加的次序，而是看style中界说的次序。
13.当网站对<script>标签举行过滤时，可以通过哪种方式举行绕过且有用攻击 C

A.<scrscriptipt>alert(1)<script>
B.<script>alert(1)<scrscriptipt>
C.<img src="" οnerrοr=alert(1)>
D.<scrscriptipt>alert(1)<scrscriptipt>
14.一个小根堆的序列为:{5, 12, 7, 18, 31, 13, 9}，删除根节点5之后，小根堆会自动调整重新变为小根堆，小根堆的最后的叶子节点为? 13

15.关于HTTP2形貌准确的是 ABC

A.采用文本格式创术数据
B.新增了多路复用
C.采用Header压缩
D.新增了毗连的keep-alive功能
16.修改/home下test目录以及目录下所有文件，可以支持所有人可读可写的，以下能实现的有? AB

A.chmod 777 /home/test -R
B.chmod 666 /home/test -R
C.chmod 766 /home/test
D.chmod 765 /home/test -R
剖析

要求三个数字都>=6 -R表示实用于目录以及目录下所有文件。
17.下列选项中，大概导致当前linux进程阻塞? AC

A.进程申请临界资源
B.该进程使用时间过长，进程调理程序让其他进程使用CPU
C.进程从磁盘读数据
D.时间片用完了
18.最小值

牛牛给度度熊出了一个数学题，牛牛给定命字