本章指出了一些常见的 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 允许您将语句分成两行:
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>
但是,在字符串中间中断语句是行不通的:
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>
如果必须中断字符串中的语句,则必须使用“反斜杠”:
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 的默认行为 一行的末尾。
因此,这两个示例将返回相同的结果:
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>
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 也会返回相同的结果:
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 语句分成两行,例如 这:
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 认为你的意思是:
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 不允许尾随逗号。
person = {"firstName":"John", "lastName":"Doe", "age":46}
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>