JavaScript |常见错误

JavaScript 是一门容易上手的语言，但要掌握它需要大量的努力、时间和耐心。初学者经常犯一些众所周知的错误，这些错误会反过来咬他们。在本文中，我们将介绍人们最常犯的一些学习错误，并找出克服这些错误的方法。其中许多技巧将适用于 JavaScript 甚至 Web 开发之外。

区分大小写

变量和函数名区分大小写。并且，请记住，javascript 中的原生 javascript函数和 CSS 属性是驼峰式的。

例子：

// it should be 'Id' not 'ID'
getElementById('geeksforgeeks') != getElementByID('geeksforgeeks'); 
  
// 'geeksforgeeks' again does not equal 'GeeksForGeeks'
getElementById('geeksforgeeks') != getElementById('GeeksForGeeks');

错误地使用“IF”语句比较运算符

我们谈论的是“==”运算符和“=”运算符。第一个进行比较，第二个为变量赋值。创建的错误取决于语言。有些语言会抛出错误，但 JavaScript 会实际评估语句并返回真或假。

例子：

// This if statement returns false (as expected) because x is not equal to 5:
var x = 0;
if (x == 5);
  
// This if statement returns true (not expected) and Assigns 5 to x:
var x = 0;
if (x = 5);

Javascript 是松散类型的，除了 switch 语句。在进行大小写比较时，JavaScript 不是松散类型的。
例子：

var myVar = 5;
if(myVar == '5'){ 
  // returns true since Javascript is loosely typed
  alert('Welcome to GeeksforGeeks'); 
}
  
switch(myVar){
  case '5':
  // this alert will not show since the data types don't match
  alert('Welcome to GeeksforGeeks'); 
}

忘记使用“这个”

另一个常见的错误是忘记使用“this”。在 JavaScript 对象上定义的函数访问该 JavaScript 对象上的属性并且未能使用“this”引用标识符。
例子：

// the following is incorrect:
  
function myFunction() {
  var myObject = {
     objProperty: "GeeksforGeeks welcomes you",
     objMethod: function() {
        alert(objProperty);
        }
     };
  myObject.objMethod();
} 
myFunction();
  
// the following is correct:
  
function myFunction() {
  var myObject = {
     objProperty: "GeeksforGeeks welcomes you",
     objMethod: function() {
        alert(this.objProperty);
        }
     };
  myObject.objMethod();
} 
myFunction();

未定义！= null

在 JavaScript 中，undefined 意味着一个变量已经被声明但还没有被赋值，null 是一个赋值。它可以分配给一个变量作为没有值的表示。
例子：

// undefined
let TestVar;
console.log(TestVar); // shows undefined
console.log(typeof TestVar); // shows undefined
  
// null
let TestVar = null;
console.log(TestVar); // shows null
console.log(typeof TestVar); // shows object
  
// it is clear that undefined and null are two distinct types:
// undefined is a type itself (undefined) while null is an object.
  
null === undefined // false
null == undefined // true
null === null // true

令人困惑的加法和连接

加法是关于添加数字，连接是关于添加字符串。在 JavaScript 中，两个操作都使用相同的 '+'运算符。因此，将数字添加为数字将产生与将数字添加为字符串不同的结果，并且很多初学者对此感到困惑。

例子：

// the result in x is 30
var x = 5 + 25;  
  
// the result in x is '525'
var x = 5 + '25';

不了解范围如何工作：

初学者很难理解的一个概念是 JavaScript 的作用域规则和闭包。函数保留对其父范围内变量的可见性。但是因为我们使用 setTimeout 来延迟执行，所以当函数真正运行的时候，循环已经结束并且 I 变量递增到 6。

注释中的自执行函数有效，因为它按值复制 I 变量并为每个超时函数保留一个私有副本。

例子：

// Output will be 6
for(var i = 0; i < 5; i++){
    setTimeout(function(){
        console.log(i+1);
    }, 100*i);
}

结论

您越了解 JavaScript 工作和不工作的原因和方式，您的代码就越可靠，您就越能够有效地利用该语言的真正力量并进行改进。相反，缺乏对 JavaScript 范式和概念的正确理解确实是许多 JavaScript 问题所在。