JavaScriptの一般的なエラー
- 前のページ JS ベストプラクティス
- 次のページ JS パフォーマンス
本章では、一般的な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!";
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;
- 前のページ JS ベストプラクティス
- 次のページ JS パフォーマンス