前端笔试题总结，带答案和解析（二）

前端笔试题总结，带答案和解析（二）

这个系列将持续更新前端笔试题一期十题，每五题做一个标题（方便跳转），您可以一期一期阅读，也可以在点击汇总，一口气看完，如果对题目有不理解的地方，欢迎大家在评论区提问，如果有更好的意见也欢迎大家留言！！！

🎉往期回顾：

🍧汇总（持续更新）

🎶前端笔试题总结，带答案和解析（一）

✨前端笔试题总结，带答案和解析（二）

❤️前端笔试题总结，带答案和解析（三）

11.以下代码的执行后，str 的值是：

var str = "Hellllo world";
str = str.replace(/(a)\1/g, '$1');
1
2

答案：Hello world
解析： 对于正则表达式 /(a)\1/g，其中(a)是第一个分组，\1指向第一个分组，即\1重复了第一个分组的内容，所以该正则表达式等价于/(aa)/g
对于str.replace(a,b) 用第二个参数b替换掉第一个参数a,这里‘$1’也是指向第一个分组（a）， 也就是使用 'a 去替换掉 ‘aa’

---

12. 以下符合 ES6 写法的有：（）

    A class Foo { constructor() {return Object.create(null);} } Foo()
    B var m=1; export m;
    C export var firstName=’Michael’;
    D 在A模块中export{readFile}后，在B模块中import readFile from ‘A’可以获取到readFile

答案：C
解析：
A:类必须使用new调用，否则会报错。这是它跟普通构造函数的一个主要区别，后者不用new也可以执行。
B:export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。
// 报错
export 1;
// 报错
var m = 1;
export m;
上面两种写法都会报错，因为没有提供对外的接口。第一种写法直接输出 1，第二种写法通过变量m，还是直接输出 1。1只是一个值，不是接口。正确的写法是下面这样。
// 写法一
export var m = 1;
// 写法二
var m = 1;
export {m};
// 写法三
var n = 1;
export {n as m};

D:A模块对外暴露了一个对象，引入的时候需要使用解构赋值

import {readFile} from ‘A’

来源：牛客网

---

13.请给出下面这段代码的运行结果（ ）

var bb = 1;
function aa(bb) {
    bb = 2;
    alert(bb);
};
aa(bb);
alert(bb);
1
2
3
4
5
6
7

答案：1 2
解析：这道题考察是局部变量和参数传递的问题。 function aa(bb) { bb = 2; alert(bb); }; 在aa函数中，bb是以传值的方式传入的，在函数中，会重新定义一个bb变量，并将其值覆为2，并不影响函数体外的bb变量，所以其值仍然为1.

---

14.请问以下JS代码最后输出的len值是多少？

var len = 117;
let func = {
  len: 935,
  showLen: function() {
    console.log(this.len);
  },
  show: function() {
    (function(cb) {
      cb();
    })(this.showLen)
  }
}
func.show();
1
2
3
4
5
6
7
8
9
10
11
12
13

答案：117
解析：立即执行函数的this指向是window（非严格模式下），因为作为一个匿名函数，在被调用的时候，我们往往就是直接调用，因此它的this是非常确定的，那么len就取window下的len值了即117。

---

15. 以上 JavaScript 代码，在浏览器中运行的结果是

var foo = {n:1};
(function(foo){
    console.log(foo.n);
    foo.n = 3;
    var foo = {n:2};
    console.log(foo.n);
})(foo);
console.log(foo.n);
1
2
3
4
5
6
7
8

答案：1 2 3
解析：第一步：进行预编译，var全局变量foo、匿名函数 function、var局部变量foo 第二步：代码自上而下、自左向右执行计算： 对全局变量foo进行赋值foo={n:1}；注意：此值为对象，属于引用类型； 匿名函数传入参数foo={n:1}自执行； console.log(foo);打出数字1； 由于存在foo局部变量，那么对foo变量进行赋值foo={n:3}，同时更改了引用类型的参数值，全局foo变量被重新赋值foo={n:3}； 对局部变量foo进行重新赋值foo={n:2}; console.log(foo);打出数字2； 全局变量foo={n:3},因此，console.log(foo);打出数字3；

15题的升级版，断点调试一步步看原因

---

16.页面有一个按钮button id为button1，通过原生的js如何禁用？（）

A document.getElementById(“button1”).setAttribute(“Readolny”,true);
B document.getElementById(“button1”).setAttribute(“disabled”,”true”);
C document.getElementById(“button1”).Readonly=true;
D document.getElementById(“button1”).disabled=true;
答案：B D
解析： 上面是一段按钮的html代码 如果要用原生的js来禁用这个按钮 可以用这样： document.getElementByIdx_x_x(“btnShow”).disabled=true;（这样就把按钮禁用了） 如果要重新开启按钮，则可以让disabled=false;即可 那么在jquery下面要如何设置呢？其实也很简单 利用jquery的attr的方法即可 $(“#btnShow”).attr({“disabled”:“disabled”}); 如要让按钮恢复可用，可以采用removeAttr方法把disabled属性删除即可。 $(“#btnShow”).removeAttr(“disabled”);

---

17.以下哪些操作会触发Reflow：

var obj = document.getElementById(“test”);
1

A alert(obj.className)
B alert(obj.offsetHeight)
C obj.style.height = “100px”
D obj.style.color = “red”

答案：B C
解析：Reflow是重排 重排的本质是影响了布局树，页面的渲染就需要从布局开始走接下来的五步 [不知道重绘的可以参考这篇文章] (https://juejin.cn/post/7240333779221987384#heading-27)
A 只是读取类名不会影响布局树 不会触发reflow
B 因为offset和scroll其实都是“相对”来计算的。有其他元素做参照物，所以会回流一次，确保准确。
C 改变元素的高 会影响布局树 所以需要reflow
D 改变元素的元素 不影响布局树 需要repaint 重绘 repaint 的本质就是重新根据分层信息计算了绘制指令。当某些元素的外观被改变，就需要重新计算。计算样式和绘制阶段之后的阶段都要重新过一遍。

---

18.代码var foo = “10”+3-“1”;console.log(foo);执行后，foo的值为( )

A “102”
B 102
C 12
D “12”

答案：B 102
解析：对于“+”来说，有两个含义：第一个含义是做字符串拼接，第二个含义是加减法中的加法。

  1，如果操作数里有一个是字符串，其他的值将被转换成字符串； 

  2，其他情况，操作数转换成数字执行加法运算。 
1
2
3

而对于“ - ”来说，只有一个含义，就是做减法，自然不会转化成字符串了。

---

19.执行以下程序，输出结果为（）

function Person(age){

       this.age = age;

 }

Person.prototype = {

       constructor:Person,

       getAge:function(){

            console.log(this.age);

        },

 }

var ldh = new Person(24);

Person.prototype.age = 18;

Object.prototype.age = 20;

ldh.getAge();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

答案：24
解析：对象在调用方法和属性时依靠原型链的顺序进行查找，先从自身查找，然后是构造函数的原型对象，接着是Object的原型对象,一旦找到时停止查找，找不到则返回undefined。同时，原型对象中的this仍然指向实例对象，而非原型对象，在本题中，实例对象先调用原型对象的getAge()方法，然后输出age属性值，由于该实例对象已经有age属性，同时其原型链中，原型对象和原型对象的原型对象即Object对象均有age属性，依据上述查找规则，最终输出结果为实例对象的age，即为24。

---

20.下列哪些会返回false？

A null
B undefined
C 0
D ‘0’
答案：ABC
解析：其他类型转Boolean类型的规则： null, undefined, “”, 0, -0, NaN 转换成布尔值是false， 剩下的全转化 true;
针对D ‘0’是字符串 ‘’转字符串才是fasle 别的都是true
其它相关类型转换可见

---