JavaScript 错误


目录

    显示目录


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


意外使用赋值运算符

JavaScript 程序可能会产生意想不到的结果,如果程序员 不小心使用了赋值运算符 (=),而不是比较运算符 (==) 在 if 语句中。

if 语句返回 false (如 预期)因为 x 是 不等于 10:

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparisons</h2>

<p>This returns false (as expected) because x is not equal to 10:</p>

<p id="demo"></p>

<script>
let x = 0;
document.getElementById("demo").innerHTML = Boolean(x == 10);
</script>

</body>
</html>

这个 if 语句返回 true (也许不是 正如预期的那样),因为 10 是 真的:

let x = 0;
if (x = 10)

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>This returns true (maybe not as expected), because 10 is true:</p>

<p id="demo"></p>

<script>
let x = 0;
document.getElementById("demo").innerHTML = Boolean(x = 10);
</script>

</body>
</html>

这个 if 语句返回 false (也许不是 正如预期的那样),因为 0 是 错误的:

let x = 0;
if (x = 0)

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>This if statement returns false (maybe not as expected), because 0 is false:</p>

<p id="demo"></p>

<script>
let x = 0;
document.getElementById("demo").innerHTML = Boolean(x = 0);
</script>

</body>
</html>

赋值总是返回赋值的值。


期待松散的比较

在常规比较中,数据类型并不重要。此 if 语句返回 真的:

let x = 10;
let y = "10";
if (x == y) 

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>In regular comparison, data type does not matter. This if statement returns true:</p>

<p id="demo"></p>

<script>
let x = 10;
let y = "10";
document.getElementById("demo").innerHTML = Boolean(x == y);
</script>

</body>
</html>

严格比较来说,数据类型确实很重要。此 if 语句返回 false:

let x = 10;
let y = "10";
if (x === y) 

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>In strict comparison, data type does matter. This if statement returns false:</p>

<p id="demo"></p>

<script>
let x = 10;
let y = "10";
document.getElementById("demo").innerHTML = Boolean(x === y);
</script>

</body>
</html>

忘记 switch 语句使用严格是一个常见的错误 比较:

case switch 将显示一条警报:

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>It is a common mistake to forget that switch statements use strict comparison.</p>
<p>This will work:</p>

<p id="demo"></p>

<script>
let x = 10;
switch(x) {
  case 10: document.getElementById("demo").innerHTML = "Hello";
}
</script>

</body>
</html>

case switch 不会显示警报:

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>It is a common mistake to forget that switch statements use strict comparison.</p>
<p>This will not work:</p>

<p id="demo"></p>

<script>
let x = 10;
switch(x) {
  case "10": document.getElementById("demo").innerHTML = "Hello";
}
</script>

</body>
</html>


令人困惑的加法和串联

加法是关于添加数字

串联是指添加字符串

在 JavaScript 中,这两个操作都使用相同的 + 运算符。

因此,将数字作为数字相加会产生不同的结果 将数字作为字符串相加的结果:

let x = 10;
x = 10 + 5;       // 
    Now x is 15

let y = 10;
y += "5";        
    // Now y is "105"

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>Adding a number as a number produces a different result from adding a number as a string:</p>

<p id="demo"></p>

<script>
let y = 10
y += "5";
document.getElementById("demo").innerHTML = y;
</script>

</body>
</html>

添加两个变量时,可能很难预测结果:

let x = 10;
let y = 5;
let z = x + y;     // Now z is 15

let x = 10;
let y = "5";
let z = x + y;     // Now z is "105"

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>Adding a number as a number produces a different result from adding a number as a string:</p>

<p id="demo"></p>

<script>
let x = 10;
let y = "5";
let z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

误解浮动

JavaScript 中的所有数字都存储为 64 位浮点数 (漂浮)。

所有编程语言,包括 JavaScript,都存在困难 精确的浮点值:

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>All programming languages, including JavaScript, have difficulties with precise floating point values:</p>

<p id="demo"></p>

<script>
let x = 0.1;
let y = 0.2;
let z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

为了解决上面的问题,可以使用乘法和除法:

例子

let z = (x * 10 + y * 10) / 10;       // z will be 0.3

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>All programming languages, including JavaScript, have difficulties with precise floating point values.</p>
<p>To solve the problem, it helps to multiply and divide:</p>

<p id="demo"></p>

<script>
let x = 0.1;
let y = 0.2;
let z = (x * 10 + y *10) / 10;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>


破坏 JavaScript 字符串

JavaScript 允许您将语句分成两行:

实施例1

let x =
"Hello World!";

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Breaking a JavaScript Statement</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Hello World!";
</script>

</body>
</html>

但是,在字符串中间中断语句是行不通的:

实施例2

let x = "Hello
World!";

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>
<p>Breaking a statement in the middle of a string will not work:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello 
World!";
</script>

</body>
</html>

如果必须中断字符串中的语句,则必须使用“反斜杠”:

实施例3

let x = "Hello \
World!";

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>You must use a "backslash" if you must break a statement in a string:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello \
World!";
</script>

</body>
</html>

错放分号

由于分号放错位置,该代码块将执行,无论 x 的值:

if (x == 19);
{
    // code block  
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p id="demo"></p>

<script>
let x = 5;
if (x == 19);
{
document.getElementById("demo").innerHTML = "Hello";
}
</script>

</body>
</html>

打破退货声明

在以下位置自动关闭语句是 JavaScript 的默认行为 一行的末尾。

因此,这两个示例将返回相同的结果:

实施例1

function myFunction(a) {
    let power = 10  
  return a * power
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>This example will return a correct result:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
  let power = 10
  return a * power
}
</script>

</body>
</html>

实施例2

function myFunction(a) {
    let power = 10;
  return a * power;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>This example will return a correct result:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
  let power = 10;
  return a * power;
}
</script>

</body>
</html>

JavaScript 还允许您将语句分成两行。

因此,示例 3 也会返回相同的结果:

实施例3

function myFunction(a) {
    let
  power = 10;  
  return a * power;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>This example will return a correct result:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
  let
  power = 10;
  return a * power;
}
</script>

</body>
</html>

但是,如果将 return 语句分成两行,例如 这:

实施例4

function myFunction(a) {
    let
  power = 10;  
  return
  a * power;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>This example will return undefined:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
  let
  power = 10;
  return
  a * power;
}
</script>

</body>
</html>

该函数将返回未定义

为什么?因为 JavaScript 认为你的意思是:

实施例5

function myFunction(a) {
    let
  power = 10;  
  return;
  a * power;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>This example will return undefined:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
  let
  power = 10;
  return;
  a * power;
}
</script>

</body>
</html>

解释

如果声明不完整,例如:

let

JavaScript 将尝试通过读取下一行来完成该语句:

 power = 10;

但既然这个声明已经完成:

 return

JavaScript 会自动关闭它,如下所示:

 return;

发生这种情况是因为用分号结束(结束)语句是可选的 JavaScript。

JavaScript 将在行尾关闭 return 语句,因为 这是一个完整的陈述。

切勿破坏 return 语句。


使用命名索引访问数组

许多编程语言支持具有命名索引的数组。

具有命名索引的数组称为关联数组 数组(或哈希)。

JavaScript 支持具有命名索引的数组。

在 JavaScript 中,数组使用编号索引

例子

const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length;       
 // person.length will return 3
person[0];           
 // person[0] will return "John"

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

<script>
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>

</body>
</html>

在 JavaScript 中,对象使用命名索引

如果使用命名索引,当访问数组时,JavaScript会重新定义 数组到标准对象。

自动重定义后,数组方法和属性会产生 undefined 或 不正确的结果:

例子 :

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>If you use a named index when accessing an array, JavaScript will redefine the array to a standard object, and some array methods and properties will produce undefined or incorrect results.</p>

<p id="demo"></p>

<script>
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>

</body>
</html>


以逗号结束定义

对象和数组定义中的尾随逗号在 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}

JSON:

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

未定义不为空

JavaScript 对象、变量、属性和方法可以是未定义的

此外,空 JavaScript 对象可以具有值 null

这可能会使测试对象是否为空变得有点困难。

您可以通过测试类型是否为 undefined 来测试对象是否存在:

例子 :

if (typeof myObj === "undefined") 

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>To test if an object does not exist, test if the type is undefined:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = typeof myObj === "undefined";
</script>

</body>
</html>

但是你不能测试一个对象是否为 null,因为如果 对象未定义

错误:

if (myObj === null)  

要解决这个问题,您必须测试一个对象是否不为 null, 而不是未定义

但这仍然会引发错误:

错误:

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

因此,您必须先测试是否未定义,然后才能 测试非 null

正确的 :

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>If you want to test if an object is not null, you must test if it not undefined first.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = typeof myObj !== "undefined" && myObj !== null;
</script>

</body>
</html>