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

掘金安东尼
8,222 阅读3分钟

废话少说，本篇带来借助 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
<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 设置了默认值，太强了！

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，拉你入群，定期抽奖、粉丝福利多多。只学习交友、不推文卖课~

avatar
文章
阅读
粉丝