JavaScript 使用上の誤解

この章では、JavaScript の使用上の誤解について説明します。


代入演算子の適用エラー

JavaScript プログラムで、if 条件文の中で代入演算子の等号 (=) を使用すると、誤った結果になります。正しい方法は、比較演算子の等号2つ (==) を使用することです。

if条件文は次を返しますfalse(予想どおり) x が 10 に等しくないため:

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

試してみる »

if条件文は次を返しますtrue(予想に反して) 条件文が x に 10 を代入するため、10 は true です:

var x = 0;
if (x = 10)

試してみる »

if条件文は次を返しますfalse(予想に反して) 条件文が x に 0 を代入するため、0 は false です:

var x = 0;
if (x = 0)

試してみる »
Note 代入文は変数の値を返します。

比較演算子のよくあるエラー

通常の比較では、データ型は無視されます。次の if 条件文は true を返します:

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

試してみる »

厳密な比較演算では、=== は厳密等価演算子であり、式の値と型の両方をチェックします。次の if 条件文は false を返します:

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

試してみる »

この種のエラーは switch 文でよく発生します。switch 文は厳密等価演算子 (===) を使用して比較します:

次の例では alert ポップアップが実行されます:

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

試してみる »

次の例では、型が一致しないため alert ポップアップは実行されません:

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

試してみる »

加算と連結の注意事項

加算2つの数値を加算することです。

連結2つの文字列を連結することです。

JavaScript では加算と連結の両方に + 演算子を使用します。

次に、例を使用して、2つの数値の加算と、数値と文字列の連結の違いを見てみましょう:

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 ビットの浮動小数点データ (float)として格納されます。

JavaScript を含むすべてのプログラミング言語は、浮動小数点データの精度を正確に保証することが困難です。

var x = 0.1;
var y = 0.2;
var z = x + y            // z の結果は 0.30000000000000004
if (z == 0.3)            // false を返す

試してみる »

上記の問題を解決するには、整数の乗算と除算を使用できます:

例

var z = (x * 10 + y * 10) / 10;       // z の結果は 0.3

試してみる »

詳細は以下を参照してください:JavaScript における精度問題とその解決策


JavaScript 文字列の改行

JavaScript では、文字列内で改行を使用できます:

例1

var x =
"Hello World!";

試してみる »

ただし、文字列内で直接改行(エンターキーによる改行)を使用するとエラーになります:

例2

var x = "Hello
World!"
;

試してみる »

開発者ツールを開くか、F12キーを押してエラーメッセージを確認できます:

文字列の改行にはバックスラッシュ(\)を使用する必要があります。次のように:

例3

var x = "Hello \
World!"
;

試してみる »

セミコロンの誤った使用

次の例では、if 文が本体を失い、元の if 文の本体が独立したコードブロックとして実行され、誤った出力結果になります。

セミコロンの使い方が誤っているため、if 文内のコードブロックが必ず実行されます:

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

試してみる »

return文の使用上の注意

JavaScript は既定では行の末尾で自動的に文を終了します。

次の2つの例は同じ結果を返します(1つはセミコロンあり、もう1つはなし):

例1

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

試してみる »

例2

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

試してみる »

JavaScript では、1つの文を複数行で表すこともできます。つまり、文を複数行に分割できるということです。

次の例は同じ結果を返します:

例3

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

試してみる »

ただし、次の例の結果はundefined:

例4

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

試してみる »

なぜこのような結果になるのでしょうか? JavaScript では、例4のコードは次のコードと同じだからです:

function myFunction(a) {
    var
    power = 10;  
    return;       // 分号结束,返回 undefined
    a * power;
}

解説

不完全な文の場合、次のようになります:

var

JavaScript は2行目の文を読み取ろうとします:

power = 10;

しかし、このような文は完全であるため:

return

JavaScript は自動的に文を閉じます:

return;

JavaScript では、セミコロンは省略可能です。

return は完全な文であるため、JavaScript は return文を閉じます。

Note 注意:return文では改行しないでください。

配列で名前をインデックスとして使用する

多くのプログラミング言語では、配列のインデックスとして名前を使用できます。

名前をインデックスとして使用する配列は、連想配列(またはハッシュ)と呼ばれます。

JavaScript では配列のインデックスに名前を使用することはできず、数値インデックスのみが許可されています。

例

var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;         // person.length は 3 を返す
var y = person[0];             // person

試してみる »

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

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

この操作を行うと、配列のメソッドとプロパティは使用できなくなり、使用するとエラーが発生します:

例

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;         // person.length は 0 を返す
var y = person[0];             // person

試してみる »

配列要素を定義するとき、最後にカンマを付けてはいけません

配列の最後の値の後にカンマを追加しても構文的には問題ありませんが、ブラウザによって異なる結果が得られる場合があります。

var colors = [5, 6, 7,]; //这样数组的长度可能为3 也可能为4。

正しい定義方法:

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

オブジェクトを定義するとき、最後にカンマを付けてはいけません

誤った定義方法:

websites = {site:"サンプル", url:"www.example.com", like:460,}

正しい定義方法:

websites = {site:"サンプル", url:"www.example.com", like:460}

Undefined は Null ではない

JavaScript では、nullnull はオブジェクトに使用され、undefinedundefined は変数、プロパティ、メソッドに使用されます。

オブジェクトは定義されている場合のみ null になる可能性があり、定義されていなければ undefined です。

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

誤った使用例:

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

正しい方法は、まず typeof を使ってオブジェクトが定義されているかどうかを確認することです:

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

ブロックスコープ

各コードブロック内で JavaScript は新しいスコープを作成しません。通常、各コードブロックのスコープはグローバルです。

以下のコードの変数 i は undefined ではなく 10 を返します:

例

for (var i = 0; i < 10; i++) {
    // some code
}
return i;

試してみる »
その他の拡張