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

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内の他の関連記事もぜひご覧ください!

以下もご興味があるかもしれません:
  • JavaScriptはDOMイベントハンドラをevent.jsとしてカプセル化し、低レベルのエラーが発生します。
  • Extjsの学習過程で初心者がよく遭遇する低レベルのエラーの蓄積
  • 知っておくべき 7 つのネイティブ JS エラーの種類
  • JavaScriptエラーキャプチャの詳細な説明
  • JavaScript ステートメント エラーのスロー、トライ アンド キャッチの例の分析
  • よくあるJSエラーと解決策の詳細な説明
  • JSエラー処理とデバッグ操作例の分析
  • JavaScript 初心者向けチュートリアルと Gobang アプレットの簡単な実装
  • JavaScript初心者は「new」を読む必要があります

<<:  LinuxでifconfigとaddrがIPアドレスを表示できない問題を解決する

>>:  MySQL 8.0.11 の新機能の紹介

推薦する

JS に依存せずにレスポンシブ レイアウトを実現する CSS3 モバイル vw+rem メソッド

1. はじめに(1)vw/vhの紹介使用する前に、vw と rem とは何か、その機能について簡単に...

画像の一時停止を実現するjQueryプラグイン

この記事では、画像の一時停止を実現するためのjQueryプラグインの具体的なコードを参考までに共有し...

Windows Server 2016 に Oracle をインストールする方法

1. Oracle をインストールします。インターネット上には Oracle のインストール手順が多...

ゲーム開発におけるサウンド処理にCocosCreatorを使用する方法

目次1. Cocos Creatorでのオーディオ再生の基本1. 基本2. 一般的な方法2. Coc...

HTMLページのヘッダーコードは完全に明確です

以下のコードはすべて <head>...</head> の間にあり、具体的な...

JavaScript で配列遅延評価ライブラリを実装する方法

目次概要達成方法具体的な実装評価関数の終了を決定する生成関数の範囲変換関数マップフィルター割り込み機...

CSS で高さが不明な垂直中央揃えを実装する

この記事では主に、高さが不明な垂直方向の中央揃えを CSS で実装する方法を紹介し、皆さんと共有しま...

css n番目から始まるすべての要素を取得する

具体的なコードは次のとおりです。 <div id="ボックス"> &...

さまざまなReact状態マネージャーの解釈と使用方法

まず、状態マネージャーとは何か、そしてそれが何をするのかを知る必要があります。複数のページで同じプロ...

Harborを使用してプライベートDockerリポジトリを構築する方法

目次1. オープンソースの倉庫管理ツール Harbor 2 インストール2.1 DockerとDoc...

CSS が複数のクラスに一致する方法のサンプルコード

CSSは複数のクラスにマッチする次の HTML タグ li、クラスはオープン スタイルです。私の要件...

Vue.js の計算プロパティ、監視プロパティ、ライフサイクルの詳細な説明

目次序文計算されたプロパティ計算プロパティの紹介入門ケース統計価格事例ゲッターメソッドとセッターメソ...

ウェブページのテキストデザインは、服を着た賢い女の子のようであるべきだ

<br />「この世に醜い女性はいない、あるのは怠惰な女性だけだ」これは女性の美のバイブ...

JavaScript ではおそらく switch 文を使う必要はない

目次スイッチも複雑なコードブロックもありませんPythonからのインスピレーション辞書を使用してスイ...

VUE+Express+MongoDBのフロントエンドとバックエンドの分離によるノートウォールの実現

付箋紙の壁シリーズを実現しようと思っています。シンプルなものはシンプル、複雑なものは多機能です。開発...