前端笔试题总结，带答案和解析（二）
上一期： 前端笔试题总结，带答案和解析（1）
11.以下代码的执行后，str 的值是：
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.请给出下面这段代码的运行结果（ ）
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值是多少？
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。
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
解析：第一步：进行预编译，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：
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.执行以下程序，输出结果为（）
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
其它相关类型转换可见
