JavaScript错误

本章指出了一些常见的JavaScript错误.

意外使用赋值运算符

avaScript程序可能如果程序员不小心使用赋值运算符（=）产生意想不到的结果，而不是一个比较运算符（==）在一个if语句.

if语句返回false（如预期），因为x不等于10:

var x = 0;
if (x == 10)

让我试试

if语句返回true（可能不如预期），因为10是true:

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语句使用严格的比较:

这种情况下switch将显示一个警报:

var x = 10;
switch(x) {
    case 10: alert("Hello");
}

让我试试

这种情况下switch将不会显示警报:

var x = 10;
switch(x) {
    case "10": alert("Hello");
}

让我试试

混淆加和连接

加法是关于两个数相加.

连接是将两个字符串连接起来.

在JavaScript中两个操作都有+号操作符.

因此，相加一个数字和相加一个字符串数字会产生不同的结果。

var x = 10 + 5;          // the result in x is 15
var x = 10 + "5";        // the result in x is "105"

让我试试

当添加两个变量，它可以很难预期的结果:

var x = 10;
var y = 5;
var z = x + y;           // the result in z is 15

var x = 10;
var y = "5";
var z = x + y;           // the result in z is "105"

让我试试

误解浮点类型

在JavaScript中所有的数据都存储为64位浮点数(Floats).

所有的编程语言，包括JavaScript，获得精确的浮点值都是有困难的:

var x = 0.1;
var y = 0.2;
var z = x + y            // the result in z will not be 0.3

让我试试

为了解决上述问题，它有助于乘法和除法:

var z = (x * 10 + y * 10) / 10;       // z will be 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 will return 3
var y = person[0];             // person[0] will return "John"

让我试试

在JavaScript中，对象使用命名的索引.

如果你使用一个名为索引，访问数组时，JavaScript将重新定义数组对象的标准。

自动重新定义后，数组的方法和属性将产生未定义的或不正确的结果:

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;         // person.length will return 0
var y = person[0];             // person[0] will return undefined

让我试试

用逗号结束数组定义

不正确

points = [40, 100, 1, 5, 25, 10,];

Some JSON and JavaScript engines will fail, or behave unexpectedly.

正确:

points = [40, 100, 1, 5, 25, 10];

用逗号结束对象定义

不正确:

person = {firstName:"John", lastName:"Doe", age:46,}

一些JSON和JavaScript引擎会失败，或出现意外行为.

正确:

person = {firstName:"John", lastName:"Doe", age:46}

未定义不是空

JavaScript中, null 针对对象, undefined 用于变量、属性和方法。

要是null, 对象必须是定义的, 否则将是 undefined.

如果要测试对象是否存在，如果对象未定义，这将引发一个错误:

不正确:

if (myObj !== null && typeof myObj !== "undefined")

因此，你必须首先测试typeof:

正确:

if (typeof myObj !== "undefined" && myObj !== null)

异常块的作用域

JavaScript 不为每个代码块创建新的作用域

在其他编程语言里是这样，但是在JavaScript中不是.

这是一个常见的错误，新的JavaScript开发人员，相信这个代码返回未定义:

for (var i = 0; i < 10; i++) {
    // some code
}
return i;

让我试试