Common Errors sa JavaScript

Ang kabanata na ito ay naglalarawan ng ilang pangkaraniwang mga pagkakamali ng JavaScript.

Ang mga di inaasahan paggamit ng pagtatalaga operator

Kung ang programer ay maggamit ng di inaasahan pagtatalaga operator sa if Ang paggamit ng pagtatalaga operator sa statement na ito ay di inaasahan:=）sa halip na kumpara operator（=====），Ang programa ng JavaScript ay maaring makuha ang mga hindi inaasahang resulta.

Ang ganitong if Ang statement ay ibibigay ang false（Katugma sa inaasahan）， dahil ang x ay hindi katulad ng 10：

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

亲自试一试

Ang ganitong if Ang statement ay ibibigay ang true（Maaring hindi katugma sa inaasahan）， dahil ang 10 ay true：

var x = 0;
if (x = 10)

亲自试一试

Ang ganitong if Ang statement ay ibibigay ang false（Maaring hindi katugma sa inaasahan）， dahil ang 0 ay false：

var x = 0;
if (x = 0)

亲自试一试

Ang pagtatalaga ay palaging ibibigay ang halaga ng pinagtalagaan.

Inaasahan ang bagay na magiging loose comparison

Sa pangkaraniwang pagkumpara, ang uri ng data ay hindi mahalaga. Ang ganitong if Ang statement ay ibibigay ang true:

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

亲自试一试

Sa mahigpit na pagkumpara, ang uri ng data ay talagang mahalaga. Ang ganitong if Ang statement ay ibibigay ang false:

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

亲自试一试

May isang pangkaraniwang pagkakamali na kalimutan ang paggamit ng mahigpit na pagkumpara sa switch Ang mga statement na ito ay gumagamit ng mahigpit na pagkumpara:

Ang ganitong switch Ang mga statement na ito ay magpapakita ng popup window:

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

亲自试一试

Ang ganitong switch Ang mga statement ay hindi magpapakita ng popup window:

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

亲自试一试

Misalang pagdami at cascading

AdditionPara sa pagdamiNumbers。

Cascading (Concatenation)Para sa pagdamiString。

Sa JavaScript, ang dalawang uri ng operasyon ay gumagamit ng parehong + Operator.

Dahil dito, ang pagdami ng numero bilang numero at bilang string ay magbibigay ng magkakaibang resulta:

var x = 10 + 5;          // Ang resulta sa x ay 15
var x = 10 + "5";         // Ang resulta sa x ay "105"

亲自试一试

Kung magkakaroon ng dalawang variable na pinagsasama-sama, mahirap makita ang resulta:

var x = 10;
var y = 5;
var z = x + y;            // Ang resulta sa z ay 15
var x = 10;
var y = "5";
var z = x + y;            // Ang resulta sa z ay "105"

亲自试一试

Misalang floating point

Ang mga numero sa JavaScript ay iniimbak bilang 64-bitFloating-point numbers (Floats)。

All programming languages, including JavaScript, have difficulties handling floating-point values:

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

亲自试一试

To solve the above problem, please use multiplication and division operations:

实例

var z = (x * 10 + y * 10) / 10;       // The result in z will be 0.3

亲自试一试

Line breaks in JavaScript strings

JavaScript allows you to split a statement into two lines:

Example 1

var x =
"Hello World!";

亲自试一试

But, it is not correct to break lines in the middle of a string:

Example 2

var x = "Hello
World!";

亲自试一试

Example 3

var x = "Hello \
World!";

亲自试一试

Misplaced semicolon

Because of a misplaced semicolon, this code block will always execute regardless of the value of x:

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

亲自试一试

Line breaks in return statements

Automatically closing statements at the end of a line is the default JavaScript behavior.

That's why the following two examples return the same result:

Example 1

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

亲自试一试

Example 2

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

亲自试一试

JavaScript also allows you to split a statement into two lines.

That's why Example 3 will also return the same result:

Example 3

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

亲自试一试

But, if you put return What will happen if a statement is split into two lines:

Example 4

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

亲自试一试

This function will return undefined!

Why? Because JavaScript assumes you mean:

Example 5

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

亲自试一试

Explanation

If a statement is incomplete:

var

JavaScript will complete this statement by reading the next line:

power = 10;

But because this statement is complete:

return

JavaScript will automatically close this statement:

return;

This happens because, in JavaScript, using semicolons to close (end) statements is optional.

JavaScript closes at the end of the line return statement, because it is a complete statement itself.

So, never do this return statement is for line break.

Accessing arrays through named indices

Maraming wika ng programming ang sumusuporta sa array na may pangalang index.

Ang array na may pangalang index ay tinatawag na associative array (o hash).

JavaScript Hindi pinapayaganArray na may pangalang index.

Sa JavaScript,ArrayGumamit ngNumerical index:

实例

var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 46;
var x = person.length;          // person.length ay magiging 3
var y = person[0];              // person[0] ay magiging "Bill"

亲自试一试

Sa JavaScript,ObjectGumamit ngPangalang index。

Kung gamit mo ang pangalang index, ang JavaScript ay magrere-redefine ang array bilang standard object kapag binibisita ang array.

Pagkatapos ng awtomatikong muling paglalarawan, ang mga paraan o attribute ng array ay magiging undefined o hindi tama ang resulta:

实例

var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 46;
var x = person.length;         // person.length ay magiging 0
var y = person[0];              // person[0] ay magiging undefined

亲自试一试

Gumamit ng kumita upang tapusin ang paglalarawan

Ang pagsuway na kumita sa paglalarawan ng object at array ay mahalaga sa ECMAScript 5.

Kasong instance:

person = {firstName:"Bill", lastName:"Gates", age:62,}

Kasong instance:

points = [35, 450, 2, 7, 30, 16,];

Babala!!!

Internet Explorer 8 ay mababagsak.

Hindi pinapayagan ng JSON ang pagsuway na kumita.

JSON:

person = {firstName:"Bill", lastName:"Gates", age:62}

JSON:

points = [35, 450, 2, 7, 30, 16];

Undefined ay hindi Null

Ang JavaScript object, variable, attribute at method ay maaaring maging undefined.

Bilang karagdagan, ang halaga ng walang laman na JavaScript object ay maaaring maging: null。

Ito ay maaring magiging mahirap na tinitiyak kung ang test object ay walang laman.

Maaari mong subukan kung anong uri ang test type: undefined，tinitiyak na mayroon ang test object:

实例

if (typeof myObj === "undefined")

亲自试一试

但是您无法测试对象是否为 null，因为如果对象未定义，将抛出错误：

不正确的：

if (myObj === null)

要解决此问题，必须测试对象是否为 null，而不是未定义。

但这仍然会引发错误：

不正确的：

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

因此，在测试非 null 之前，必须先测试未定义：

正确的：

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

亲自试一试

期望块级范围

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

很多编程语言都是如此，但是 JavaScript 并非如此。

认为这段代码会返回 undefined，是新的 JavaScript 开发者的常见错误：

实例

for (var i = 0; i < 10; i++) {
  // 代码块
}
return i;

亲自试一试