JavaScript

一篇關於如何禁用 ESLint 規則的快速教程 您的工具可能會自動設置no-debugger和no-console規則，但您可以做些什麼來禁用它們呢？ 在開發模式中，瀏覽器調試工具和Console API的訪問是必不可少的，雖然在生產代碼中可能有正當的理由禁用它們。 您可以通過添加如下幾行代碼來禁用一個或多個特定的ESLint規則： /* eslint-disable no-debugger, no-console */ console.log('test') 或者您可以在一個區塊中禁用它，在之後重新啟用： /* eslint-disable no-debugger, no-console */ console.log('test') /* eslint-enable no-alert, no-console */ 或者您可以在特定的行中禁用該規則： console.log('test') // eslint-disable-line no-console debugger // eslint-disable-line no-debugger alert('test') // eslint-disable-line no-alert 另一種方法是在項目全局禁用該規則。 在package.json中，您可以找到eslintConfig規則，裡面可能已經有一些內容，像這樣： "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, 在這裡，您可以禁用您想禁用的規則： "eslintConfig": { "extends": [ "react-app", "react-app/jest" ], "rules": { "no-unused-vars": "off" } },

我之前需要將一個 JavaScript 陣列進行翻轉，以下是我所做的方法。 給定一個陣列 list： const list = [1, 2, 3, 4, 5] 最簡單和直觀的方法就是調用陣列的 reverse() 方法。 這個方法會修改原始的陣列，所以我可以將 list 声明為常量（const），因為我不需要將 list.reverse() 的結果重新賦值給它： const list = [1, 2, 3, 4, 5] list.reverse() //list 為 [ 5, 4, 3, 2, 1 ] 你可以將這個方法搭配展開運算符（spread operator）一起使用，先複製原始陣列，然後進行翻轉，這樣原始陣列就不會被改變： const list = [1, 2, 3, 4, 5] const reversedList = [...list].reverse() //list 為 [ 1, 2, 3, 4, 5 ] //reversedList 為 [ 5, 4, 3, 2, 1 ] 另一種方法是使用 slice()，不傳入參數：...

在過去幾年中，Promises 可說是 JavaScript 中最好的東西之一。 當我們調用一個返回 Promise 的函數時，我們可以使用 then() 方法來鏈接一個在 Promise 解析 時運行的函數。 以下是使用 Fetch API 的示例： fetch('/data.json') .then(response => { console.log(response.status) }) 如果在 fetch() 調用期間出現錯誤該怎麼辦？可能是因為網絡不可用，或者網絡請求返回了錯誤。 Promise 將會被拒絕。一個 Promise 會像這樣： const thePromise = new Promise((resolve, reject) => { }) 在 Promise 內部，我們會收到兩個參數，也就是兩個函數。在 Promise 主體內，如果一切正常，則會調用 resolve() 函數： const thePromise = new Promise((resolve, reject) => { resolve('OK') // 你可以傳遞任何值 }) 如果出現問題，則會調用 reject() 函數： const thePromise = new Promise((resolve, reject) => { reject('錯誤訊息') // 你可以傳遞任何值 }) 如果出現問題，我們必須處理 Promise 的拒絕。我們可以使用 Promise 的 catch() 方法來處理：...

在我的 Next.js 代码库中，我遇到了这个问题： TypeError: Attempted to assign to readonly property 奇怪！经过一番调试，我找到了问题所在。它与 Next.js 无关，它可以发生在任何 JavaScript 代码库中。 在我的数据库中，有一列是以 JSON 的形式存储数据。 在我的代码中，我使用点语法（例如 data.name = 'Flavio'）来更新这个 JSON 对象，但是我忘记在此之前调用 JSON.parse()。 data 不是一个对象，而是一个字符串！ 在 JavaScript 中，字符串是不可变的。一旦定义，我们无法更新它们。因此会出现错误。解决方法很简单，就是在更新 JSON 对象之前调用 JSON.parse()。

我在寫 JavaScript 時不加分號。 而這個我真的很喜歡。在我看來，這樣子語言更加清晰。 你可能不喜歡這樣，這是可以理解的。但這就是事實。 分號是可選的，我們沒有必要加上它們。 然而，有時我們必須要特別注意。尤其在 Node.js 中，我們使用 require() 來載入外部模組和檔案。 這可能會導致某些情況下出現以下錯誤： TypeError: require(...) is not a function 這是一個奇怪的錯誤，對吧？ 讓我們看看我是如何遇到這個錯誤的。 我載入了一個函式庫，然後我要在根層級執行一些程式碼，並且我建立了一個立即調用的異步函式： const fs = require('fs') (async () => { //... })() JS 在 require() 後面看不到分號，然後我們以 ( 開頭一行，JS 以為我們要執行一個函式。 它將 require('fs') 視為函式的名稱，如果該模組導出返回了一個函式，這實際上是可以正常工作的。 但實際上並不是這樣，所以我們得到了 ...is not a function 的錯誤。 我們該如何解決這個問題呢？ 我們需要加上一個分號。隨便哪都可以。 這個方法能有效解決問題： const fs = require('fs') ;(async () => { //... })() 另外這個方法也能正常工作： const fs = require('fs'); (async () => { //... })() 這是我們必須付出的一點小代價，為了避免到處使用分號。...

了解如何計算 JavaScript 物件擁有多少屬性 使用 Object.keys() 方法，將要檢查的物件傳入，獲取物件的所有 (自身) 可枚舉屬性的陣列。 然後通過檢查 length 屬性來計算該陣列的長度： const car = { color: '藍色', brand: 'Ford', model: 'Fiesta' } Object.keys(car).length 我提到了可枚舉屬性。這表示它們的內部可枚舉標誌設置為 true，這是默認值。請參考 MDN 了解更多關於這個主題的信息。

一個關於如何使用調試來解決任何 JavaScript 問題的教程 調試是一個很好的技能，它可以幫助你解決 JavaScript 代碼中的每個問題。 每天早上我們起床，吃美味的早餐，坐在電腦前寫完美的代碼，這個夢想是理想的，不是嗎？但這只是一個夢想而已。 無論你有多好，無法寫出沒有缺陷的代碼。代碼總是有缺陷的，這是它的定義。 當你開始寫代碼時，你可能沒有見過或預料到錯誤。錯誤可能只有在你將程序發佈給用戶之後才會被發現，這是最糟糕的情況。 錯誤可能由你自己在測試程序時發現，甚至可能在某些事情正常運作時就突然出現故障，只因為你改變了一行代碼。 這些被稱為回歸錯誤。 作為開發人員，錯誤是我們日常工作的一部分，但我們的工作是盡可能地將它們減少到最低。 當你知道有錯誤時，你如何解決它呢？ 嗯，最難的部分始終是確定錯誤發生在哪裡。 然後，第二個最困難的部分是找出為什麼會發生這個錯誤。 一旦你知道了上述所有問題的答案，解決錯誤通常就很容易了。 通常我們可以做兩件事來解決錯誤。 一種技術是非常基本的，涉及嘗試找出狀態（變量的內容）和程序流程的值，並將這些變量打印到日誌或程序的輸出中。 找出錯誤可能出現的地方 調試是一種對程序員活動非常核心的技能。 有時候我們盡力工作，但程序卻不能正常工作，例如，它崩潰了，只是運行得很慢，或者它打印了錯誤信息。 當你寫的程序不像你預期的那樣運行時，你會怎麼做？ 你開始調試它。 第一步始終是觀察發生了什麼，並嘗試確定問題來自哪裡。 它是環境中的問題嗎？ 它是你給程序的輸入中的問題嗎？ 它是由於內存使用過多而導致的一次性崩潰嗎？ 還是每次運行它都會發生？ 這些都是在解決問題時開始朝著正確方向前進的重要信息。 一旦你對錯誤的來源有了一些想法，你就可以開始檢查該特定程式碼的部分了。 最簡單的調試方式，至少在工具方面而言，是讀出你所寫的代碼。大聲讀出來。 如果你讀的是一個字符串或一個數字，那麼聽起來沒有任何魔力。 然而，有時我們可以通過這種方式發現問題。 在這一步之後，就是使用一些工具的時候了。 你第一次接觸 alert() 和 console.log() 如果閱讀代碼對你來說毫無意義，那麼下一個合乎邏輯的步驟就是開始在代碼中添加幾行代碼，以幫助你找到問題所在。 在 JavaScript 前端代碼中，你通常會使用 alert() 和 console.log()。 考慮以下代碼行： const a = calculateA() const b = calculateB() const result = a + b 出於某種原因，我們不知道代碼的最終結果計算不正確，所以我們在計算結果之前添加 alert(a) 和 alert(b)。 當瀏覽器執行代碼時，它會打開兩個警告對話框： const a = calculateA() const b = calculateB() alert(a) alert(b) const result = a + b 如果你將 alert() 傳遞的是一個字符串或一個數字，這種方法是行得通的。...

假設你有以下物件： const dog = { name: 'Roger' } 要讀取 name 屬性的值，你可以使用點號語法： dog.name 或者你可以使用方括號屬性存取語法： dog['name'] 這在屬性名稱無法做為有效變數名稱時特別有用，例如 the name： const dog = { 'the name': 'Roger' } dog['the name'] 當你事先不知道屬性名稱，需要以程式動態評估時，方括號屬性存取語法非常有用，就像以下例子，在物件的屬性名稱上迴圈： const dog = { 'the name': 'Roger' } for (const [key, value] of Object.entries(dog)) { console.log(value) }

了解如何讓你的 JavaScript 函數暫停執行一段時間 有時候你希望你的函數暫停執行一定的秒數或毫秒數。 在 C 或 PHP 這樣的編程語言中，你可以呼叫 sleep(2) 來使程式停止執行 2 秒。Java 使用 Thread.sleep(2000)，Python 使用 time.sleep(2)，Go 使用 time.Sleep(2 * time.Second)。 JavaScript 沒有原生的 sleep 函數，但由於 promises 的引入（以及 ES2018 中的 async/await），我們可以以非常清晰易讀的方式實現這樣的功能，讓你的函數休眠： const sleep = (milliseconds) => { return new Promise(resolve => setTimeout(resolve, milliseconds)) } 或者，在 Node.js 中，更簡單的方式如下： const { promisify } = require('util') const sleep = promisify(setTimeout) 在 promisify 上了解更多 你可以在 then 回調函數中使用它： sleep(500).then(() => { //執行其他操作 }) 或者在 async 函數中使用它：...

網頁上常見的一個需求是將表單重置為初始狀態。 過去很多表單上都有一個“重置”按鈕，不過現在我看到它的使用越來越少。 重置按鈕是一個 input 元素，其 type 屬性設置為 “reset”： <input type="reset"> 你也可以使用 JavaScript 來以編程的方式重置表單。 你只需要獲取表單元素的引用： const form = document.querySelector('form') 然後你可以在該引用上調用 reset() 方法： form.reset() 這將清空表單中的所有元素，將它們恢復為初始狀態。