最新のWeb開発のチュートリアル
×

JS チュートリアル

JS HOME JS 導入 JS どこへ JS 輸出 JS 構文 JS ステートメント JS 注釈 JS 変数 JS 演算子 JS 算術 JS 割り当て JS データの種類 JS 機能 JS オブジェクト JS 範囲 JS イベント JS ストリング JS 文字列メソッド JS 数字 JS 数のメソッド JS 数学 JS 日付 JS 日付形式 JS 日付の方法 JS 配列 JS アレイ方式 JS ブール値 JS 比較 JS 条件 JS スイッチ JS ループ For JS ループしながら JS ブレーク JS 型変換 JS 正規表現 JS エラー JS デバッギング JS 巻き上げ JS strictモード JS スタイルガイド JS ベストプラクティス JS 間違い JS パフォーマンス JS 予約語 JS JSON

JS フォーム

フォームバリデーション フォームAPI

JS オブジェクト

オブジェクト定義 オブジェクトのプロパティ オブジェクトメソッド オブジェクトプロトタイプ

JS 機能

関数定義 ファンクションのパラメータ 関数の呼び出し 関数クロージャ

JS HTML DOM

DOM イントロ DOM メソッド DOM 資料 DOM 要素 DOM HTML DOM CSS DOM アニメーション DOM イベント DOM EventListener DOM ナビゲーション DOM ノード DOM ノードリスト

JS ブラウザ BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS

JS 例 JS HTML DOM JS HTML 入力 JS HTML オブジェクト JS HTML イベント JS ブラウザ JS クイズ JS 概要

JS リファレンスマニュアル

JavaScript オブジェクト HTML DOM オブジェクト


 

JavaScriptよくある間違い


この章では、いくつかの一般的なJavaScriptの間違いを指摘しています。


誤って代入演算子を使用して

プログラマが誤って代入演算子使用している場合はJavaScriptプログラムが予期しない結果を生成することがあります(=)の代わりに、比較演算子の、 (==) if文で。

このifのステートメントを返しfalse 、xが10に等しくないので、(期待通りに):

このif文が返すtrue 10が真であるので、(多分期待されないように):

このifのステートメントを返すfalse 0がfalseであるため、(多分期待されないように):

代入は常に代入の値を返します。


ルースの比較を期待

定期的な比較では、データ型は重要ではありません。 この文を返す場合true

var x = 10;
var y = "10";
if (x == y)
»それを自分で試してみてください

厳密な比較では、データ型は問題ありません。 この文を返す場合false

var x = 10;
var y = "10";
if (x === y)
»それを自分で試してみてください

switch文は、厳密な比較を使用することを忘れることはよくある間違いです。

この場合、スイッチは、警告が表示されます。

var x = 10;
switch(x) {
    case 10: alert("Hello");
}
»それを自分で試してみてください

この場合、スイッチは、警告が表示されません。

var x = 10;
switch(x) {
    case "10": alert("Hello");
}
»それを自分で試してみてください

混乱追加&連結

さらには、 数字を追加することについてです。

連結は 、文字列を追加することについてです。

JavaScriptでは両方の操作は、同じ+演算子を使用します。

このため、数値として番号を追加すると、文字列として番号を追加することから異なる結果が生成されます。

var x = 10 + 5;          // the result in x is 15
var x = 10 + "5";        // the result in x is "105"
»それを自分で試してみてください

2つの変数を追加する場合、結果を予測することは困難です。

var x = 10;
var y = 5;
var z = x + y;           // the result in z is 15

var x = 10;
var y = "5";
var z = x + y;           // the result in z is "105"
»それを自分で試してみてください

誤解フロート

JavaScriptの中の数字はすべて64ビットの浮動小数点数 (フロート)として保存されます。

JavaScriptを含むすべてのプログラミング言語は、正確な浮動小数点値との難しさを持っています:

var x = 0.1;
var y = 0.2;
var z = x + y            // the result in z will not be 0.3
if (z == 0.3)            // this if test will fail
»それを自分で試してみてください

上記課題を解決するために、それは、乗算と除算のに役立ちます。

var z = (x * 10 + y * 10) / 10;       // z will be 0.3
»それを自分で試してみてください

JavaScriptの文字列を壊します

JavaScriptは、あなたが2行に文を破ることができます:

しかし、文字列の途中で文を破壊することは動作しません。

あなたは、文字列内のステートメントを破る必要がある場合には、「バックスラッシュ」を使用する必要があります。

例3

var x = "Hello \
World!";
»それを自分で試してみてください

入れ違いセミコロン

そのため置き忘れセミコロン、このコードブロックは、xの値にかかわらず実行されます:

if (x == 19);
{
    // code block 
}
»それを自分で試してみてください

returnステートメントを壊します

行の末尾に自動的に文を閉じるためにデフォルトのJavaScriptの動作です。

このため、これらの2つの例は同じ結果を返します。

例1

function myFunction(a) {
    var power = 10 
    return a * power
}
»それを自分で試してみてください

例2

function myFunction(a) {
    var power = 10;
    return a * power;
}
»それを自分で試してみてください

JavaScriptはまた、あなたが2行に文を破ることができます。

このため、実施例3も同じ結果を返します。

例3

function myFunction(a) {
    var
    power = 10; 
    return a * power;
}
»それを自分で試してみてください

あなたはこのような2行にreturn文を破るなら、何が起こるのだろう。

例4

function myFunction(a) {
    var
    power = 10; 
    return
    a * power;
}
»それを自分で試してみてください

この関数は未定義を返します!

どうして? 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] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;         // person.length will return 3
var y = person[0];             // person[0] will return "John"
»それを自分で試してみてください

JavaScriptでは、使用という名前のインデックスオブジェクト

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

自動再定義した後、配列のメソッドとプロパティが定義されていないか、誤った結果が生成されます。

例:

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;         // person.length will return 0
var y = person[0];             // person[0] will return undefined
»それを自分で試してみてください

カンマと配列定義を終了

誤:

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

いくつかのJSONとJavaScriptエンジンが失敗、または予期しない動作をします。

正しい:

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

カンマでオブジェクト定義を終了

誤:

person = {firstName:"John", lastName:"Doe", age:46,}

いくつかのJSONとJavaScriptエンジンが失敗、または予期しない動作をします。

正しい:

person = {firstName:"John", lastName:"Doe", age:46}

未定義はNULLではありません

JavaScriptで、nullは 未定義の変数 、プロパティ、メソッドのためのものである、オブジェクトのためのものです。

ヌルであるためには、オブジェクトを定義する必要があり、それ以外の場合は未定義になります。

あなたは、オブジェクトが存在するかどうかをテストしたい場合は、オブジェクトが定義されていない場合、これはエラーがスローされます。

誤:

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

このためには、まず)(typeof演算をテストする必要があります。

正しい:

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

期待ブロックレベルのスコープ

JavaScriptは、各コードブロックのための新しいスコープを作成しません

これは、JavaScriptでの多くのプログラミング言語での真のではなく本当です。

それは、このコードはundefinedを返していることを信じて、新しいJavaScript開発者の間で、共通の間違いです。

for (var i = 0; i < 10; i++) {
    // some code
}
return i;
»それを自分で試してみてください