程式設計開發新朋友 —— ChatGPT 和 NotionAI 實戰

語言: CN / TW / HK
時間 2023-02-09 16:15:05

廢話少說，本篇帶來藉助 AI 幫助我們程式設計開發的 4 種場景實戰，分別是：

1、AI 程式碼釋義

2、AI 完善程式碼

3、AI 修正程式碼

4、AI 測試程式碼

問答來源於 ChatGPT 和 NotionAI，相信你一定能感受到 AIGC 的魅力~

喜歡三連，筆芯~

image.png

關聯閱讀：為什麼我更推薦 Notion AI 勝於 ChatGPT ? - 掘金

AI 程式碼釋義

⭐輸入：

//解釋下以下程式碼是幹嘛的 function calculateDistance(x1, y1, x2, y2) { return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)); }

ChatGPT

image.png

輸出：

這段程式碼是計算兩個點之間的歐幾里得距離的函式。其中，(x1, y1) 和 (x2, y2) 表示兩個點的座標，函式通過使用勾股定理計算出它們之間的距離並返回結果。

NotionAI

image.png

輸出：

函式calculateDistance(x1, y1, x2, y2) 用於計算兩個點之間的距離，其中x1和y1表示第一個點的座標，x2和y2表示第二個點的座標。該函式使用勾股定理計算兩點之間的距離，即通過求平方根來計算 (x1 - x2)^2 + (y1 - y2)^2 的值。

多補充一個例子：

⭐輸入：

//為以下函式寫註釋 const debounce = (func, wait) => { let timer return () => { clearTimeout(timer) timer = setTimeout(func, wait); } }

ChatGPT 輸出：

這是一個 JavaScript 實現的防抖動函式。防抖動函式接受兩個引數："func" 和 "wait"。"func" 引數表示在等待 "wait" 指定的時間後要執行的函式。

防抖動函式返回一個匿名函式，該匿名函式設定了一個計時器。如果計時器已存在，則會使用 "clearTimeout(timer)" 來清除它。然後，使用 "setTimeout(func, wait)" 設定新的計時器，確保即使在指定的時間段內多次呼叫該匿名函式，也只會在等待時間過後執行一次 "func" 函式。

NotionAI 輸出：

// debounce函式用來限制函式呼叫的頻率。

// 它返回一個匿名函式，在指定的等待時間後呼叫傳入的函式，並且清除上一次的計時器。

AI 完善程式碼

⭐輸入：

// 根據以下程式碼生成新程式碼 const className = "my-div"; const text = "Hello world!";

ChatGPT

image.png

輸出：

const element = document.createElement("div"); element.className = className; element.textContent = text; document.body.appendChild(element);

NotionAI

image.png

輸出： ``` // Styling a div with a class

Hello world!

```

AI 修正程式碼

⭐輸入：

// 修正以下程式碼錯誤 function List(props) { const items = props.items; // error: items is undefined return ( <ul> {items.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul> ); }

ChatGPT

image.png

輸出：

// Here is the corrected code: function List(props) { const { items = [] } = props; return ( <ul> {items.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul> ); } In this code, the props object is destructured to get the items property. If props doesn't have an items property, it will default to an empty array [].

它也給 items 設定了預設值，太強了！

NotionAI

image.png

輸出： function List(props) { const items = props.items; if (items && items.length > 0) { return ( <ul> {items.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul> ); } return null; }

Notion AI 一樣能修復程式碼，做了條件判斷，太強了！

AI 測試程式碼

⭐輸入：

// 給以下程式碼做測試 const testCases = [ {length: 2, width: 3, expected: 6}, {length: 4, width: 5, expected: 20}, {length: 6, width: 7, expected: 42}, ];

ChatGPT

image.png

輸出：

Here is a sample code for testing the given test cases: ```

function testAreaCalculation(testCases) { for (let i = 0; i < testCases.length; i++) { const { length, width, expected } = testCases[i]; const result = length * width; if (result !== expected) { console.error(Test case ${i} failed: expected ${expected} but got ${result}); } else { console.log(Test case ${i} passed); } } }

testAreaCalculation(testCases); ``` This code will run through all the test cases and print out "Test case i passed" for each test case that passes and "Test case i failed: expected expectedValue but got result" for each test case that fails.

回答生成了一個健全的程式碼測試用例；

NotionAI

image.png

輸出：

testCases.forEach((testCase) => { const area = calculateArea(testCase.length, testCase.width); expect(area).toBe(testCase.expected); });

小結

最後用 Notion AI 為本篇作一個小結：

image.png

TIME.

OK，以上便是本篇分享，希望各位工友喜歡~ 歡迎點贊、收藏、評論 🤟

我是掘金安東尼 🤠 100 萬人氣前端技術博主 💥 INFP 寫作人格堅持 1000 日更文 ✍ 關注我，安東尼陪你一起度過漫長程式設計歲月 🌏

😹 加我微信 ATAR53，拉你入群，定期抽獎、粉絲福利多多。只學習交友、不推文賣課~

「」
「」