7 道 JavaScript 陷阱题:测试你的 JavaScript 功底

239 阅读3分钟

这七道题涵盖了 JavaScript 语言的不同方面,看似简单,却容易让你措手不及!如果你能顺利解答这些问题,说明你对 JavaScript 已经有了相当的理解!

问题 1:0.1 + 0.2 === 0.3 的结果是什么?

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

答案:

结果是 false

解释:

在 JavaScript 中,带有小数的数字(称为浮点数)并不总是按照我们期望的方式相加。

由于 JavaScript 中浮点数的表示方式,0.1 + 0.2 并不完全等于 0.3。实际上,它的结果是 0.30000000000000004,导致比较结果为 false。这个问题源于 JavaScript 中对十进制数字的二进制近似值。

问题 2:"5" + 3"5" - 3 的结果是什么?

console.log("5" + 3);
console.log("5" - 3);

答案:

  • "5" + 3 的结果是 "53"
  • "5" - 3 的结果是 2

解释:

  • "5" + 3: 当你使用 + 符号连接字符串和数字时,JavaScript 会将数字视为字符串的一部分。因此,它不会将 53 作为数字相加,而是将它们组合成文本,结果为 "53"
  • "5" - 3: - 运算符不适用于字符串,因此 JavaScript 会将 "5" 转换为数字并减去 3,结果为 2

问题 3:typeof null 的值是什么?

console.log(typeof null);

答案:

结果是 "object"

解释:

这是 JavaScript 的一个奇怪之处。typeof 运算符应该告诉你拥有的是哪种类型的值。

但当你检查 typeof null 时,JavaScript 错误地将其说成是一个对象,尽管 null 实际上是一个特殊的值,表示“空”。

这是一个长期存在的错误,为了防止旧代码崩溃,它一直没有被修复。

问题 4:闭包是如何工作的?

function outerFunction() {
  let count = 0;
  return function() {
    count++;
    console.log(count);
  };
}

const closure = outerFunction();
closure(); // ?
closure(); // ?

答案:

输出将是:

1
2

解释:

当一个函数即使在外部函数执行完毕后仍然能够记住它周围的变量时,就会发生闭包。

在这个例子中,内部函数仍然可以访问 outerFunction 内部的 count 变量。每次你调用 closure() 时,它都会增加 count 并显示它。

问题 5:true + false[] + {} 的结果是什么?

console.log(true + false);
console.log([] + {});

答案:

  • true + false 的结果是 1
  • [] + {} 的结果是 "[object Object]"

解释:

  • true + false: 在 JavaScript 中,true 被视为 1false 被视为 0。将 1 + 0 相加得到 1
  • [] + {}: 当你将一个空数组 [] 与一个空对象 {} 相加时,JavaScript 会将它们转换为字符串。空数组变成一个空字符串 "",而空对象变成 "[object Object]"。因此,将它们相加得到 "[object Object]"

问题 6:[] == ![] 的含义是什么?

console.log([] == ![]);

答案:

结果是 true

解释:

这有点棘手!以下是发生的事情:

  1. ![] 表示“不是空数组”。空数组是一个“真值”,所以 ![]false
  2. 现在,表达式变为 [] == false
  3. JavaScript 尝试比较 []false。它将 [] 转换为一个空字符串 "",并将 false 转换为 0
  4. 然后,"" == 0true,因为 JavaScript 在比较时会将空字符串转换为 0

问题 7:以下代码中 console.log(a) 的输出是什么?

console.log(a);
var a = 5;

答案:

输出是 undefined

解释:

这是由于一个叫做提升(hoisting)的概念造成的。当 JavaScript 读取你的代码时,它会将所有变量声明移动到它们作用域的顶部。

因此,在本例中,JavaScript 在顶部看到了 var a;,但此时还没有赋值 5。所以当你尝试记录 a 时,它已经声明了,但仍然是 undefined

结论

你答对了多少题呢?这些问题将 JavaScript 的奇特行为与闭包和提升等重要概念融合在一起。

了解这些内容将有助于你避免常见的错误,并更好地理解 JavaScript 处理不同操作的方式。

祝你编程愉快!