JavaScript の使用に関する誤解

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

代入演算子の不適切な適用

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

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

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 0;
document.getElementById("demo").innerHTML = Boolean(x == 10);
</script>

</body>
</html>

インスタンスの実行»

[インスタンスの実行] ボタンをクリックして、オンラインインスタンスを表示します

if 条件ステートメントは、値 10 をオンラインインスタンスに割り当てるために実行されるため、

を返します (期待したものではありません)

if 条件ステートメントは false

を返す(期待とは異なります) 条件付きステートメントの実行では x に 0 の値が割り当てられるため、0 は false:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 0;
document.getElementById("demo").innerHTML = Boolean(x = 10);
</script>

</body>
</html>

インスタンスの実行»

オンラインの例を表示するには、[例の実行] ボタンをクリックしてください

代入ステートメントは変数の値を返します。

比較演算子に関する一般的なエラー

通常の比較では、次の if 条件文は無視されます:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 0;
document.getElementById("demo").innerHTML = Boolean(x = 0);
</script>

</body>
</html>

インスタンスの実行»

[インスタンスの実行] ボタンをクリックして表示します。オンラインの例

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

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 10;
var y = "10";
document.getElementById("demo").innerHTML = Boolean(x == y);
</script>

</body>
</html>

例»

オンラインインスタンスを表示するには、[インスタンスの実行] ボタンをクリックします

この種のエラーは、switch ステートメントで比較に恒等演算子 (===) を使用することがよくあります。次の例では、アラートポップアップウィンドウが実行されます:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 10;
var y = "10";
document.getElementById("demo").innerHTML = Boolean(x === y);
</script>

</body>
</html>

インスタンスの実行»
オンラインインスタンスを表示するには、[インスタンスの実行] ボタンをクリックします

次のインスタンスではアラートポップアップは実行されませんタイプが一致しないため:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 10;
switch(x) {
    case 10: alert("Hello");
}
</script>

</body>
</html>

インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

追加と接続に関する注意事項

追加

は、 2 つの数字。

連結

は、2つの文字列を連結します。 JavaScript では、加算と連結の両方に + 演算子を使用します。

次に、例を通して 2 つの数値の加算と数値と文字列の連結の違いを確認します:

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 10;
switch(x) {
    case "10": alert("Hello");
}
</script>

</body>
</html>

例の実行»
オンライン例を表示するには、[インスタンスの実行] ボタンをクリックしてください

変数を追加した結果も一貫性がありません:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 10 + "5";
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

サンプルの実行»
オンラインサンプルを表示するには、「サンプルの実行」ボタンをクリックしてください

浮動小数点データの使用に関する注意事項

すべてのデータJavaScript では、それらはすべて 64 ビット浮動小数点データ (float) に格納されます

。

JavaScript を含むすべてのプログラミング言語では、浮動小数点データの精度を判断することが困難です:

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 10;
var y = "5";
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

サンプルの実行»

オンラインサンプルを表示するには、[インスタンスの実行] ボタンをクリックしてください

上記の問題は、整数の乗算と除算を使用して解決できます。

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 0.1;
var y = 0.2;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

実行例»
「実行例」ボタンをクリックしてオンライン例を表示します

JavaScript文字列分割

JavaScript実行文字列内で改行ステートメントを使用します:

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 0.1;
var y = 0.2;
var z = (x * 10 + y *10) / 10;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

実行例»

「インスタンスの実行」ボタンをクリックして、オンラインインスタンスを表示します

ただし、文字列内でキャリッジリターンとラインフィードを直接使用すると、エラーが報告されます:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
	"Hello World!";
</script>

</body>
</html>

Run Instance »

「インスタンスの実行」をクリックしますボタンをクリックしてオンライン例を表示します

開発ツールを選択するか、F12 を押してエラーメッセージを表示します:

QQ截图20161017174526.png

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

セミコロンの間違った使用

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>about:newtab

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello 
World!";
</script>

</body>
</html>

例の実行»

オンラインの例を表示するには、[例の実行]ボタンをクリックしてください

次の例では、間違っているため、セミコロンを使用すると、if ステートメント内のコードブロックは実行されません:

Return ステートメントの使用に関する注意事項

デフォルトでは、JavaScript はコードの最後の行で自動的に終了します。

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

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 5;
if (x == 19);{
	document.getElementById("demo").innerHTML = "Hello";
}
</script>

</body>
</html>

インスタンスの実行»

オンラインインスタンスを表示するには、[インスタンスの実行] ボタンをクリックします

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
    var power = 10
    return a * power
}
</script>

</body>
</html>

サンプルの実行»

オンラインサンプルを表示するには、「サンプルの実行」ボタンをクリックしてください

JavaScriptでは、複数の行を使用してステートメントを終了することもできます。

次のインスタンスは同じ結果を返します:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
    var power = 10;
    return a * power;
}
</script>

</body>
</html>

インスタンスの実行»

オンラインインスタンスを表示するには、[インスタンスの実行] ボタンをクリックします

ただし、次のインスタンスの結果は 未定義 を返します。 :

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
    var
    power = 10;
    return a * power;
}
</script>

</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

なぜそのような結果が出るのでしょうか？ JavaScript では、例 4 のコードは次のコードと一致しているためです:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
    var
    power = 10;
    return
    a * power;
}
</script>

</body>
</html>

Parse

不完全なステートメントの場合は、次のようになります:

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

JavaScript はステートメントの 2 行目の読み取りを試みます:

var

ただし、次のようなステートメントが完了しているため:

power = 10;

JavaScript はステートメントを自動的に閉じます:

return

JavaScript では、セミコロンはオプションです。

return は完全なステートメントであるため、JavaScript は return ステートメントを閉じます。

	注: return ステートメントを中断する必要はありません。

配列のインデックスに名前を使用する

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

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

JavaScript は配列のインデックスに名前を使用することをサポートしていません。数値インデックスのみが許可されます。

インスタンス

return;

インスタンスの実行 »

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

JavaScriptでは、オブジェクトはその名前を使用してインデックス付けされます。

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

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

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46; 
document.getElementById("demo").innerHTML =
	person[0] + " " + person.length;
</script>

</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックして表示しますオンラインインスタンス

配列要素を定義する場合、最後にカンマを追加することはできません

間違った定義方法:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>
如果你使用名字作为索引，当访问数组时，JavaScript 会把数组重新定义为标准对象，数组的方法及属性将不能再使用，否则会产生错误:。
</p>
<p id="demo"></p>
<script>
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46; 
document.getElementById("demo").innerHTML =
	person[0] + " " + person.length;
</script>

</body>
</html>

正しい定義方法:

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

オブジェクトを定義する場合、最後にカンマを追加することはできません最後に

間違った定義方法:

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

正しい定義方法:

websites = {site:"php中文网", url:"www.php.cn", like:460,}

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

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

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

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

間違った使用方法:

websites = {site:"php中文网", url:"www.php.cn", like:460}

正しい方法は、オブジェクトが定義されているかどうかを検出するために最初に typeof を使用する必要があるということです:

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

ブロックスコープ

JavaScript は各コードブロックドメインに新しいロールを作成しません。一般に、各コードブロックのスコープはグローバルです。

次のコードの変数 i は、未定義ではなく 10 を返します:

インスタンス

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

インスタンスの実行 »

オンラインインスタンスを表示するには、[インスタンスの実行] ボタンをクリックします

← JavaScript 厳密モード

JavaScript フォームの検証 →

提出する

JavaScript の使用に関する誤解

代入演算子の不適切な適用

Instance

を返します (期待したものではありません)

オンラインの例を表示するには、[例の実行] ボタンをクリックしてください

比較演算子に関する一般的なエラー

インスタンス

例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p id="demo"></p> <script> var x = 10; var y = "10"; document.getElementById("demo").innerHTML = Boolean(x === y); </script> </body> </html>

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p id="demo"></p> <script> var x = 10; switch(x) { case 10: alert("Hello"); } </script> </body> </html>

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p id="demo"></p> <script> var x = 10; switch(x) { case "10": alert("Hello"); } </script> </body> </html>

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p id="demo"></p> <script> var x = 10 + "5"; document.getElementById("demo").innerHTML = x; </script> </body> </html>

すべてのデータJavaScript では、それらはすべて 64 ビット浮動小数点データ (float) に格納されます

実行例»「実行例」ボタンをクリックしてオンライン例を表示します

JavaScript文字列分割

例

Instance

セミコロンの間違った使用

例

Return ステートメントの使用に関する注意事項

インスタンス

インスタンス

インスタンス

インスタンス

Parse

配列のインデックスに名前を使用する

インスタンス

インスタンス

配列要素を定義する場合、最後にカンマを追加することはできません

オブジェクトを定義する場合、最後にカンマを追加することはできません最後に

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

ブロックスコープ

インスタンス

PHP中国語ウェブサイト

実行例»
「実行例」ボタンをクリックしてオンライン例を表示します