知っておくべき 7 つのネイティブ JS エラーの種類

知っておくべき 7 つのネイティブ JS エラーの種類

概要

ブラウザ コンソールから Node.js を実行するターミナルまで、あらゆる場所でエラーが表示されます。この記事の焦点は、JS 開発中に発生する可能性のあるエラーの種類の概要を提供することです。

ヒント: 良いバグは、開発体験が速くて苦痛のないものと遅くて苦痛のあるものの違いを生む可能性があります。再利用可能なコードを書くときは、明確で理解しやすいエラー処理コードを書いていることを確認してください。

1. 範囲エラー

このエラーは、数値が許容範囲外の場合にスローされます。

例えば

const l = console.log const arr = [90,88]
配列の長さ = 90**99

2 つの要素を持つ配列 arr があります。次に、配列を拡張して、90**99 == 2.9512665430652753e+193 個の要素が含まれるようにします。

この数値は、配列サイズが増加できる範囲を超えています。これを実行すると RangeError がスローされます:

$ ノードエラー

エラー.js:4

配列の長さ = 90**99

^RangeError: 配列の長さが無効です

JS で指定された範囲を超えて arr 配列のサイズを増やしたいためです。

2. 参照エラー

このエラーは、変数または項目への参照が壊れている場合に発生します。つまり、変数または項目が存在しません。

例えば

const l = console.logconst cat = "cat"
猫
犬

「cat」に初期化される変数 cat があります。次に、cat 変数と dog 変数が参照されます。 cat 変数は存在しますが、dog 変数は存在しません。

cat は「cat」を返しますが、dog は環境レコード内に dog という名前が見つからないため ReferenceError を発生させます。

$ ノードエラー

エラー.js:3

^ReferenceError: 犬が定義されていません

変数を作成または定義するたびに、変数名が環境レコードに書き込まれます。環境レコードはキー値ストアのようなものです。

+-------------+

| キー | 値 |

---------------

| 猫 | 「猫」 |

+-------------+

変数を参照するたびに、プログラムで定義されたとおりに変数が格納されます。レコード内に環境値が見つかり、その値が抽出されて返される場合、変数の名前をキーとして使用して環境レコードが検索されます。まだ定義されていない関数を呼び出します。

ここで、値を割り当てずに変数を作成または定義します。変数のキーは変数名として環境レコードに書き込まれますが、その値は未定義のままになります。

var catenv レコード

+-----------------+

| キー | 値 |

-------------------

| 猫 | 未定義 |

+-----------------+

後で変数に値が割り当てられると、環境レコード内で検索され、未定義であることが判明すると、割り当てが上書きされます。

var 猫

cat = "cat"envレコード

+-------------+

| キー | 値 |

---------------

| 猫 | 「猫」 |

+-------------+

したがって、環境レコードに変数名が見つからない場合、JS エンジンは ReferenceError を発生させます。

+-------------+

| キー | 値 |

---------------

| 猫 | 「猫」 |

+-------------+cat // 「cat」、そうです、:) そこにあります

犬 // :( これは何ですか?見つかりません

注: 環境レコードの値がまだ設定されていないため、未定義の変数では ReferenceError はスローされません。

3. 構文エラー

これは最もよくある間違いです。このエラーは、JS エンジンが理解できないコードを入力したときに発生します。

JS エンジンは解析中にこのエラーを検出しました。 JS エンジンでは、ターミナルに結果が表示される前に、コードはさまざまな段階を経ます。

  • トークン化
  • 分析
  • 説明する

トークン化により、コードのソースが個々のユニットに分割されます。この段階では、数字、キーワード、テキスト、演算子が個別に分類され、ラベルが付けられます。

次に、結果のトークン ストリームは解析ステージに渡され、そこでパーサーによって処理されます。ここでトークン ストリームから AST が生成されます。 AST はコードの構造を抽象的に表現したものです。

トークン化と解析の段階で、コードの構文が JS の文法規則に準拠していない場合、その段階は失敗し、SyntaxError が発生します。例えば:

const l = console.loglet cat h = "cat"

コード内の「h」は何を表していますか?この「h」はコードを破壊します。

$ ノードエラー

エラー.js:3

cat h = "cat" とします。

^SyntaxError: 予期しない識別子

ご覧のとおり、Node.js は問題を解決しました。 「h」は予期しないものであり、cat 変数の宣言が破損したと表示されます。

したがって、構文エラーは解析中またはコンパイル中に発生すると言えます。

4. タイプエラー

TypeError は、他の NativeError オブジェクトに失敗の原因が適切に示されていない場合に、操作が失敗したことを示すために使用されます。

TypeError は、間違ったデータ型に対して操作が実行されたときに発生します。例:

次のように数字を大文字に変換してみます。

定数 = 123
num.toUpperCase()

これはTypeErrorを発生させます

$ ノードエラー

エラー.js:4

num.toUpperCase()

^TypeError: num.toUpperCase は関数ではありません

toUpperCase 関数は文字列データ型を想定しているためです。 toUpperCase 関数は意図的に汎用的であり、this 値が String オブジェクトである必要はありません。したがって、他の種類のオブジェクトに転送してメソッドとして使用することができます。

文字列のみが大文字または小文字に変換されます。オブジェクト、ブール値、シンボル、null、未定義のデータ型で toUpperCase 関数を呼び出すと、間違ったデータ型で動作するため、TypeError が発生します。

5. URIエラー

これは、定義と互換性のないグローバル URI 処理関数が使用されていることを示します。

JS の URI (Uniform Resource Indicator) には、decodeURI、decodeURIComponent などの機能があります。

間違った引数でいずれかを呼び出すと、URIError が発生します。

URIをデコードします("%")
^URIError: URI が不正です

encodeURI は、エンコードされていないバージョンの URI を取得するために使用されます。 「%」は適切な URI ではないため、URIError が発生します。

URI のエンコードまたはデコードに問題がある場合、URIError が発生します。

6. 評価エラー

これは、グローバル eval() 関数を使用するときにエラーを識別するために使用されます。

EcmaSpec 2018 版によると:

この例外は現在この仕様では使用されていません。この仕様の以前のバージョンとの互換性のために保持されています。

7. 内部エラー

このエラーは JS エンジン内で発生し、具体的には、処理するデータが多すぎてスタックが限界を超えた場合に発生します。

この問題は、JS エンジンが過度の再帰やケースの切り替えなどに圧倒されたときに発生します。

スイッチ(数値) {
 ケース1:
 ...
 壊す
 ケース2:
 ...
 壊す
 ケース3:
 ...
 壊す
 ケース4:
 ...
 壊す
 ケース5:
 ...
 壊す
 ケース6:
 ...
 壊す
 ケース7:
 ...
 壊す
 ...最大1000件
 }

以下は過剰な再帰の簡単な例です。

関数foo(){
    関数foo()
}
関数foo()

要約する

先ほども言ったように、誰でも間違いを犯します。コーディングする限り、これは安定したイベントです。これを克服するには、スローされる可能性のあるネイティブ エラーの種類を知る必要があります。この記事では、それらをリストし、それらがどのようにトリガーされるかの例をいくつか示します。

そのため、ターミナルまたはブラウザでエラーが発生した場合は、エラーが発生した場所と原因を簡単に見つけることができ、エラーが発生しにくい優れたコードを記述できるようになります。

上記は、知っておくべき 7 つの JS ネイティブ エラーの種類の詳細です。JS ネイティブ エラーの種類の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

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

<<:  NGINXがウェブサイトのPV、UV、独立IPをカウントする方法の詳細な説明

>>:  MySQL インデックスの使用方法 (単一列インデックスと複数列インデックス)

ブログ    

推薦する

react-diagram シリアル化 Json 解釈 ケース分析

このドキュメントの目的はreact-diagramフレームワーク モデルの Json シリアル化を説...

CSS 不透明度子要素が親要素の透明度を継承するためのソリューションの詳細な説明

プロジェクト ページの作成中に、子要素が親要素の透明度を継承するという問題に遭遇しました。多くのドキ...

VMware ワークステーションの仮想マシンの互換性の問題に対する解決策

VMware ワークステーションの仮想マシンの互換性の問題を解決するにはどうすればよいですか?ノート...

VMWare仮想マシンにCentOS7システムをインストールする詳細な手順

インストール前の作業: VMware Workstation がインストールされていることを確認し、...

Linux usermod コマンドの使用

1. コマンドの紹介usermod (ユーザー変更) コマンドは、ユーザー アカウントを変更するため...

CentOS で MySQL 5.1 を 5.5.36 にアップグレードする

CentOS 6.4 環境で MySQL 5.1 を 5.5.36 にアップグレードする手順を記録し...

Vueのref属性の詳細な説明

要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS....

CSS3 テキストシャドウ text-shadow プロパティの詳細な説明

テキストシャドウ text-shadow プロパティの効果: 1. 右下隅の影、左下隅の影、左上隅の...

Docker tomcatのメモリサイズを設定する方法

Docker に Tomcat をインストールする場合、大きなファイルをダウンロードするときなど、場...

CSS セレクタのグループ化の簡単な分析

セレクタのグループ化h2 要素と段落の両方を灰色にしたいとします。これを行う最も簡単な方法は、次のス...

Webフォーム作成スキル

実際、上記の 3 つの表はいずれも 3 行 3 列です。区切り線を非表示にするコツはルールにあります...

DockerはMariaDBのサブライブラリとサブテーブル、および読み書き分離機能を実装します

目次1. はじめに2. 環境整備1. 基本環境3.Mysqlマスタースレーブ構成をインストールする1...

Vue フィルターの実装と適用シナリオの詳細な説明

1. 簡単な紹介Vue.js を使用すると、一般的なテキストの書式設定に使用できる独自のフィルターを...

入力タイプの制限(複数の方法)

1. 入力・貼り付けできるのは中国語のみ<input onkeyup="value=...

Node.js のイベント モジュールに関する知識ポイントのまとめ

Node の研究と応用を通じて、NodeJS はシングルスレッド、イベント駆動型、非ブロッキング I...