JavaScriptの一般的なエラー

本章では、一般的なJavaScriptエラーをいくつか指摘します。

予期せぬ代入演算子を使用すると、

プログラマーが if 文で予期せぬ代入演算子が使用されます:=)ではなく、比較演算子(===),JavaScriptプログラムは予期せぬ結果を生成する可能性があります。

文はポップアップを表示しません: 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";
ある一般的なエラーは、 

自分で試してみる

文では厳密な比較を使用します: switch 文はポップアップを表示します:

文はポップアップを表示しません: switch この

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

自分で試してみる

文はポップアップを表示しません: switch この

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

自分で試してみる

混乱させる加法と連結

加法を加数値

連結(Concatenation)を加文字列

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ビットで保存されます。浮動小数点数(Floats)

すべてのプログラミング言語、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は文を改行することを許可しています:

例1

var x =
"Hello World!";

自分で試してみる

しかし、文字列の中間で改行することは間違っています:

例2

var x = "Hello
World!";

自分で試してみる

文字列の中で改行する必要がある場合は、必ず反斜線を使用する必要があります:

例3

var x = "Hello ",
World!";

自分で試してみる

分号の位置が間違っている

誤った分号があるため、このコードブロックはxの値に関わらず常に実行されます:

if (x == 19);
{
     //コードブロック
}

自分で試してみる

return文に改行を入れる

行の終わりで自動的に文を閉じるのは、デフォルトのJavaScriptの行動です。

そのため、以下の2つの例は同じ結果を返します:

例1

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

自分で試してみる

例2

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

自分で試してみる

JavaScriptは文を改行することも許可しています。

そのため、例3も同じ結果を返します:

例3

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

自分で試してみる

しかし、以下のを return 文を改行にすることで何が起こりますか:

例4

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

自分で試してみる

この関数は以下を返します undefined

なぜでしょうか?なぜなら、JavaScriptはあなたの意図を以下のように解釈するからです:

例5

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] = "Bill";
person[1] = "Gates";
person[2] = 46;
var x = person.length;          // person.length は 3 を返します
var y = person[0];              // person[0] は "Bill" を返します

自分で試してみる

JavaScript では、オブジェクトを使用します名前付きインデックス

名前付きインデックスを使用している場合、JavaScript は配列を標準オブジェクトとして再定義します。

自動再定義の後、配列メソッドや属性は未定義または不正な結果を生成します:

インスタンス

var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 46;
var x = person.length;         // person.length は 0 を返します
var y = person[0];              // person[0] は undefined を返します

自分で試してみる

定義を終えるためにコンマを使用します

オブジェクトや配列の定義中の末尾のコンマは ECMAScript 5 では合法です。

オブジェクトのインスタンス:

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

配列のインスタンス:

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

警告!!

Internet Explorer 8 はクラッシュします。

JSON は末尾のコンマを許可しません。

JSON:

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

JSON:

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

Undefined は Null ではありません

JavaScript オブジェクト、変数、属性、メソッドは未定義の可能性があります。

さらに、空の JavaScript オブジェクトの値は null

これにより、テストオブジェクトが空であるかどうかを判断するのが少し難しくなる可能性があります。

テストのタイプが undefinedオブジェクトが存在するかをテストするために:

インスタンス

if (typeof myObj === "undefined")

自分で試してみる

しかし、オブジェクトが未定義であるかどうかをテストすることはできません null、なぜなら、オブジェクトが未定義であればエラーが発生するからです:

誤り:

if (myObj === null)

この問題を解決するには、オブジェクトが 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;

自分で試してみる