ChatGPT在前端領域的初步探索

更新時間：2023年03月16日 15:04:17 作者：青灬河

這篇文章主要為大家介紹了ChatGPT在前端領域的初步探索，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

什么是ChatGPT

官方解釋：ChatGPT是一個智能聊天機器人，來自于OpenAI，它能夠使用人工智能技術進行對話，并回答用戶提出的問題和請求。它由GPT（Generative Pre-trained Transformer）算法支持，可以模擬人類對話和回答各種問題，包括日常生活、科技、娛樂、健康、財經等領域。ChatGPT可以通過各種渠道進行訪問，如網站、社交媒體或移動應用程序。

ChatGPT優(yōu)勢

ChatGPT有以下幾個優(yōu)勢：

可以模擬真人對話：ChatGPT使用GPT算法，可以生成自然語言，使得對話非常流暢和自然，就好像在與一個真人交流一樣。
能夠自我學習：ChatGPT使用機器學習技術，可以通過不斷的學習來提高自己的答案和回復質量。
24小時在線：ChatGPT可以在任何時間回答用戶的問題，不需要等待人類客服的接待時間。
處理大量請求：ChatGPT可以處理大量請求，在同一時間內可以同時與多個用戶進行對話。
提高客戶滿意度：ChatGPT可以回答用戶的問題并提供有用的信息，這可以提高用戶的滿意度和忠誠度。
提高效率：ChatGPT可以快速響應和解答用戶問題，減少人工客服的工作量和時間。

接下來，我們來聊一聊它對前端開發(fā)產生了什么樣的影響

體驗流程

我們需要先擁有一個相應的賬戶才能體驗，這里我直接放上體驗流程的鏈接:sms-activate.org，按照本流程對于沒有接觸過ChatGPT的童鞋們可以體驗一下，這里我就不展開詳細解釋了。tips：電腦需要科學上網哦~~

輔助開發(fā)

重點來了，我們需要先分析我們在日常開發(fā)中哪些方面可以用到它，根據開發(fā)的流程我們可以從以下幾點分析：

需求階段：我們做業(yè)務開發(fā)的前提是以需求為準，對于需求而言，實現的方式多種多樣，我們應該分析一下，應該用什么技術去實現，具體對應到哪種框架、第三方依賴庫等等。

編碼階段：這個階段是業(yè)務邏輯的實現階段，要完成需求中的功能。舉個??：做登錄注冊模塊，輸入賬號和密碼時一般都需要校驗格式（復雜情況），這時正則表達式不失為一個好的辦法，此時我們的主角就該登場了~~ 話不多說，直接上圖：

經驗證：^[a-zA-Z0-9]{6,}$ 符合預期

  let reg = /^[a-zA-Z0-9]{6,}$/
  let str = '0203'
  let str2 = 'yk0203'
  console.log(reg.test(str), 'str') // false
  console.log(reg.test(str2), 'str2') // true

這個正則限制比較簡單，來個復雜點的吧：

tips：解釋滿分。

這里我就不做test了，更復雜的大家可以自己嘗試~~

代碼優(yōu)化：我們在在編碼階段完成功能后，應該考慮代碼優(yōu)化之道，優(yōu)化代碼包括多個層面，提高代碼的復用性就是其中一個方面，直接上demo說明一下：

在這個demo中，我們定義了兩個函數，一個用于計算兩個數的和，另一個用于計算兩個數的差。通過調用這兩個函數，我們可以實現復用性，避免在不同的地方重復編寫相同的計算代碼。此外，我們還可以通過將這些函數放入一個模塊中，從而實現更高程度的復用性。將這兩個函數放入一個名為"calculator.py"的模塊中，然后在其他文件中引入這個模塊，就可以在其他地方輕松地重用這些函數。然后我又向它發(fā)起提問：

我們使用JavaScript語言實現了與前面Python demo相同的功能。將這兩個函數放入一個名為"Calculator.js"的模塊中，然后在其他文件中引入這個模塊，就可以在其他地方輕松地重用這些函數。其實這種思想在前端已經老生常談了。

代碼重構:一般來說，一個項目經過多個人先后開發(fā)并維護，每個人的開發(fā)習慣也不盡相同，最終導致代碼中很多邏輯不是很清晰，尤其是那些很久之前的項目，再加上當時沒有添加注釋，維護效率不高，這個時候我們可以考慮下重構下部分代碼，用圖來說話：

這里只是一個簡單的demo，項目中重構代碼要比這個復雜（慎重考慮是否進行代碼重構），說到這里，養(yǎng)成良好的編碼習慣就顯得特別重要啦，比如定義方法時語義化，適當給方法添加注釋等，我們的主角也是也可以幫忙添加注釋的，請看：

function factorial(n) { 
    if (n === 0) return 1; 
    else return n * factorial(n-1);
}
//示例輸出 
console.log(factorial(5)); //120 
console.log(factorial(10)); //3628800

// 定義遞歸函數，計算階乘 
function factorial(n) { 
    if (n === 0) { 
        // 當 n 等于 0 時，階乘結果為 1 
        return 1; 
     } else { 
       // 當 n 不等于 0 時，調用函數自身來計算階乘
       return n * factorial(n-1); 
       } 
}
// 示例輸出
console.log(factorial(5)); //120 
console.log(factorial(10)); //3628800

然后我又追問：

綜上，我們想要主角幫我們處理問題，就應該把條件羅列清晰，否則主角也給不了最完善的回答，它有時在處理基本數學問題時出錯，有時無法全面理解邏輯，并且甚至會提供完全錯誤的事實來支持其答案。OpenAI 已經承認了這個問題，并表示“ChatGPT 有時會寫出聽起來合理但是不正確或無意義的答案”。ChatGPT 是一種輔助工具，能夠理解復雜的問題。但最好也不要完全相信它所說的一切。

tips：提問和回答的截圖均來自VScode的ChatGPT中文版擴展插件（站在了大佬的肩膀上），有興趣的童鞋可以自行搜索體驗一波~