前端面试题库 面试题 JS难题，做对一半就是高手(1)，2024年最新bilibili前端面试

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

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

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

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

3. 愤怒的reduce

=================

[ [3,2,1].reduce(Math.pow), [].reduce(Math.pow) ]

// A. an error

// B. [9, 0]

// C. [9, NaN]

// D. [9, undefined]

答案是A。MDN文档中关于 Array.prototype.reduce() 写得很清楚：

如果数组为空并且没有提供initialValue， 会抛出TypeError 。如果数组仅有一个元素（无论位置如何）并且没有提供initialValue， 或者有提供initialValue但是数组为空，那么此唯一值将被返回并且callback不会被执行。

参考资料：

• MDN：Array.prototype.reduce()

4. 该死的优先级

==============

var val = ‘smtg’;

console.log('Value is ’ + (val === ‘smtg’) ? ‘Something’ : ‘Nothing’);

// A. Value is Something

// B. Value is Nothing

// C. NaN

// D. other

答案是D。实际上输出 Something，因为 + 的优先级比条件运算符 condition ? val1 : val2 的优先级高。参考资料：

• MDN：运算符优先级

5. 神鬼莫测之变量提升

=================

var name = ‘World!’;

(function () {

if (typeof name === ‘undefined’) {

var name = ‘Jack’;

console.log('Goodbye ’ + name);

} else {

console.log('Hello ’ + name);

}

})();

// A. Goodbye Jack

// B. Hello Jack

// C. Hello undefined

// D. Hello World

答案是A。看如下MDN官方文档的解释：

在 JavaScript中， functions 和 variables 会被提升。变量提升是JavaScript将声明移至作用域 scope (全局域或者当前函数作用域) 顶部的行为。

这意味着你可以在声明一个函数或变量之前引用它，或者可以说：一个变量或函数可以在它被引用之后声明。

所以，上面的代码与下面这段代码是等价的：

var name = ‘World!’;

(function () {

var name;

if (typeof name === ‘undefined’) {

name = ‘Jack’;

console.log('Goodbye ’ + name);

} else {

console.log('Hello ’ + name);

}

})();

参考资料：

• MDN：变量提升

• 这篇博客解释的比较详细：js变量提升

6. 死循环陷阱

=============

var END = Math.pow(2, 53);

var START = END - 100;

var count = 0;

for (var i = START; i <= END; i++) {

count++;

}

console.log(count);

// A. 0

// B. 100

// C. 101

// D. other

答案是D。在JavaScript中，2^53 是最大的值，没有比这更大的值了。所以 2^53 + 1 == 2^53，所以这个循环无法终止。

7. 过滤器魔法

=============

var ary = [0,1,2];

ary[10] = 10;

ary.filter(function(x) {

return x === undefined;

});

// A. [undefined x 7]

// B. [0, 1, 2, 10]

// C. []

// D. [undefined]

答案是C。看MDN官方文档的描述：

filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或 等价于 true 的值 的元素创建一个新数组。**callback 只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。**那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。

参考资料：

• MDN：Array.prototype.filter()

手机上刷题  更方便

=============

=======================================================================================================================================================================================================

8. 警惕IEEE 754标准

====================

var two = 0.2;

var one = 0.1;

var eight = 0.8;

var six = 0.6;

[two - one == one, eight - six == two]

// A. [true, false]

// B. [false, false]

// C. [true, false]

// D. other

答案是C。JavaScript中采用双精度浮点数格式，即IEEE 754标准。在该格式下，有些数字无法表示出来，比如：0.1 + 0.2 = 0.30000000000000004 ，这不是JavaScript的锅，所有采用该标准的语言都有这个问题，比如：Java、Python等。参考资料：

• Wiki：Double-precision floating-point format

9. 字符串陷阱

=============

function showCase(value) {

switch(value) {

case ‘A’:

console.log(‘Case A’);

break;

case ‘B’:

console.log(‘Case B’);

break;

case undefined:

console.log(‘undefined’);

break;

default:

console.log(‘Do not know!’);

}

}

showCase(new String(‘A’));

// A. Case A

// B. Case B

// C. Do not know!

// D. undefined

答案是C。在 switch 内部使用严格相等 === 进行判断，并且 new String(A) 返回的是一个对象，而 String(A) 则是直接返回字符串 A。你也可以参考MDN中对原始字符串和String对象的区分：

Note that JavaScript distinguishes between String objects and primitive string values. (The same is true of Boolean and Numbers.)

String literals (denoted by double or single quotes) and strings returned from String calls in a non-constructor context (i.e., without using the new keyword) are primitive strings. JavaScript automatically converts primitives to String objects, so that it’s possible to use String object methods for primitive strings. In contexts where a method is to be invoked on a primitive string or a property lookup occurs, JavaScript will automatically wrap the string primitive and call the method or perform the property lookup.

参考资料：

• MDN：String

10. 再一次的字符串陷阱

function showCase(value) {

switch(value) {

case ‘A’:

console.log(‘Case A’);

break;

case ‘B’:

console.log(‘Case B’);

break;

case undefined:

console.log(‘undefined’);

break;

default:

console.log(‘Do not know!’);

}

}

showCase(String(‘A’));

// A. Case A

// B. Case B

// C. Do not know!

// D. undefined

答案显然是A。与上面唯一不同的是没有使用 new 关键字，所以直接返回字符串，实际上，typeof string(A) === string 的结果是 true。解释参见第9条的解释。

11. 并非都是奇偶

===============

function isOdd(num) {

return num % 2 == 1;

}

function isEven(num) {

return num % 2 == 0;

}

function isSane(num) {

return isEven(num) || isOdd(num);

}

var values = [7, 4, 13, -9, Infinity];

values.map(isSane);

// A. [true, true, true, true, true]

// B. [true, true, true, true, false]

// C. [true, true, true, false, false]

// D. [true, true, false, false, false]

答案是C。-9 % 2 = -1 以及 Infinity % 2 = NaN，求余运算符会保留符号，所以只有 isEven 的判断是可靠的。

12. parseInt小贼

===================

parseInt(3, 8);

parseInt(3, 2);

parseInt(3, 0);

// A. 3, 3, 3

// B. 3, 3, NaN

// C. 3, NaN, NaN

// D. other

答案是D。实际结果是 3, NaN, 3，这个在第一个问题中解释的很清楚了。

手机上刷题  更方便

=============

=======================================================================================================================================================================================================

13. 数组原型是数组

================

Array.isArray( Array.prototype )

// A. true

// B. false

// C. error

// D. other

答案是A。一个鲜为人知的事实：其实 Array.prototype 也是一个数组。这点在MDN文档中提到过。参考资料：

• MDN：Array.isArray()

14. 一言难尽的强制转换

==================

var a = [0];

if ([0]) {

console.log(a == true);

} else {

console.log(wut);

}

// A. true

// B. false

// C. wut

// D. other

答案是B。这个是JavaScript中强制转换的经典案例，关于强制转换不是一两句话可以跟你说清楚的，我建议你系统性的学习一下，推荐你看看《你不知道的JavaScript-中卷》这本书，如果不舍得买书，github上有英文原版：You-Dont-Know-JS，深入理解之后你就是高手了。好了，回到当前这个问题。当 [0] 需要被强制转成 Boolean 的时候会被认为是 true。所以进入第一个 if 语句，而 a == true 的转换规则在ES5规范的第11.9.3节中已经定义过，你可以自己详细探索下。规范指出，== 相等中，如果有一个操作数是布尔类型，会先把他转成数字，所以比较变成了 [0] == 1；同时规范指出如果其他类型和数字比较，会尝试把这个类型转成数字再进行宽松比较，而对象（数组也是对象）会先调用它的 toString() 方法，此时 [0] 会变成 0，然后将字符串 0 转成数字 0，而 0 == 1 的结果显然是 false。参考资料：

• ES5规范：11.9.3

• 《你不知道的JavaScript-中卷》

15. 撒旦之子“==”

=================

[]==[]

// A. true

// B. false

// C. error

// D. other

答案是B。ES5规范11.9.3.1-f指出：如果比较的两个对象指向的是同一个对象，就返回 true，否则就返回 false，显然，这是两个不同的数组对象。参考资料：

• ES5规范：11.9.3.1

• 《你不知道的JavaScript-中卷》

16. 加号 VS 减号

=================

‘5’ + 3;

‘5’ - 3;

// A. 53, 2

// B. 8, 2

// C. error

// D. other

答案是A。5 + 2 = 52 很好理解，+ 运算符中只要有一个是字符串，就会变成字符串拼接操作。你不知道的是，- 运算符要求两个操作数都是数字，如果不是，会强制转换成数字，所以结果就变成了 5 - 2 = 3。参考资料：

• 《你不知道的JavaScript-中卷》，第四章：4.4.2 字符串和数字之间的隐式强制类型转换

17. 打死那个疯子

===============

1 + - + + + - + 1

// A. 2

// B. 1

// C. error

// D. other

答案是A。这个只能出现在示例代码中，如果你发现哪个疯子写了这个在生产代码中，打死他就行了。你只要知道 + 1 = 1和- 1 = -1，注意符号之间的空格。两个减号抵消，所以最终结果等效于 1 + 1 = 2。或者你也可以在符号之间插入 0 来理解，即 1 + 0 - 0 + 0 + 0 + 0 - 0 + 1，这样你就一目了然了吧！千万别写这样的代码，因为可能会被打死！

手机上刷题  更方便

=============

=======================================================================================================================================================================================================

18. 淘气的map

===============

var ary = Array(3);

ary[0] = 2;

ary.map(function(elem) {

return 1;

});

// A. [2, 1, 1]

// B. [1, 1, 1]

// C. [2, 1, 1]

// D. other

答案是D。实际上结果是 [1, undefined x 2]，因为规范写得很清楚：

map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值组合起来形成一个新数组。callback 函数只会在有值的索引上被调用；那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。

参考资料：

• MDN: Array.prototype.map()

19. 统统算我的

==============

function sidEffecting(ary) {

ary[0] = ary[2];

}

function bar(a, b, c) {

c = 10;

sidEffecting(arguments);

return a + b + c;

}

bar(1, 1, 1);

// A. 3

// B. 12

// C. error

// D. other

答案是D。实际上结果是 21。在JavaScript中，参数变量和 arguments 是双向绑定的。改变参数变量，arguments 中的值会立即改变；而改变 arguments 中的值，参数变量也会对应改变。

20. 损失精度的IEEE 754

======================

var a = 111111111111111110000;

var b = 1111;

console.log(a + b);

// A. 111111111111111111111

// B. 111111111111111110000

// C. NaN

// D. Infinity

答案是B。这是IEEE 754规范的黑锅，不是JavaScript的问题。表示这么大的数占用过多位数，会丢失精度，学过计算机组成原理的应该知道是怎么回事。参考资料：

• Wiki：Double-precision floating-point format

手机上刷题  更方便

=============

=======================================================================================================================================================================================================

21. 反转世界

=============

var x = [].reverse;

x();

// A. []

// B. undefined

// C. error

// D. window

答案是D。MDN规范关于 reverse 的描述：

reverse 方法颠倒数组中元素的位置，并返回该数组的引用。

而这里调用的时候没有制定数组，所以默认的 this 就是 window，所以最后结果返回的是 window。参考资料：

• MDN：Array.prototype.reverse()

22. 最小的正值

==============

Number.MIN_VALUE > 0

// A. false

// B. true

// C. error

// D. other

答案是B。看规范描述吧：

MIN_VALUE属性是 JavaScript 里最接近 0 的正值，而不是最小的负值。

MIN_VALUE的值约为 5e-324。小于 MIN_VALUE

(underflow values) 的值将会转换为 0。

因为 MIN_VALUE是 Number 的一个静态属性，因此应该直接使用：Number.MIN_VALUE，而不是作为一个创建的 Number实例的属性。

参考资料：

• MDN：Number.MIN_VALUE

23. 谨记优先级

==============

[1 < 2 < 3, 3 < 2 < 1]

// A. [true, true]

// B. [true, false]

// C. error

// D. other

答案是A。<和>的优先级都是从左到右，所以 1 < 2 < 3 会先比较 1 < 2，这会得到 true，但是 < 要求比较的两边都是数字，所以会发生隐式强制转换，将 true 转换成 1，所以最后就变成了比较 1 < 3，结果显然为 true。同理可以分析后者。参考资料：

• MDN：运算符优先级

24. 坑爹中的战斗机

================

// the most classic wtf

2 == [[[2]]]

// A. true

// B. false

// C. undefined

// D. other

答案是A。根据ES5规范，如果比较的两个值中有一个是数字类型，就会尝试将另外一个值强制转换成数字，再进行比较。而数组强制转换成数字的过程会先调用它的 toString方法转成字符串，然后再转成数字。所以 [2]会被转成 2，然后递归调用，最终 [[[2]]] 会被转成数字 2。

25. 小数点魔术

==============

3.toString();

3…toString();

3…toString();

// A. 3, error, error

// B. 3, 3.0, error

// C. error, 3, error

// D. other

答案是C。点运算符会被优先识别为数字常量的一部分，然后才是对象属性访问符。所以 3.toString() 实际上被JS引擎解析成 (3.)toString()，显然会出现语法错误。但是如果你这么写 (3).toString()，人为加上括号，这就是合法的。

26. 自动提升为全局变量

==================

(function() {

var x = y = 1;

})();

console.log(y);

console.log(x);

// A. 1, 1

// B. error, error

// C. 1, error

// D. other

答案是C。很经典的例子，在函数中没有用 var 声明变量 y，所以 y 会被自动创建在全局变量 window下面，所以在函数外面也可以访问得到。而 x 由于被 var 声明过，所以在函数外部是无法访问的。

27. 正则表达式实例

================

var a = /123/;

var b = /123/;

a == b;

a === b;

// A. true, true

// B. true, false

// C. false, false

// D. other

答案是C。每个字面的正则表达式都是一个单独的实例，即使它们的内容相同。

28. 数组也爱比大小

================

var a = [1, 2, 3];

var b = [1, 2, 3];

var c = [1, 2, 4];

a == b;

a === b;

a > c;

a < c;

// A. false, false, false, true

// B. false, false, false, false

// C. true, true, false, true

// D. other

答案是A。数组也是对象，ES5规范指出如果两个对象进行相等比较，只有在它们指向同一个对象的情况下才会返回 true，其他情况都返回 false。而对象进行大小比较，会调用 toString 方法转成字符串进行比较，所以结果就变成了字符串 1,2,3 和 1,2,4 按照字典序进行比较了（你若不信，可以重现两个变量的 toString 方法，进行测试）。

手机上刷题  更方便

=============

=======================================================================================================================================================================================================

29. 原型把戏

=============

var a = {};

var b = Object.prototype;

[a.prototype === b, Object.getPrototypeOf(a) == b]

// A. [false, true]

// B. [true, true]

// C. [false, false]

// D. other

答案是A。对象是没有 prototype 属性的，所以 a.prototype 是 undefined，但我们可以通过 Object.getPrototypeOf 方法来获取一个对象的原型。

30. 构造函数的函数

================

ES6

• 列举常用的ES6特性：

• 箭头函数需要注意哪些地方？

• let、const、var

• 拓展：var方式定义的变量有什么样的bug？

• Set数据结构

• 拓展：数组去重的方法

• 箭头函数this的指向。

• 手写ES6 class继承。

微信小程序

• 简单描述一下微信小程序的相关文件类型?

• 你是怎么封装微信小程序的数据请求？

• 有哪些参数传值的方法？

• 你使用过哪些方法，来提高微信小程序的应用速度？

• 小程序和原生App哪个好？

• 简述微信小程序原理？

• 分析微信小程序的优劣势

• 怎么解决小程序的异步请求问题？

其他知识点面试

• webpack的原理

• webpack的loader和plugin的区别？

• 怎么使用webpack对项目进行优化?

• 防抖、节流

• 浏览器的缓存机制

• 描述一下二叉树, 并说明二叉树的几种遍历方式?

• 项目类问题

• 笔试编程题：

最后

技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

// B. [true, true]

// C. [false, false]

// D. other

答案是A。对象是没有 prototype 属性的，所以 a.prototype 是 undefined，但我们可以通过 Object.getPrototypeOf 方法来获取一个对象的原型。

30. 构造函数的函数

================

ES6

• 列举常用的ES6特性：

• 箭头函数需要注意哪些地方？

• let、const、var

• 拓展：var方式定义的变量有什么样的bug？

• Set数据结构

• 拓展：数组去重的方法

• 箭头函数this的指向。

• 手写ES6 class继承。

微信小程序

• 简单描述一下微信小程序的相关文件类型?

• 你是怎么封装微信小程序的数据请求？

• 有哪些参数传值的方法？

• 你使用过哪些方法，来提高微信小程序的应用速度？

• 小程序和原生App哪个好？

• 简述微信小程序原理？

• 分析微信小程序的优劣势

• 怎么解决小程序的异步请求问题？

其他知识点面试

• webpack的原理

• webpack的loader和plugin的区别？

• 怎么使用webpack对项目进行优化?

• 防抖、节流

• 浏览器的缓存机制

• 描述一下二叉树, 并说明二叉树的几种遍历方式?

• 项目类问题

• 笔试编程题：

最后

技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-84CXA5Ae-1713072521783)]

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！