JS面试题汇总（九），资深web前端开发

JS面试题汇总（八）

✨81. call 与 apply 区别

参考答案：

第二个参数的类型不同

解析：

call 和 apply 的作用，完全一样，唯一的区别就是在参数上面。

call 接收的参数不固定，第一个参数是函数体内 this 的指向，第二个参数以下是依次传入的参数。

apply 接收两个参数，第一个参数也是函数体内 this 的指向。第二个参数是一个集合对象（数组或者类数组）

✨82. 正则表达式构造函数 var reg = new RegExp(‘xxx’)与正则表达字面量 var reg = // 有什么不同？

参考答案：

使用正则表达字面量的效率更高

解析：下面的示例代码演示了两种可用于创建正则表达式以匹配反斜杠的方法：

//正则表达字面量

var re = /\/gm;

//正则构造函数

var reg = new RegExp(“\\”, “gm”);

var foo = “abc\123”; // foo的值为"abc\123"

console.log(re.test(foo)); //true

console.log(reg.test(foo)); //true

如上面的代码中可以看到，使用正则表达式字面量表示法时式子显得更加简短，而且不用按照类似类（class-like）的构造函数方式思考。

其次，在当使用构造函数的时候，在这里要使用四个反斜杠才能匹配单个反斜杠。这使得正则表达式模式显得更长，更加难以阅读和修改。正确来说，当使用 RegExp()构造函数的时候，不仅需要转义引号（即"表示"），并且通常还需要双反斜杠（即\表示一个\）。

使用 new RegExp()的原因之一在于，某些场景中无法事先确定模式，而只能在运行时以字符串方式创建。

👓参考

✨83. js 中 callee 与 caller 的作用

参考答案：

1. caller 返回一个调用当前函数的引用 如果是由顶层调用的话 则返回 null

（举个栗子哈 caller 给你打电话的人 谁给你打电话了 谁调用了你 很显然是下面 a 函数的执行 只有在打电话的时候你才能知道打电话的人是谁 所以对于函数来说 只有 caller 在函数执行的时候才存在）

var callerTest = function() {

console.log(callerTest.caller);

};

function a() {

callerTest();

}

a(); //输出function a() {callerTest();}

callerTest(); //输出null

2. callee 返回一个正在被执行函数的引用 （这里常用来递归匿名函数本身 但是在严格模式下不可行）

callee 是 arguments 对象的一个成员 表示对函数对象本身的引用 它有个 length 属性（代表形参的长度）

var c = function(x, y) {

console.log(arguments.length, arguments.callee.length, arguments.callee);

};

c(1, 2, 3); //输出3 2 function(x,y) {console.log(arguments.length,arguments.callee.length,arguments.callee)}

✨84. 异步加载 js 的方法

参考答案：

方案一： <script> 标签的 async="async"属性（详细参见：script 标签的 async 属性）

点评：HTML5 中新增的属性，Chrome、FF、IE9&IE9+均支持（IE6~8 不支持）。此外，这种方法不能保证脚本按顺序执行。

方案二： <script> 标签的 defer="defer"属性

点评：兼容所有浏览器。此外，这种方法可以确保所有设置 defer 属性的脚本按顺序执行。

方案三：动态创建 <script> 标签

示例：

点评：兼容所有浏览器。

方案四：AJAX eval（使用 AJAX 得到脚本内容，然后通过 eval_r(xmlhttp. responseText)来运行脚本）

点评：兼容所有浏览器。

方案五：iframe 方式（这里可以参照：iframe 异步加载技术及性能 中关于 Meboo 的部分）

点评：兼容所有浏览器。

✨85. 去除数组重复成员的方法

参考答案：

方法 1 扩展运算符和 Set 结构相结合，就可以去除数组的重复成员

// 去除数组的重复成员

[…new Set([1, 2, 2, 3, 4, 5, 5])];

// [1, 2, 3, 4, 5]

方法 2

function dedupe(array) {

return Array.from(new Set(array));

}

dedupe([1, 1, 2, 3]); // [1, 2, 3]

方法 3（ES5）

function unique(arry) {

const temp = [];

arry.forEach(e => {

if (temp.indexOf(e) == -1) {

temp.push(e);

}

});

return temp;
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可免费领取

你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）**

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可免费领取

[外链图片转存中…(img-4p1IjJ0X-1712167456214)]