多くの開発者がよく知っているように、JavaScript コードの作成は困難であり、時には非常に恐ろしいものになることがあります。 仕事の過程では必ずミスが発生し、そのミスが頻繁に繰り返されることがあります。 この記事は初心者開発者を対象として、これらのエラーとその解決方法について説明します。 明確にするために、関数、プロパティ、およびオブジェクトの名前は次から取得されています。 。 これらすべては、よくある間違いを修正する方法をすぐに思い出すのに役立ちます。
リマインダー： 「Habr」のすべての読者が対象 - 「Habr」プロモーション コードを使用してスキルボックス コースに登録すると 10 ルーブルの割引。
スキルボックスは次のことを推奨します。 実践コース .
TypeError: プロパティが定義されていません
let girl = {
name: "Lucky",
location: "Hollywood",
profession: "star",
thingsMissingInHerLife: true,
lovely: true,
cry: function() {
return "cry, cry, cries in her lonely heart"
}
}
console.log(girl.named.lucky)上記のコード例では、「Uncaught TypeError: Cannot read property 'lucky' of unknown」というエラーがスローされます。 問題は、girl オブジェクトには name プロパティがあるにもかかわらず、名前付きプロパティがないことです。 また、girl.named プロパティは定義されていないため、形式的には存在しないため、アクセスできません。 ただし、girl.named.lucky を girl.name に置き換えると、すべてが機能し、プログラムは Lucky を返します。
物件の詳細を知ることができます .
TypeErrors を解決する方法
TypeError は、プログラマが特定の型に一致しないデータに対してアクションを実行しようとすると発生します。 例としては、.bold() の使用、未定義のプロパティの要求、実際には関数ではない関数の呼び出しなどが挙げられます。
そのため、girl() を呼び出そうとすると、「Uncaught TypeError: yourVariable.bold is not a function and girl is not a function」というエラーが発生します。これは、実際には関数ではなく呼び出されるオブジェクトであるためです。
エラーを排除するには、変数を調査する必要があります。 では、女の子とは何でしょうか？ girl.namedとは何ですか？ コードを分析するか、デバッガ コマンドの console.log を使用して変数を表示するか、コンソールで変数名を呼び出すことで確認できます。 変数に含まれるデータ型を操作できることを確認する必要があります。 適合しない場合は、条件または try..catch ブロックを追加するなどして変更し、操作の実行を制御できるようにします。
スタックオーバーフロー
「ベイビー・ワン・モア・タイム」という曲の歌詞の作者（これはブリトニー・スピアーズです、そうです）を信じるなら、この文脈での「ヒット」という言葉は、もう一度呼ばれたいという歌手の願望を意味します（ここでは、まさにその文脈の説明があります）歌 - 訳者注）。 もしかしたら、その欲求が実生活での電話件数の増加につながるかもしれません。 しかし、プログラミングでは、これは再帰であり、呼び出しスタックがオーバーフローした場合にエラーが発生する可能性があります。
エラーは次のようになります。
エラー: スタック領域が不足しています (エッジ)
InternalError: 再帰が多すぎます (Firefox)
RangeError: 最大呼び出しスタック サイズを超えました (Chrome)
スタック オーバーフローは、開発者が再帰の基本ケースを考慮していない場合、またはコードが意図したケースに対応していない場合に発生します。
function oneMoreTime(stillBelieve=true, loneliness=0) {
if (!stillBelieve && loneliness < 0) return
loneliness++
return oneMoreTime(stillBelieve, loneliness)
}この場合、stillBelieve が false になることはあり得ないため、oneMoreTime は毎回呼び出されますが、関数は決して完了しません。
XNUMX 人の友人に頼り始めると、孤独感が軽減され、電話を待つ必要がなくなります。
function oneMoreTime(stillBelieve=true, loneliness=0) {
if (!stillBelieve && loneliness < 0) return
loneliness--
stillBelieve = false
return oneMoreTime(stillBelieve, loneliness)
}例としては、システムがエラー メッセージを生成しないが、JavaScript コードが実行されるページが単にフリーズする、無限ループのケースが挙げられます。 これは、while ループに終了条件がない場合に発生します。
let worldEnded = false
while (worldEnded !== true) {
console.log("Keep on dancin' till the world ends")
}この問題は次のように解決できます。
let worldEnded = false
while (worldEnded !== true) {
console.log("Keep on dancin' till the world ends")
worldEnded = true
}無限ループと再帰のデバッグ
無限ループの問題が発生した場合は、Chrome または Edge ではタブを閉じ、Firefox ではブラウザ ウィンドウを閉じる必要があります。 この後、コードを注意深く分析する必要があります。 問題が見つからない場合は、ループまたは関数にデバッガー コマンドを追加し、変数の値を確認する価値があります。 結果が期待したものと一致しない場合は、それを置き換えます。これは簡単に行うことができます。
上の例では、デバッガを関数またはループの最初の行として追加する必要があります。 次に、Chrome でデバッグ タブを開き、スコープ内の変数を分析する必要があります。 次のボタンを使用すると、各反復での変更を追跡できます。 これらはすべて簡単に実行でき、ほとんどの場合、問題は見つかります。
詳細については、ここで読むことができます (） そしてここ （).
構文エラー
JavaScript で最も一般的なエラーの XNUMX つは SyntaxError です。 テキスト エディターの拡張機能は、それらを回避するのに役立ちます。 たとえば、ブラケット ペア カラーライザーは、コード内の括弧を異なる色でマークします。また、Prettier または同様の分析ツールを使用すると、エラーを迅速に見つけることができます。 SyntaxError の可能性を減らすための最良のオプションは、ネストを最小限に抑えることです。
コメントで共有してください: 間違いを防ぐために、または間違いを迅速に検出して排除するために何をしていますか?
スキルボックスは次のことを推奨します。
- XNUMX年間の実践コース .
- オンラインコース .
- 実践一年コース .
出所： habr.com