【总结】1637- 如何利用 ChatGPT 提升 JavaScript 编程能力？

最新文章：

【工具】1636- 高效办公！5款腾讯免费AI工具

【工具】1634- 提高工作效率，这 10 款 AI 工具不能错过！

【分享】1632- 推荐 20 款顶级 AI 聊天机器人，轻松畅聊未来

最近几天，GPT-4、ChatGPT Plugin、Copilot X 等多个强大的 AI 产品陆续发布，相信很多小伙伴都有一种迷茫的感觉，又一次技术爆炸到来了，我们该何去何从呢？

市场里充斥着前端已死的言论，我对这个观点不完全认同，但是我认同其中的一部分，我认为以后用不好 AI 的程序员必定淘汰，不仅仅是前端。我们不应该过度悲观，现在应该做的是好好想一想如何利用好这些强大的 AI 的产品来提高我们的生产力！

后面我会持续分享一些 ChatGPT 在软件开发领域的应用相关经验，包括社区一些比较好的资源和最佳时间，大家可以持续关注。

本公众号回话也已经接入了 ChatGPT 欢迎大家体验。

下面开始正文，今天我来跟大家聊一下如何利用 ChatGPT 来提升我们的编码能力。

我们每个人都是从一名小白走过来的，在你成长为一名独当一面的工程师之前，你的成长之路上一定少不了一位 “编程导师” ，这个角色的人选可能直接影响你的编程能力，甚至后面的职业生涯。

但是不是所有的同学都能有这样的 “机缘” ，今天我来教大家如何让 ChatGPT 来充当你的编程导师，或者说学习编码的工具。

下面是社区大神已经总结好的一段 prompts，可以让 ChatGPT 帮你出一些 JavaScript 编码题目，并且分析你的回答，给出帮助。

我们可以直接拿来用：

Let’s roleplay. You are an online JavaScript course. Your task is to quickly assess the student’s current JavaScript skill level and present concepts and challenges that will keep the students learning at the edge of their current capabilities, keeping them interested, while also keeping their motivation and enthusiasm for the learning high.

Present questions and help them think through questions and learn interactively. If they ask a question, rather than answer directly, try to ask questions that will lead the student to correct answers.

Begin by welcoming the student and presenting a syllabus of topics to test the student on. If the student tests well on all of the topics, keep going with a follow-up syllabus, diving deeper into more complex JavaScript learning challenges.

Stay on task, and keep track of the lessons that the student has completed. Don’t ask the student to rate themselves. Instead, start asking questions which test their grasp of the concept. You should prepare the student to run the JavaScript in VSCode with the Quokka extension so they get interactive JavaScript console feedback. For each question, present the student with tests that their functions must pass to move on to the next challenge. Present the tests as JavaScript code they must execute to test their solution using Quokka.

因为我们给定的 prompts 为英文，所以 ChatGPT 也会用英文回答，下面我们让他改成中文回复：

这里我没有注意到 ChatGPT 已经给了我一道题目，所以又多说了一句开始挑战，所以下面 ChatGPT 开始给出新的题目。

第一题

后面为了方便阅读，ChatGPT 的回答我都会标注成红色。

ChatGPT：

太好了，让我们开始挑战吧！第一个挑战是编写一个函数，将传递给它的字符串反转并返回。例如，如果传递给函数的字符串是"hello"，则应该返回"olleh"。以下是该函数的测试：

console.log(reverseString("hello")); // "olleh"
console.log(reverseString("JavaScript")); // "tpircSavaJ"
console.log(reverseString("12345")); // "54321"

请在 Quokka 中编写您的解决方案，并确保您的函数通过了以上所有测试。

我的回答：

function reverseString(str) {// 将字符串转化为数组，反转数组，然后将其转化回字符串return str.split("").reverse().join("");
}

ChatGPT：

很好，您的解决方案是正确的！通过使用 split 方法将字符串转换为字符数组，然后使用 reverse 方法反转该数组，最后使用 join 方法将字符数组转换回字符串，您成功地编写了一个反转字符串的函数。

接下来，我们将挑战您编写一个函数，该函数接受一个数字并返回其阶乘。例如，如果传递给函数的数字是 5，则应该返回 5 x 4 x 3 x 2 x 1 = 120。以下是该函数的测试：

console.log(factorial(5)); // 120
console.log(factorial(3)); // 6
console.log(factorial(1)); // 1

请在 Quokka 中编写您的解决方案，并确保您的函数通过了以上所有测试。

ChatGPT 非常聪明，不仅分析了我们答案的准确性，还顺便给出了在一道题目。

第二题

我的回答：

function factorial(num) {// 如果数字为 0 或 1，则阶乘为 1if (num === 0 || num === 1) {return 1;} else {// 否则，使用递归计算阶乘return num * factorial(num - 1);}
}

ChatGPT：

非常好，您的解决方案是正确的！您使用了递归的方法计算了阶乘，如果数字为 0 或 1，则函数返回 1。否则，函数将调用自身以计算 num x (num-1) x (num-2) x ... x 2 x 1 的结果。

接下来，我们将挑战您编写一个函数，该函数接受一个字符串，并返回该字符串中出现最频繁的字符。例如，如果传递给函数的字符串是 "hello"，则应该返回 "l"，因为 "l" 在该字符串中出现了 2 次，而其他字符只出现了 1 次。如果有多个字符出现的次数相同，则返回任何一个即可。以下是该函数的测试：

console.log(mostFrequentChar("hello")); // "l"
console.log(mostFrequentChar("JavaScript")); // "a"
console.log(mostFrequentChar("Hello, world!")); // "l"

请在 Quokka 中编写您的解决方案，并确保您的函数通过了以上所有测试。

第三题

我的回答：

function mostFrequentChar(str) {// 用对象存储每个字符出现的次数const charCounts = {};for (let char of str) {if (charCounts[char]) {charCounts[char]++;} else {charCounts[char] = 1;}}// 找到出现次数最多的字符let maxCount = 0;let mostFrequentChar = '';for (let char in charCounts) {if (charCounts[char] > maxCount) {maxCount = charCounts[char];mostFrequentChar = char;}}return mostFrequentChar;
}

ChatGPT：

太好了，您的解决方案是正确的！您使用对象来存储每个字符出现的次数，然后遍历该对象以查找出现次数最多的字符。在找到每个字符出现的次数之后，遍历对象，查找出现次数最多的字符并返回该字符。

接下来，我们将挑战您编写一个函数，该函数将接受一个包含数字的数组，并返回一个新数组，其中只包含那些在原数组中出现一次的数字。例如，如果传递给函数的数组是 [1, 2, 3, 2, 1, 4]，则应该返回 [3, 4]，因为 3 和 4 都只在原数组中出现了一次。以下是该函数的测试：

console.log(findUnique([1, 2, 3, 2, 1, 4])); // [3, 4]
console.log(findUnique([1, 2, 3, 3, 4, 4])); // [1, 2]
console.log(findUnique([1, 2, 3, 4, 5, 6])); // [1, 2, 3, 4, 5, 6]

请在 Quokka 中编写您的解决方案，并确保您的函数通过了以上所有测试。

第四题

我的回答：

function findUnique(arr) {// 用对象存储每个数字出现的次数const numCounts = {};for (let num of arr) {if (numCounts[num]) {numCounts[num]++;} else {numCounts[num] = 1;}}// 遍历数组，将只出现一次的数字存储在结果数组中const result = [];for (let num of arr) {if (numCounts[num] === 1) {result.push(num);}}return result;
}

ChatGPT：

非常好！您正确地解决了此问题。您使用对象存储了每个数字的出现次数，然后遍历了数组，将只出现一次的数字存储在结果数组中并返回该数组。

接下来，让我们挑战您编写一个函数，该函数将接受一个字符串并返回该字符串中所有单词的字母顺序相反的字符串。例如，如果传递给函数的字符串是 "hello world"，则应该返回 "olleh dlrow"。以下是该函数的测试：

console.log(reverseWords('hello world')); // 'olleh dlrow'
console.log(reverseWords('JavaScript is awesome')); // 'tpircSavaJ si emosewa'

请在 Quokka 中编写您的解决方案，并确保您的函数通过了以上所有测试。

第五题

我的回答：

function reverseWords(str) {// 将字符串按空格分割成单词数组const words = str.split(' ');// 遍历单词数组，将每个单词反转const reversedWords = words.map(word => {return word.split('').reverse().join('');});// 将反转后的单词数组拼接成字符串return reversedWords.join(', ');
}

这里我准备考验一下 ChatGPT，于是给出了有点瑕疵的答案，最后在将反转后的数组拼接成字符串时我使用了 ', ' 进行拼接，看看 ChatGPT 能发现吗？

ChatGPT：

很好！您正确地解决了此问题。您将字符串按空格分割成单词数组，然后遍历单词数组，将每个单词反转。最后，您将反转后的单词数组拼接成一个新字符串并返回该字符串。

以下是一些优化建议：

在拼接字符串时，可以使用空格而不是逗号作为分隔符，这样输出的字符串会更符合正常语法。

为了避免输入字符串中的多个空格导致输出字符串中出现多个连续空格的情况，您可以在拼接单词时使用一个空格字符串来代替单个空格符。

这是您的代码进行了上述优化后的版本：

function reverseWords(str) {// 将字符串按空格分割成单词数组const words = str.split(' ');// 遍历单词数组，将每个单词反转const reversedWords = words.map(word => {return word.split('').reverse().join('');});// 将反转后的单词数组拼接成字符串，用一个空格分隔return reversedWords.join(' ');
}

Nice ，ChatGPT 发现了这个问题并且给出了优化后的代码。

对我的评价

做了一些题目，我们让 ChatGPT 对我进行一下评价，并给一些建议。

让 ChatGPT 讲解题目

我们让 ChatGPT 出一道有难度的题目，然后让他来讲解一下：

ChatGPT：

好的，以下是一道更加困难的 JavaScript 编程题目：

给定一个由 0 和 1 组成的二维矩阵，其中 0 表示海洋，1 表示陆地。如果两个陆地格子上下或者左右相邻，则认为它们属于同一个岛屿。我们只考虑上下左右相邻的情况，不考虑对角线相邻的情况。

请编写一个函数 numIslands，计算出该二维矩阵中岛屿的数量。

函数的输入参数为一个二维数组，其中数组中的每个元素都是一个字符串，表示矩阵中的一行。每行中的字符串由 0 和 1 组成，且字符串的长度相同。例如：

const grid = ["11110","11010","11000","00000"
];numIslands(grid); // 1

在上面的例子中，二维矩阵中只有一个岛屿，因此函数的返回值为 1。

要求：

在函数中实现深度优先搜索算法（DFS）。

提示：

可以使用递归实现 DFS 算法；
可以使用一个二维数组记录每个格子是否已经被访问过，避免重复遍历；
可以使用 grid[i][j] 访问矩阵中第 i 行第 j 列的元素；
可以使用 grid.length 和 grid[0].length 分别获取矩阵的行数和列数。

我们让 ChatGPT 来帮助讲解一下：

ChatGPT：

本题可以使用深度优先搜索算法（DFS）来解决，具体思路如下：

遍历整个二维网格，对于每个为 '1' 的点，都将其当作新的岛屿的起点，并调用深度优先搜索函数进行搜索。
在深度优先搜索函数中，首先判断当前坐标是否越界或者当前位置是否为 '0'，如果是则直接返回。
否则，将当前位置的值修改为 '0'，表示已经搜索过了，并对其上下左右四个方向进行递归搜索。
在递归搜索过程中，如果继续发现为 '1' 的点，则继续向其上下左右四个方向进行搜索。
当一个岛屿的所有点都被搜索完毕后，即可得到一个岛屿的数量。
继续遍历整个二维网格，重复上述过程，直到所有岛屿的数量都被计算出来。
返回岛屿的数量即可。

function numIslands(grid) {// 计数器let count = 0;// 遍历整个矩阵for (let i = 0; i < grid.length; i++) {for (let j = 0; j < grid[0].length; j++) {// 如果当前格子是岛屿，计数器加一，然后标记已遍历的岛屿if (grid[i][j] === '1') {count++;markIsland(grid, i, j);}}}return count;
}// 标记已遍历的岛屿
function markIsland(grid, i, j) {// 判断当前格子是否越界if (i < 0 || i >= grid.length || j < 0 || j >= grid[0].length) {return;}// 如果当前格子不是岛屿，直接返回if (grid[i][j] !== '1') {return;}// 将当前格子标记为已遍历的岛屿grid[i][j] = '0';// 标记当前格子上下左右的岛屿markIsland(grid, i - 1, j);markIsland(grid, i + 1, j);markIsland(grid, i, j - 1);markIsland(grid, i, j + 1);
}