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

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

🎉往期回顾：

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

javascript 复制代码

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

答案：Hello world

解析：对于正则表达式 /(a)\1/g，其中(a)是第一个分组，\1指向第一个分组，即\1重复了第一个分组的内容，所以该正则表达式等价于/(aa)/g

对于str.replace(a,b) 用第二个参数b替换掉第一个参数a,这里'$1'也是指向第一个分组（a），也就是使用 'a 去替换掉 'aa'

以下符合 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.请给出下面这段代码的运行结果（）

javascript 复制代码

var bb = 1;
function aa(bb) {
    bb = 2;
    alert(bb);
};
aa(bb);
alert(bb);

答案：1 2

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

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

javascript 复制代码

var len = 117;
let func = {
  len: 935,
  showLen: function() {
    console.log(this.len);
  },
  show: function() {
    (function(cb) {
      cb();
    })(this.showLen)
  }
}
func.show();

答案：117

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

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

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

解析：第一步：进行预编译，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

解析：<input id="btnShow" type="button" value="点击" class="btn"> 上面是一段按钮的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：

javascript 复制代码

var obj = document.getElementById("test");

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，其他情况，操作数转换成数字执行加法运算。

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

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

javascript 复制代码

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();

答案：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
其它相关类型转换可见

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