JavaScript 中的常见易错点包括语法错误、逻辑错误和一些常见的陷阱。以下是一些常见的错误和避免这些错误的建议:
-
变量声明错误
- 使用
var
声明变量可能导致变量提升和作用域问题,建议使用let
和const
。 - 错误示例:
var x = 10; if (true) { var x = 20; // 这里会重新声明并覆盖全局的 x } console.log(x); // 输出 20
- 使用
-
类型转换错误
- JavaScript 是弱类型语言,类型转换可能会导致意外结果。
- 错误示例:
console.log(1 + "1"); // 输出 "11" 而不是 2
-
相等性比较
-
==
和===
的区别,==
会进行类型转换,而===
不会。 - 建议使用
===
进行比较。 - 错误示例:
console.log(0 == false); // 输出 true console.log(0 === false); // 输出 false
-
-
全局变量污染
- 避免意外创建全局变量。
- 错误示例:
function foo() { bar = 10; // 未声明的变量 bar 被自动提升为全局变量 } foo(); console.log(bar); // 输出 10
-
闭包问题
- 使用闭包时要注意变量的作用域和生命周期。
- 错误示例:
for (var i = 0; i < 3; i++) { setTimeout(function() { console.log(i); // 每次都会输出 3 }, 1000); }
-
箭头函数中的
this
- 箭头函数不会绑定自己的
this
,它会捕获上下文的this
值。 - 错误示例:
function Person() { this.age = 0; setInterval(() => { this.age++; // 这里的 this 是 Person 实例 }, 1000); } const p = new Person();
- 箭头函数不会绑定自己的
-
浮点数计算误差
- JavaScript 使用 IEEE 754 标准来表示浮点数,这可能导致计算误差。
- 错误示例:
console.log(0.1 + 0.2); // 输出 0.30000000000000004
-
数组和对象的引用
- 数组和对象是引用类型,赋值和比较时要注意。
- 错误示例:
const arr1 = [1, 2, 3]; const arr2 = arr1; arr2.push(4); console.log(arr1); // 输出 [1, 2, 3, 4]
-
NaN
的比较-
NaN
(Not-a-Number) 与任何值都不相等,包括它自身。 - 错误示例:
console.log(NaN === NaN); // 输出 false
-
-
事件处理中的循环
- 在事件处理函数中不小心使用了闭包导致循环引用。
- 错误示例:
for (var i = 0; i < 3; i++) { document.getElementById('btn' + i).addEventListener('click', function() { alert(i); // 每次都会输出 3 }); }
通过注意以上常见的错误和陷阱,可以在编写 JavaScript 代码时避免很多潜在的问题。
a. 编写一段代码,展示如何正确使用 let
解决变量提升问题。
b. 创建一个函数,用来安全地比较浮点数,避免浮点数计算误差。