JavaScript初心者がよく犯す間違い

序文

JavaScript 言語の設計上の問題はさておき、結局のところ、Brendan Eich がわずか 10 日間で設計したため、何らかの欠陥があるのは避けられません。開発者として、よくある低レベルの間違いをどのように回避できるでしょうか?この記事では、よくある間違いをいくつか挙げていますので、自分に当てはまる間違いがあるかどうか確認してください。

undefined と null の混同

JavaScript では、undefined と null はどちらも値の欠如を表すために使用できますが、この 2 つには違いがあります。 undefined は文字通り「未定義」を意味しますが、その意味は実際には未定義変数の範囲を超えています。オブジェクトの存在しないプロパティ、return ステートメントのない関数の戻り値、宣言後に値が割り当てられていない変数、または明示的に undefined に割り当てられた変数を読み取ろうとすると、すべて undefined になります。 typeof を使用して型をテストすると、文字列 'undefined' が生成されます。 Null はより純粋であり、変数は null に設定されている場合にのみこの値を持ちます。また、null はオブジェクト型です。つまり、typeof(null) の値は文字列 'object' です。

注意すべき点は、if を使って両方の値が false であると判断する場合、null==undefined は true となり、初心者には混乱することが多いことです。したがって、すべての「値なし」を undefined に設定するようにしてください。これにより、判断と区別の手間が省けます。

undefined を返す関数:

定数f = () => {}

変数の値を未定義に設定します。

x = 未定義;

プロパティが未定義かどうかを判断します。

obj.prop の型 === 'undefined'
obj.prop === 未定義

変数が未定義かどうかを判断します。

x の型 === '未定義'

変数が宣言されていても値が割り当てられていない場合、その変数の値は自動的に undefined になります。

無効と判断する必要がある場合は、同じ判断を使用します。

obj.prop === null
x === ヌル

typeof を使用すると、null はオブジェクト型であるため、判断できません。

紛らわしい数値の加算と文字列の連結

JavaScript では、+ 演算子は数値の加算と文字列の連結の両方に使用できます。 JavaScript は動的言語であるため、演算子は操作を実行する前に変数を同じデータ型に自動的に変換します。例えば：

x = 1 + 1; // 2とします

結果は 2 です。これは、両方の値が数値であるため、数値加算演算から予想される値です。

ただし、次の式の場合:

x = 1 + '1'; // "11"

最初の数字が文字列に変換されるため、結果は「11」になります。ここで、+ 演算子は数値の加算ではなく、文字列の連結に使用されます。ここでは、比較的明確な式の値を直接見ることができます。式が複数の変数で構成されている場合は、型を判断するのが困難です。

この問題を解決するには、すべての文字列を数値型に変換してから計算を実行します。例えば：

x = 1 とします。  
y = '2'とします。  
z = Number(x) + Number(y) とします。

このように実行結果は 3 になります。 Number 関数は、任意の型の値を受け入れ、数値に変換できる場合は数値を返し、そうでない場合は NaN を返します。新しい Number(...).valueOf() 関数を使用することもできます。

x = 1 とします。  
y = '2'とします。  
z = new Number(x).valueOf() + new Number(y).valueOf() とします。

new Number(...) はコンストラクターをインスタンス化するため、数値型ではなくオブジェクトを返します。元の数値型を取得する場合は、オブジェクトの valueOf メソッドを使用する必要があります。実際にはもっと簡単な方法があります:

x = 1 とします。  
y = '2'とします。  
z = +x + +y とします。

変数の前の + は、Number 関数と同じように、変数を数値、つまり NaN に変換します。

戻り文の改行の問題

JavaScript 構文では、改行は文の終わりを意味するものと規定されています。例えば：

定数を追加する = (a, b) => {  
  戻る  
  a + b;  
}
add(1,2); // 未定義

3 が返されると思っていましたが、実際には undefined が返されました。これは、関数が a + b の前にすでに return を実行しているためです。この問題を解決するには、式と return を同じ行に置くか、式を括弧内に置くという 2 つの方法があります。

定数を追加する = (a, b) => {  
  a + b を返します。  
}
// または const add = (a, b) => {  
  戻る （  
    a + b  
  );  
}

行を折り返すのに括弧が使用できるのはなぜですか?括弧内の単語は文ではなく表現であるからです。式が長い場合は、複数行に分割できます。矢印関数を使用するとより直感的になります。

定数追加 = (a, b) => a + b

矢印関数内の 1 行の式には return 効果があります。もちろん、式の周囲に括弧の層を置くこともできます。

定数追加 = (a, b) => (a + b)

この括弧は、オブジェクト リテラルを返す矢印関数では多少便利です。括弧 () がない場合、{} は関数本体の開始マーカーと終了マーカーに過ぎないからです。オブジェクト リテラルを返すには、明示的に {...} を返す必要があります。

コード行のステートメントが不完全な場合、JavaScript パーサーは次の行のステートメントを結合して解析します。例えば：

定数べき乗 = (a) => {  
  定数  
    パワー = 10;  
  ** 10 を返します。  
}
// は次のものと同等です:
定数べき乗 = (a) => {  
  定数べき乗 = 10;  
  ** 10 を返します。  
}

ただし、return などの完全なステートメントの場合、複数の行は結合されません。

return を使用して forEach ループから抜け出す

JavaScript 配列には、配列要素をループするために使用される forEach メソッドがあります。初心者は、ループを終了するために使用される for ループ内の break または continue キーワードを簡単に思いつくでしょう。しかし、申し訳ありませんが、forEach にはこれらの 2 つのキーワードはありません。では return は使えますか?使用することはできますが、その機能は関数を早期に返すことであり、continue の効果に似ており、現在のループを終了するために使用されます。ループ全体から抜け出すには、 return ではそれができません。

定数数値 = [1, 2, 3, 4, 5, 6];
まず最初にしましょう
nums.forEach(n => {
  (n % 2 === 0 ) の場合 {
    最初の偶数 = n;
    n を返します。
  }
});
console.log(firstEven); // 6

このコードの本来の目的は、最初の偶数を見つけて、見つかったらループを終了することです。しかし、ループは実際には終了しないため、最終結果は最後の偶数になります。
解決策はありますか？この場合、 for ループを使用したり、配列フィルター、find などのメソッドを使用したりできます。

要約する

JavaScript は簡単に習得できますが、注意しないと間違いを犯しやすくなります。この記事では、よくある間違いをいくつか簡単に紹介します。お役に立てれば幸いです。

上記はJavaScript初心者が陥りやすいミスの詳細です。JSについてさらに詳しく知りたい方は、123WORDPRESS.COM内の他の関連記事もぜひご覧ください！