Image

TECH I.S.

TECH I.S
TECH I.S
TECH I.S
TECH I.S

よくある間違い

この章では、JavaScriptのよくある間違いを指摘します。

代入演算子の誤った使用

プログラマがifステートメントで、比較演算子(==)の代わりに誤って代入演算子(=)を使用すると、 JavaScriptプログラムで予期しない結果が生成されることがあります 。

xが10に等しくないため、このifステートメントはfalseを返します。

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

10がtrueであるため、次のifステートメントはtrue(期待どおりではないかもしれません)を返します。

let x = 0; if (x = 10)

0はfalseであるため、このifステートメントはfalse(期待どおりではない可能性があります) を返します。

let x = 0; if (x = 0)

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

緩やかな比較を期待

通常の比較では、データ型は関係ありません。このifステートメントはtrueを返します。

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

厳密な比較では、データ型が重要です。このifはfalseを返します。

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

switchステートメントで厳密な比較が使用されていることを忘れてしまうのは、よくある間違いです。

これにより、case switchアラートが表示されます。

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

これにより、case switchアラートを表示しません。

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

紛らわしい加算と連結

足し算は数字を足し算することです。

連結とは文字列を追加することです。

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

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

let x = 10; x = 10 + 5;       // Now x is 15 let y = 10; y += "5";        // Now y is "105"

2つの変数を追加する場合、結果を予測するのが難しい場合があります。

let x = 10; let y = 5; let z = x + y;     // Now z is 15 let x = 10; let y = "5"; let z = x + y;     // Now z is "105"

誤解されたフロート

JavaScriptのすべての数値は、64ビット浮動小数点数(Float)として保存されます。

JavaScriptを含むすべてのプログラミング言語では、正確な浮動小数点値を扱うのが困難です。

let x = 0.1; let y = 0.2; let z = x + y            // the result in z will not be 0.3

上記の問題を解決するには、乗算と除算が役立ちます。

例

let z = (x * 10 + y * 10) / 10;       // z will be 0.3

JavaScript 文字列の分割

JavaScriptでは、ステートメントを2行に分割できます。

例1

let x = "Hello World!";

ただし、文字列の途中でステートメントを分割しても機能しません。

例2

let x = "Hello World!";

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

例3

let x = "Hello \ World!";

セミコロンの置き忘れ

セミコロンの位置が間違っているため、このコードブロックはxの値に関係なく実行されます。

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

リターンステートメントを破る

行末でステートメントを自動的に閉じるのは、JavaScriptのデフォルトの動作です。

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

例1

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

例2

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

JavaScriptでは、ステートメントを2行に分割することもできます。

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

例3

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

しかし、次のようにreturnステートメントを2行に分割するとどうなるでしょうか。

例4

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

関数は、undefinedを返します!

なぜならJavaScriptがあなたの意図を次のように判断したためです。

例5

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

説明

ステートメントが次のように不完全な場合:

let

JavaScriptは、次の行を読み取ってステートメントを完成させようとします。

power = 10;

しかし、このステートメントは完全であるため、次のようになります。

return

JavaScriptは次のように自動的に閉じます。

return;

これは、JavaScriptではセミコロンでステートメントを閉じる(終了する)ことがオプションであるために発生します。

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

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

名前付きインデックスを使用した配列へのアクセス

多くのプログラミング言語は、名前付きインデックスを持つ配列をサポートしています。

名前付きインデックスを持つ配列は、連想配列(またはハッシュ)と呼ばれます。

JavaScriptは名前付きインデックスを持つ配列をサポートしていません。

JavaScriptでは、配列は番号付きインデックスを使用します。:

例

const person = []; person[0] = "John"; person[1] = "Doe"; person[2] = 46; person.length;       // person.length will return 3 person[0];           // person[0] will return "John"

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

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

自動再定義の後、配列のメソッドとプロパティは未定義または不正確な結果を生成します。

例：

const person = []; person["firstName"] = "John"; person["lastName"] = "Doe"; person["age"] = 46; person.length;      // person.length will return 0 person[0];          // person[0] will return undefined

カンマで定義を終了する

ECMAScript5では、オブジェクトと配列の定義の末尾のカンマは有効です。

オブジェクトの例:

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

配列の例:

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

警告 ！！

Internet Explorer8がクラッシュします。

JSONでは、末尾のコンマを使用できません。

JSON:

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

JSON:

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

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

JavaScriptのオブジェクト、変数、プロパティ、およびメソッドは、undefinedです。

さらに、空のJavaScriptオブジェクトはnull値を持つことができます。

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

型が未定義かどうかテストすることで、オブジェクトが存在するかどうかをテストできます。:

例：

if (typeof myObj === "undefined") 

ただし、オブジェクトがnullかどうかをテストすることはできません、オブジェクトがundefinedの場合にエラーがスローされるためです。:

正しくない：

if (myObj === null) 

この問題を解決するには、オブジェクトがnullではないか、undefinedではないかをテストする必要があります。.

ただし、これでもエラーが発生する可能性があります。

正しくない：

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

このため、notをundefinedでテストする前にnotをnullでテストする必要があります。:

正しい：

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



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう！

スクールの詳細

チュートリアル