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 の新機能の紹介

推薦する

MySQLクエリのパフォーマンスを分析する方法

目次スロークエリの基礎: データ取得の最適化データベースから不要なデータが要求されていないか確認する...

MySQL に 1,000 万件のレコードを素早く挿入する方法

面接で「MySQL に 1,000 万件のレコードをすばやく挿入するにはどうすればよいか」という質問...

1つの記事でJSONPの原理と応用を理解する

目次JSONPとはJSONP 原則JSONP実装1. Ajaxでクロスドメインリクエストが行われると...

CSSを使用して、頻繁に表示される奇妙なボタンを簡単に実装します。

背景グループでは、CSS を使用してインセット コーナー ボタンを実装する方法や、矢印付きのボタンを...

MySQLデータ移行方法とツールの分析

この記事は主にMySQLデータ移行方法とツールの分析を紹介します。サンプルコードを通じて詳細に紹介さ...

dockerでマウントされたディレクトリが読み書きできない問題を解決する

次のコマンドを使用してコンテナを作成し、ローカルの /home/dock/Downloads ディレ...

MySQL の大きなテーブルで大量のデータを一括削除する方法

質問はhttps://www.zhihu.com/question/440066129/answer...

PC/Pad/Phoneデバイスに自動的に適応するCSSウェブページレスポンシブレイアウト

序文最近は、PC、iPad、携帯電話、スマートウォッチ、スマートテレビなど、さまざまなデバイスが存在...

DockerでVueプロジェクトをデプロイする方法を教えます

1.前面に書きます:軽量仮想化テクノロジーとして、Docker には継続的インテグレーション、バージ...

Nginx+Tomcat 負荷分散クラスタの実装例

目次導入1. 事例の概要2. 環境の展開3. Nginxホストのインストール4. Tomcatのイン...

JavaScriptのクローン作成についての簡単な説明

目次1. 浅いクローニング2. ディープクローニング1. 浅いクローニング浅いクローンでは配列やオブ...

同じドメイン名を持つ Nginx プロキシのフロントエンドとバックエンドの分離プロジェクトの完全な手順

フロントエンド プロジェクトとバックエンド プロジェクトは分離されており、フロントエンドとバックエン...

MySQLでconcat関数を使用する方法

以下のように表示されます。 //managefee_managefee テーブルの年と月を照会し、c...

Vue の関連ページへのマルチレベルジャンプ (ページドリルダウン) 機能の完全な例

背景プロジェクト開発プロセスでは、前のページから次のページにジャンプする必要に迫られることがよくあり...

Nginx ベースの Mencached キャッシュ構成の詳細な説明

導入Memcached は分散キャッシュ システムです。Memcached には認証とセキュリティ制...