编程开发新朋友 —— ChatGPT 和 NotionAI 实战

王雪琴

废话少说，本篇带来借助 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 的值。
<hr/>多补充一个例子：
⭐输入：
//为以下函数写注释
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
<div class="my-div">Hello world!</div>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 设置了默认值，太强了！
<hr/>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;
    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.
<hr/>

OK，以上便是本篇分享，希望各位工友喜欢~ 欢迎点赞、收藏、评论  
我是掘金安东尼   100 万人气前端技术博主   INFP 写作人格坚持 1000 日更文 ✍ 关注我，安东尼陪你一起度过漫长编程岁月  

  加我微信 ATAR53，拉你入群，定期抽奖、粉丝福利多多。只学习交友、不推文卖课~
<hr/>