JavaScript 常见错误

  • 意外使用赋值运算符

    如果程序员意外地使用赋值运算符(=)而不是if语句中的比较运算符(==),则JavaScript程序可能会生成意外结果。 此if语句返回false(按预期),因为x不等于10:
    var x = 0;
    if (x == 10)
    
    尝试一下
    此if语句返回true(可能不是预期的),因为10为真:
    var x = 0;
    if (x = 10)
    
    尝试一下
    此if语句返回false(可能不是预期的),因为0为false:
    var x = 0;
    if (x = 0)
    
    尝试一下
    赋值始终返回赋值的值。然后再进行判断返回布尔值
  • 期待宽松的比较

    在常规比较中,数据类型无关紧要。该if语句返回true:
    var x = 10;
    var y = "10";
    if (x == y)
    
    尝试一下
    在严格的比较中,数据类型很重要。该if语句返回false:
    var x = 10;
    var y = "10";
    if (x === y)
    
    尝试一下
    忘记switch语句使用严格比较是一个常见的错误:这case switch将显示警告:
    var x = 10;
    switch(x) {
      case 10: alert("Hello");
    }
    
    尝试一下
    这case switch不会显示警告:
    var x = 10;
    switch(x) {
      case "10": alert("Hello");
    }
    
    尝试一下
  • 令人困惑的加法和连接

    增加是关于添加数字。连接是关于添加字符串。在JavaScript中,两个操作都使用相同的+运算符。因此,将数字作为数字添加将产生与将数字添加为字符串不同的结果:
    var x = 10 + 5;          // x的结果是15
    var x = 10 + "5";        // x的结果是“105”
    尝试一下
    添加两个变量时,可能很难预测结果:
    var x = 10;
    var y = 5;
    var z = x + y;           // z中的结果是15
    
    var x = 10;
    var y = "5";
    var z = x + y;           // z中的结果是“105”
    尝试一下
  • 误解浮点数

    JavaScript中的所有数字都存储为64位浮点数 (浮点数)。所有编程语言(包括JavaScript)都存在精确浮点值的困难:
    var x = 0.1;
    var y = 0.2;
    var z = x + y            // z中的结果不会是0.3
    
    尝试一下
    为了解决上述问题,它有助于乘法和除法:
    var z = (x * 10 + y * 10) / 10;       // z 为 0.3
    
    尝试一下
  • 截断JavaScript字符串

    JavaScript将允许您将语句分为两行:
    var x =
    "Hello World!";
    尝试一下
    但是,在字符串中间截断语句将不起作用:
    var x = "Hello
    World!";
    
    尝试一下
    如果必须断开字符串中的语句,则必须使用“反斜杠”:
    var x = "Hello \
    World!";
    
    尝试一下
  • 错误分号

    由于错误的分号,无论x的值如何,此代码块都将执行:
    if (x == 19);
    {
      // code block  
    }
    尝试一下
  • 截断return语句

    在行尾自动关闭语句是一种默认的JavaScript行为。因此,这两个示例将返回相同的结果:
    function myFunction(a) {
      var power = 10  
      return a * power
    }
    尝试一下
    function myFunction(a) {
      var power = 10;
      return a * power;
    }
    尝试一下
    JavaScript还允许您将语句分成两行。因此,示例3也会返回相同的结果:
    function myFunction(a) {
      var
      power = 10;  
      return a * power;
    }
    尝试一下
    但是,如果你将return语句分成两行,会发生什么:
    function myFunction(a) {
      var
      power = 10;  
      return
      a * power;
    }
    尝试一下
    该功能将返回undefined!为什么?因为JavaScript认为你的意思是:
    function myFunction(a) {
      var
      power = 10;  
      return;
      a * power;
    }
    尝试一下

    说明:

    如果声明不完整,如:
    var
    JavaScript将尝试通过阅读下一行来完成该语句:
    power = 10;
    由于此声明已完成:
    return
    JavaScript会自动关闭它,如下所示:
    return;
    这是因为在JavaScript中使用分号结束(结束)语句是可选的。JavaScript将关闭行尾的return语句,因为它是一个完整的语句。
    永远不要尝试断开return语句
  • 访问具有命名索引的数组

    许多编程语言支持具有命名索引的数组。具有命名索引的数组称为关联数组(或哈希)。JavaScript并没有支持数组名为索引。在JavaScript中,数组使用编号索引:
    var person = [];
    person[0] = "John";
    person[1] = "Doe";
    person[2] = 46;
    var x = person.length;       // person.length 返回 3
    var y = person[0];           // person[0] 返回 "John"
    尝试一下

    用逗号结束定义

    对象和数组定义中的尾随逗号在ECMAScript 5中是合法的。
    对象示例:
    person = {firstName:"John", lastName:"Doe", age:46,}
    数组示例:
    points = [40, 100, 1, 5, 25, 10,];
    警告 !!Internet Explorer 8将崩溃。JSON不允许使用尾随逗号。
    JSON:
    person = {"firstName":"John", "lastName":"Doe", "age":46}
    points = [40, 100, 1, 5, 25, 10];
  • 未定义不是空的

    JavaScript对象,变量,属性和方法都可以undefined。此外,空JavaScript对象可以具有该值null。这可能会使测试对象是否为空有点困难。您可以通过测试类型是否undefined:
    if (typeof myObj === "undefined")
    尝试一下
    但是你无法测试一个对象是否是null,因为如果对象是这样会抛出undefined错误:
    if (myObj === null)
    要解决此问题,您必须测试对象是否null不是undefined。但这仍然会引发错误:
    if (myObj !== null && typeof myObj !== "undefined")
    因此,在测试null之前必须先进行测试undefined:
    if (typeof myObj !== "undefined" && myObj !== null)
    尝试一下
  • 期待块级作用域

    JavaScript 不会为每个代码块创建新的作用域。在许多编程语言中都是如此,但在JavaScript中却不是这样。此代码将显示i(10)的值,甚至是for循环块的外面:
    for (var i = 0; i < 10; i++) {
      // some code
    }
    return i;
    尝试一下