10个让你大吃一惊的JavaScript面试题

1,675 阅读3分钟

今天,我们来深入探讨一些有趣的JavaScript问题,它们可能会让你措手不及,但最终会让你收获不少知识。

1. [] + [][] + {} 的输出是什么?

这个看似简单的运算却有着有趣的答案:

[] + []   // 输出: ""
[] + {}   // 输出: "[object Object]"

解释:

  • [] + [] 的结果是空字符串,因为JavaScript试图将两个数组转换为字符串,得到两个空字符串,并进行拼接。
  • [] + {} 的结果是字符串 "[object Object]",因为当对象被加到数组中时,JavaScript会将对象转换为它的字符串表示形式。

2. typeof NaN 返回什么?

typeof NaN   // 输出: "number"

解释:

  • NaN 代表“非数字”,但它在JavaScript中仍然被认为是数字类型。这算是JavaScript语言中的一种“怪癖”。

3. ===== 有什么区别?

答案:

  • == 用于比较两个值是否相等,但如果它们类型不同,它会进行类型转换。
  • === 则同时比较值和类型,不会进行类型转换。
'5' == 5   // true
'5' === 5  // false

4. 你能解释一下JavaScript中的变量提升(hoisting)吗?

答案:

  • 变量提升是JavaScript的默认行为,它会在代码执行前将声明提升到作用域的顶部。这适用于变量和函数声明。然而,只有声明会被提升,初始化不会被提升。
console.log(x);  // undefined
var x = 10;

解释:

  • 变量 x 被提升了,但它的值 (10) 没有。因此,你得到 undefined 而不是引用错误。

5. nullundefined 有什么区别?

答案:

  • null: 表示有意地没有任何对象值。它是显式设置的。
  • undefined: 一个已声明但尚未赋值的变量,会自动获得 undefined 值。
let a;
console.log(a); // undefined

let b = null;
console.log(b); // null

6. 以下代码的输出是什么?

(function() {
    var a = b = 3;
})();
console.log(b);

输出: 3

解释:

  • 这段代码有点棘手。b = 3 是一个全局赋值,因为 b 前面没有 varletconst。因此,b 被赋值给全局对象(浏览器中的 window),可以在函数外部访问。

7. 0.1 + 0.2 === 0.3 返回什么?

console.log(0.1 + 0.2 === 0.3);  // false

解释:

  • 由于浮点数精度问题,0.1 + 0.2 不完全等于 0.3,而更像是 0.30000000000000004。这种行为源于数字在内存中的表示方式。

8. console.log([] == false) 的输出是什么?

输出: true

解释:

  • 当使用 == 运算符时,JavaScript 会对两个操作数进行强制类型转换。空数组 [] 被转换为空字符串 "",而空字符串在 JavaScript 中被认为是 false,因此 [] == false 返回 true

9. 解释JavaScript中的 this 关键字。

答案: this 关键字指的是正在执行当前函数的对象。它的值取决于函数的调用方式:

  • 在普通函数中,this 指向全局对象(浏览器中的 window)。
  • 在方法中,this 指向拥有该方法的对象。
  • 在箭头函数中,this 按词法绑定到周围作用域。
const obj = {
  name: 'Alice',
  greet() {
    console.log(this.name);
  }
};
obj.greet();  // "Alice"

10. 以下代码的输出是什么?

for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

输出: 3, 3, 3

解释:

  • var 关键字创建了一个函数级作用域的变量。当 setTimeout 回调函数执行时,循环已经结束,i 已经增加到 3。因此,所有回调函数都打印 3

如何修复? 使用 let 创建一个块级作用域的变量:

for (let i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}
// 输出: 0, 1, 2

结论

这些问题虽然看起来很简单,但如果你不熟悉JavaScript的细微之处,在面试中可能会让你措手不及。理解这些概念是顺利通过JavaScript面试的关键,并且展示了深入理解语言的怪癖的重要性。

最后,如果这篇文章对你有所帮助请 “点赞 收藏+关注” ,感谢支持!!