什么地方出了錯(cuò)？

錯(cuò)誤類型

? ? ?一般來(lái)說(shuō)，當(dāng)你在代碼中做錯(cuò)了，你會(huì)遇到兩種主要的錯(cuò)誤類型:

• 語(yǔ)法錯(cuò)誤:這是在你的代碼的拼寫(xiě)錯(cuò)誤，實(shí)際上導(dǎo)致程序不能運(yùn)行在所有或停止通過(guò)工作的一部分，這樣你通常會(huì)用一些錯(cuò)誤消息也提供了通?？梢孕迯?fù)的方法，只要你熟悉正確的工具，知道錯(cuò)誤消息的意思！
• 邏輯錯(cuò)誤:這些錯(cuò)誤，其中語(yǔ)法實(shí)際上是正確的，但代碼是不是你想要的，這意味著項(xiàng)目成功運(yùn)行，但會(huì)產(chǎn)生不正確的結(jié)果。這些通常比語(yǔ)法錯(cuò)誤更難以修復(fù)，因?yàn)橥ǔ](méi)有錯(cuò)誤指向錯(cuò)誤源。

好了，這是不是很是簡(jiǎn)單-因?yàn)槟愀钊氲难芯恳灿幸恍┢渌牟町惢?。但上述分類將在你的職業(yè)生涯的這個(gè)早期階段做。我們將看看這兩種類型。

一個(gè)錯(cuò)誤的例子

開(kāi)始，讓我們回到我們的猜測(cè)游戲 - 除了這一次，我們將探索一個(gè)版本，有一些故意錯(cuò)誤介紹。轉(zhuǎn)到Github上，讓自己的本地拷貝數(shù)游戲errors.html(看到它在這里住上運(yùn)行)。

1. 要開(kāi)始，請(qǐng)?jiān)谀矚g的文本編輯器和瀏覽器中打開(kāi)本地副本。
2. 嘗試玩游戲 - 你會(huì)注意到，當(dāng)你按"提交猜測(cè)"按鈕，它不工作！

此時(shí)，讓我們打開(kāi)開(kāi)發(fā)者控制臺(tái)，看看我們是否可以有語(yǔ)法錯(cuò)誤，然后嘗試修復(fù)它們。你會(huì)學(xué)到如何修復(fù)。

修復(fù)語(yǔ)法錯(cuò)誤

早年在過(guò)程中，我們得到了你輸入一些簡(jiǎn)單的JavaScript命令到開(kāi)發(fā)工具JavaScript控制臺(tái)(如果你不記得如何在瀏覽器中打開(kāi)此，按照前面的鏈接了解如何 F12.)。更有用的是，當(dāng)JavaScript進(jìn)入瀏覽器的JavaScript引擎時(shí)，如果存在語(yǔ)法錯(cuò)誤，控制臺(tái)會(huì)提供錯(cuò)誤消息?，F(xiàn)在讓我們?nèi)タ匆豢础?/p>

1. 在谷歌瀏覽器打開(kāi)errors.html中打開(kāi)，并打開(kāi)JavaScript控制臺(tái)(默認(rèn)F12)。您應(yīng)該會(huì)看到以下行中的錯(cuò)誤消息:
2. 這是一個(gè)很容易跟蹤的錯(cuò)誤，瀏覽器提供了幾個(gè)有用的信息來(lái)幫助你(上面的截圖是從Firefox，但其他瀏覽器提供類似的信息)。從左到右，我們有:
3. 紅色"x"表示這是一個(gè)錯(cuò)誤。
4. 一個(gè)錯(cuò)誤消息，指示發(fā)生了什么問(wèn)題:"TypeError:guessSubmit.addeventListener不是一個(gè)函數(shù)"
5. 點(diǎn)擊錯(cuò)誤鏈接瀏覽器解釋了大量詳細(xì)信息含義
6. 錯(cuò)誤所在的行號(hào)，以及首次看到錯(cuò)誤的行中的字符編號(hào)。在這種情況下，我們有第86行，字符數(shù)3。
7. 如果我們?cè)诖a編輯器中看第86行，我們會(huì)發(fā)現(xiàn)這行:

   guessSubmit.addeventListener('click', checkGuess);

8. 錯(cuò)誤消息說(shuō)"guessSubmit.addeventListener不是一個(gè)函數(shù)"，所以我們可能拼寫(xiě)錯(cuò)了。如果你不確定一段語(yǔ)法的正確拼寫(xiě)，在MDN上查找該功能通常是很好的。當(dāng)前做到這一點(diǎn)，最好的辦法就是搜索"MDN?名稱的特征在你喜歡的搜索引擎。"?這里有快捷鏈接，為您節(jié)省在這種情況下:addEventListener()。
9. 所以，看著這個(gè)頁(yè)面，錯(cuò)誤似乎是我們拼寫(xiě)的函數(shù)名錯(cuò)誤！請(qǐng)記住，JavaScript是區(qū)分大小寫(xiě)的，所以任何輕微的拼寫(xiě)或大小不同都會(huì)導(dǎo)致錯(cuò)誤。更改addeventListener到addEventListener解決這個(gè)問(wèn)題。現(xiàn)在。

語(yǔ)法錯(cuò)誤二

1. 保存您的頁(yè)面并刷新，您會(huì)看到錯(cuò)誤已經(jīng)消失。
2. 現(xiàn)在，如果你嘗試輸入一個(gè)猜測(cè)，并按提交猜測(cè)按鈕，你會(huì)看到...另一個(gè)錯(cuò)誤！
3. 這次報(bào)告的錯(cuò)誤是"TypeError:lowOrHi is null"，在第78行。
   注意:Null是一個(gè)特殊值，意思是"無(wú)"，或者"無(wú)值"。因此，lowOrHi已申報(bào)和初始化，但不與任何有意義的價(jià)值-它沒(méi)有任何類型或值。
   注意 因?yàn)?內(nèi)部函數(shù)內(nèi)部發(fā)生這個(gè)錯(cuò)誤checkGuess() { ... }塊)。正如你將在后面的函數(shù)文章中更詳細(xì)地學(xué)到的，代碼里面的函數(shù)運(yùn)行在一個(gè)單獨(dú)的范圍內(nèi)來(lái)編寫(xiě)外部函數(shù)。在這種情況下，代碼沒(méi)有運(yùn)行并且沒(méi)有被拋出的誤差，直到checkGuess()函數(shù)由線86上運(yùn)行。
4. 看看第78行，你會(huì)看到下面的代碼:

   lowOrHi.textContent = 'Last guess was too high!';

5. 該行正試圖設(shè)置textContent的中lowOrHi變量為一個(gè)文本字符串，但它不工作，因?yàn)?code>lowOrHi不包含什么它應(yīng)該操作不了。讓我們來(lái)看看這是為什么-嘗試搜索的其他實(shí)例lowOrHi中的代碼。你在JavaScript中找到的最早的例子是第48行:

   var lowOrHi = document.querySelector('lowOrHi');

6. 在這一點(diǎn)上，我們?cè)噲D讓變量包含對(duì)文檔HTML中的元素的引用。讓我們來(lái)檢查值是否是null運(yùn)行后。在第49行添加以下代碼:

   console.log(lowOrHi);

   注意:console.log()是一個(gè)非常有用的調(diào)試功能，打印的值到控制臺(tái)。所以它會(huì)打印的價(jià)值lowOrHi，快速的打印到控制臺(tái)，我們?cè)噲D將其設(shè)置為48行。

7. 保存并刷新，你現(xiàn)在應(yīng)該看到console.log()的結(jié)果在控制臺(tái)。 果然，lowOrHi的值是null在這一點(diǎn)上，所以絕對(duì)沒(méi)有48中的問(wèn)題。
8. 讓我們想想問(wèn)題可能是什么。48號(hào)線使用document.querySelector()方法與CSS選擇器選擇它去一個(gè)元素的引用。進(jìn)一步查看我們的文件，我們可以找到有問(wèn)題的段落:

   <p class="lowOrHi"></p>

9. 因此，我們需要一個(gè)類在這里，它與一個(gè)點(diǎn)開(kāi)始(.)，但選擇器被傳遞到querySelector()方法中管線48沒(méi)有圓點(diǎn)。這可能是問(wèn)題！嘗試改變lowOrHi，以.lowOrHi行號(hào)48。
10. 嘗試保存并刷新一遍，你的console.log()說(shuō)法應(yīng)該返回<p>我們想要的元素。！！另一個(gè)錯(cuò)誤修復(fù)！您可以刪除您console.log()，或保持在隨后參考-你的選擇。

第三個(gè)語(yǔ)法錯(cuò)誤

1. 現(xiàn)在，如果你再次嘗試玩游戲，你應(yīng)該獲得更多的成功 - 游戲應(yīng)該通過(guò)，直到你結(jié)束游戲，通過(guò)猜測(cè)正確的數(shù)字，或通過(guò)運(yùn)行重置。
2. 在這一點(diǎn)，游戲再次失敗，同樣的錯(cuò)誤是拋出，我們?cè)陂_(kāi)始 - "TypeError:resetButton.addeventListener不是一個(gè)函數(shù)！這次它來(lái)自第94行。
3. 看看行號(hào)94，很容易看到我們?cè)谶@里犯了同樣的錯(cuò)誤。我們?cè)俅沃恍枰淖?code>addeventListener為addEventListener?，F(xiàn)在做這個(gè)。

邏輯錯(cuò)誤

在這一點(diǎn)上，游戲進(jìn)行得很順利。但經(jīng)過(guò)幾次你一定會(huì)注意到你要猜測(cè)的這個(gè)隨機(jī)數(shù)總是1。毋庸置疑，我們不想這么玩游戲！

可以確定的是，某處游戲的邏輯出現(xiàn)了問(wèn)題——游戲并沒(méi)有返回錯(cuò)誤；它只是不能正確地運(yùn)行。

1. 找到我們第一次聲明變量randomNumber所在的位置。這個(gè)我們要在游戲開(kāi)始時(shí)猜測(cè)的隨機(jī)數(shù)實(shí)例大約出現(xiàn)在44行:

   var randomNumber = Math.floor(Math.random()) + 1;

   另一個(gè)在隨后的每一次游戲前形成的隨機(jī)數(shù)實(shí)例應(yīng)該在113行:

   randomNumber = Math.floor(Math.random()) + 1;

2. 為了檢查是否這兩行確實(shí)存在問(wèn)題，讓我們?cè)俅位氐轿覀兊呐笥芽刂婆_(tái)——在上面兩行代碼之后各自插入下面的代碼:

   console.log(randomNumber);

3. 保存并刷新，然后進(jìn)行游戲——你會(huì)看到在它被輸入到控制臺(tái)的地方隨機(jī)數(shù)總是等于1。

通過(guò)邏輯

確定了這個(gè)，讓我們來(lái)思考這行代碼如何工作。首先，我們調(diào)用 Math.random(),它生成一個(gè)在0和1之間的十進(jìn)制隨機(jī)數(shù)，例如 0.5675493843。

Math.random()

接下來(lái)，我們把調(diào)用Math.random()的結(jié)果作為參數(shù)傳遞給Math.floor()，它會(huì)向下舍入到與它最接近的整數(shù)。然后我們給這個(gè)結(jié)果加上1:

Math.floor(Math.random()) + 1

舍入介于?0?和?1?下的之間的十進(jìn)制隨機(jī)數(shù)將總是返回?0，所以加1之后它總是返回1。我們需要在它舍入之將它前乘以100。那么接下來(lái)的結(jié)果就是0到99之間的隨機(jī)數(shù)了:

Math.floor(Math.random()*100);

昂斯想要我們加1，才給我們一個(gè)1到100之間的隨機(jī)整數(shù):

Math.floor(Math.random()*100) + 1;

試著像這樣更新這兩行，然后保存并刷新——現(xiàn)在游戲應(yīng)該是我們期望的那樣了！

其它常見(jiàn)錯(cuò)誤

還有其他常見(jiàn)錯(cuò)誤，你會(huì)在代碼中遇到。 本節(jié)重點(diǎn)介紹其中的大部分。

語(yǔ)法錯(cuò)誤: 在聲明后缺少" ; "

這個(gè)錯(cuò)誤通常意味著你在一行代碼的末尾錯(cuò)過(guò)了一個(gè)冒號(hào)，但有時(shí)它會(huì)更加隱秘。 例如，如果我們?cè)?code> checkGuess()函數(shù)中更改此行:

var userGuess = Number(guessField.value);

至

var userGuess === Number(guessField.value);

它拋出這個(gè)錯(cuò)誤，因?yàn)樗J(rèn)為你正在嘗試做不同的事情。 你應(yīng)該確保不要使用strict等于運(yùn)算符混合賦值運(yùn)算符( = ) - 它設(shè)置一個(gè)變量等于一個(gè)值( === code>)，它測(cè)試一個(gè)值是否等于另一個(gè)值，并返回 true / false 結(jié)果。

程序總是說(shuō)你贏了，無(wú)論你進(jìn)入猜測(cè)

這可能是混淆賦值和嚴(yán)格相等運(yùn)算符的另一個(gè)癥狀。 例如，如果我們?cè)?code> checkGuess()中更改此行:

if (userGuess === randomNumber) {

至

if (userGuess = randomNumber) {

測(cè)試總是返回true，所以程序報(bào)告游戲已經(jīng)贏了。 小心！

語(yǔ)法錯(cuò)誤: 在參數(shù)后缺少" ) "

這很簡(jiǎn)單 - 通常意味著你錯(cuò)過(guò)了一個(gè)函數(shù)/方法調(diào)用結(jié)束時(shí)的右括號(hào)。

語(yǔ)法錯(cuò)誤: 在屬性id后缺少" : "

這個(gè)錯(cuò)誤通常與一個(gè)不正確形成的JavaScript對(duì)象有關(guān)，但在這種情況下，我們?cè)O(shè)法通過(guò)更改獲得它

function checkGuess() {

至

function checkGuess( {

這導(dǎo)致瀏覽器認(rèn)為我們?cè)噲D將函數(shù)的內(nèi)容作為參數(shù)傳遞到函數(shù)中。 小心這些括號(hào)！

語(yǔ)法錯(cuò)誤: 在函數(shù)體后缺少" } "

這很容易 - 通常意味著你從一個(gè)函數(shù)或條件結(jié)構(gòu)中錯(cuò)過(guò)了一個(gè)花括號(hào)。 我們通過(guò)刪除 checkGuess()函數(shù)底部附近的一個(gè)關(guān)閉花括號(hào)來(lái)獲得此錯(cuò)誤。

SyntaxError：expected expression，got\' string \'或SyntaxError：unterminated string literal

這些錯(cuò)誤通常意味著您錯(cuò)過(guò)了字符串值的開(kāi)頭或結(jié)尾引號(hào)。 在上面的第一個(gè)錯(cuò)誤中， string 將替換為瀏覽器找到的意外字符，而不是字符串開(kāi)頭的引號(hào)。 第二個(gè)錯(cuò)誤表示字符串尚未以引號(hào)標(biāo)記結(jié)束。

對(duì)于所有這些錯(cuò)誤，想想我們?nèi)绾翁幚砦覀冊(cè)谘菥氈锌吹降睦印?/span> 當(dāng)出現(xiàn)錯(cuò)誤時(shí)，查看您給出的行號(hào)，轉(zhuǎn)到該行，看看是否可以發(fā)現(xiàn)錯(cuò)誤。 記住，錯(cuò)誤不一定是在那行，也錯(cuò)誤可能不是由上面提到的完全相同的問(wèn)題引起的！

概要

所以我們有它，在簡(jiǎn)單的JavaScript程序中找出錯(cuò)誤的基礎(chǔ)。 它不總是那么簡(jiǎn)單，弄清楚你的代碼有什么問(wèn)題，但至少這將節(jié)省你幾個(gè)小時(shí)的睡眠，并允許你進(jìn)步一點(diǎn)，當(dāng)事情沒(méi)有出現(xiàn)在你的學(xué)習(xí)之前 。

也可以看看