一口气最全解读ChatGPT编程超能力，13个章50个实例，小白也能懂

投稿用户 • • 视频彩铃 • 阅读 201

前言

今天，我们通过十三个章节，50+个示例，为大家展示ChatGPT在编程开发方面的无限潜力。有了ChatGPT的力量，可以简化工作流程，减少错误，甚至改进代码！从作为初学者学习知识，到为面试做准备，所有你需要的，基本都覆盖了。

一口气最全解读ChatGPT编程超能力，13个章50个实例，小白也能懂

不过也要注意，ChatGPT虽然是一个强大的工具，但是它不能替代我们的知识和技能！ TA只输出，不管对错，最终用还是不用，都需要使用者自己拿主意。在享受它提供便利的同时，也要时刻保持学习的状态，充实自己的技能。

一、代码生成

ChatGPT，可以生成各种Web开发任务的代码，解放时间，让你的效率倍增！它不仅能生成简洁明了的HTML和CSS代码，还能轻松生成JavaScript函数，甚至数据库查询语句，都能轻松搞定Web开发。

1.1 提示词:

Generate a semantic and accessible HTML and (framework) CSS [UI component] consisting of [component parts]. The [component parts] should be [layout].

举例:

Generate a semantic HTML and Tailwind CSS "Contact Support" form consisting of the user's name, email, issue type, and message. The form elements should be stacked vertically and placed inside a card.

生成结果

下面是一个使用语义化HTML和Tailwind CSS构建的“联系支持”表单，包含用户的姓名、电子邮件、问题类型和留言。表单元素垂直堆叠，放置在一个卡片中。

<div class="bg-white rounded-lg shadow-lg p-6">
  <h2 class="text-2xl font-bold mb-4">联系支持</h2>
  <form>
    <div class="mb-4">
      <label class="block text-gray-700 font-bold mb-2" for="name">
        姓名
      </label>
      <input class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="name" type="text" placeholder="您的姓名">
    </div>
    <div class="mb-4">
      <label class="block text-gray-700 font-bold mb-2" for="email">
        电子邮件
      </label>
      <input class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="email" type="email" placeholder="您的电子邮件">
    </div>
    <div class="mb-4">
      <label class="block text-gray-700 font-bold mb-2" for="issue-type">
        问题类型
      </label>
      <select class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="issue-type">
        <option value="" disabled selected>请选择问题类型</option>
        <option value="billing">账单问题</option>
        <option value="technical">技术支持</option>
        <option value="general">常规问题</option>
      </select>
    </div>
    <div class="mb-4">
      <label class="block text-gray-700 font-bold mb-2" for="message">
        留言
      </label>
      <textarea class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="message" rows="5" placeholder="请在这里输入您的留言"></textarea>
    </div>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
      提交
    </button>
  </form>
</div>

在这个表单中，姓名和电子邮件是必填字段，因此可以在输入框中使用required属性。您还可以根据需要自定义CSS样式。

1.2 提示词:

Write a JavaScript function. It accepts [input] and returns [output].

举例:

Write a JavaScript function. It accepts a full name as input and returns avatar letters.

生成结果

以下是接受全名为输入并返回头像字母的JavaScript函数：

function getAvatarLetters(fullName) {
  // 分割全名为名字和姓氏
  const names = fullName.trim().split(" ");
  let avatar = "";

  // 遍历每个名字并将其第一个字符添加到头像中
  for (let i = 0; i < names.length; i++) {
    avatar += names[i][0];
  }

  // 如果头像长度大于2，则将其截断为两个字符
  if (avatar.length > 2) {
    avatar = avatar.substring(0, 2);
  }

  // 返回头像
  return avatar;
}

该函数将首先将输入的全名分割成名字和姓氏，然后遍历每个名字并将其第一个字符添加到头像中。如果头像的长度大于2，则将其截断为两个字符。最后，该函数返回头像。

例如，如果输入的全名为“张三”，则该函数将返回“张”，如果输入的全名为“张三丰”，则该函数将返回“张三”。

1.3 提示词:

Write a/ an [framework] API for [functionality]. It should make use of [database].

举例:

Write an Express.js API to fetch the current user's profile information. It should make use of MongoDB.

生成结果

以下是使用Express.js和MongoDB编写的API示例，用于获取当前用户的个人资料信息：

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');

const app = express();

// 连接到MongoDB数据库
mongoose.connect('mongodb://localhost/myapp', { useNewUrlParser: true })
  .then(() => console.log('MongoDB连接成功'))
  .catch((err) => console.error('MongoDB连接失败：', err));

// 创建用户模型
const userSchema = new mongoose.Schema({
  name: String,
  email: String,
  password: String
});

const User = mongoose.model('User', userSchema);

// 添加中间件
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// 定义路由
app.get('/api/profile', (req, res) => {
  const userId = req.userId; // 假设已经通过身份验证获取到当前用户的ID
  User.findById(userId, (err, user) => {
    if (err) {
      console.error('获取用户信息失败：', err);
      res.status(500).send('获取用户信息失败');
    } else if (!user) {
      res.status(404).send('找不到用户信息');
    } else {
      const userInfo = {
        name: user.name,
        email: user.email
      };
      res.send(userInfo);
    }
  });
});

// 启动服务器
const port = 3000;
app.listen(port, () => console.log(`服务器已启动，端口号：${port}`));

这个API定义了一个/api/profile的GET路由，用于获取当前用户的个人资料信息。在路由处理程序中，首先从请求对象中获取当前用户的ID，然后使用User.findById()方法从数据库中查找该用户的信息。如果出现错误，会向客户端发送500错误响应；如果找不到用户，会发送404响应；否则，会将用户的姓名和电子邮件信息组成一个对象，发送给客户端。

请注意，这个示例中的代码假定已经实现了用户身份验证，并且可以从请求对象中获取当前用户的ID。如果您的应用程序没有实现身份验证功能，那么您需要在路由处理程序中添加相应的代码来实现身份验证。

1.4 提示词:

The database has [comma-separated table names]. Write a [database] query to fetch [requirement].

举例:

The database has students and course tables. Write a PostgreSQL query to fetch a list of students who are enrolled in at least 3 courses.

生成结果

以下是一个 PostgreSQL 查询，用于获取至少选修了3门课程的学生名单：

SELECT students.name as 学生名单
FROM students
JOIN course ON students.id = course.student_id
GROUP BY students.id, students.name
HAVING COUNT(course.id) >= 3;

该查询使用了 JOIN 操作来将 students 表与 course 表关联，并使用 GROUP BY 来按学生进行分组。然后使用 HAVING 子句来筛选至少选修了3门课程的学生，并将结果显示为“学生名单”的列。

二、代码补全

借助AI的力量，ChatGPT还可以建议与您的上下文和风格匹配的代码补全。

  • ? 2.1提示词:

Complete the code [code snippet]

举例:

Complete the code:

const animals = ["dogs", "cats", "birds", "fish"];
let animal = animals[Math.floor(Math.random() * animals.length)];

switch (animal) {
  case "dogs":
    console.log(
      "Dogs are wonderful companions. They make us smile."
    );
    break;
}

通常，以冒号结尾并将代码块粘贴到新行是一个最佳实践。使用三个反引号 [code] 或三个双引号 """[code]""" 来分隔代码块也是一个不错的选择。

生成结果

const animals = ["dogs", "cats", "birds", "fish"];
let animal = animals[Math.floor(Math.random() * animals.length)];

switch (animal) {
  case "dogs":
    console.log(
      "Dogs are wonderful companions. They make us smile."
    );
    break;
  case "cats":
    console.log(
      "Cats are independent and have a mind of their own."
    );
    break;
  case "birds":
    console.log(
      "Birds are fascinating creatures with beautiful feathers."
    );
    break;
  case "fish":
    console.log(
      "Fish come in many different colors and sizes, and can be kept as pets."
    );
    break;
  default:
    console.log("Sorry, I'm not familiar with that animal.");
}

上述代码定义了一个包含四种动物名称的字符串数组 animals，然后使用 Math.random() 方法从 animals 数组中随机选择一个元素，并将其赋值给变量 animal。

接下来，代码使用 switch 语句根据 animal 的值执行不同的操作。第一个 case 是针对 "dogs" 的，它向控制台输出一条关于狗是美好伙伴的信息。

为了完成这段代码，我们可以添加更多的 case 语句来处理 animals 数组中的其他动物，并附上相应的关于每种动物的信息。我们还可以添加一个 default 情况，如果 animal 变量与任何 case 值都不匹配，则会记录一条消息。

三、代码转换

作为一名开发人员，我们可能需要处理使用不同语言或框架编写的代码。通过ChatGPT,可以轻松地将代码片段从一种语言或框架转换为另一种。

  • ? 3.1 提示词:

Convert the below code snippet from [language/ framework] to [language/ framework]: [code snippet]

举例:

Convert the below code snippet from JavaScript to TypeScript

function nonRepeatingWords(str1, str2) {
  const map = new Map();
  const res = [];
  // Concatenate the strings
  const str = str1 + " " + str2;
  // Count the occurrence of each word
  str.split(" ").forEach((word) => {
    map.has(word) ? map.set(word, map.get(word) + 1) : map.set(word, 1);
  });
  // Select words which occur only once
  for (let [key, val] of map) {
    if (val === 1) {
      res.push(key);
    }
  }
  return res;
}

生成结果

以下是 TypeScript 代码：

function nonRepeatingWords(str1: string, str2: string): string[] {
  const map = new Map<string, number>();
  const res: string[] = [];
  // Concatenate the strings
  const str = str1 + " " + str2;
  // Count the occurrence of each word
  str.split(" ").forEach((word) => {
    map.has(word) ? map.set(word, map.get(word)! + 1) : map.set(word, 1);
  });
  // Select words which occur only once
  for (let [key, val] of map) {
    if (val === 1) {
      res.push(key);
    }
  }
  return res;
}

在 TypeScript 中，我们需要显式地声明每个参数和返回值的类型。在这个例子中，str1 和 str2 的类型都是 string，返回值的类型是 string[]。

另外，在 map.get(word) 中，我们需要使用非空断言操作符 !，因为 map.get() 方法返回的类型是 number | undefined，我们需要确保它不是 undefined 才能执行 +1 操作。

  • ? 3.2 提示词:Convert the below code using [CSS framework] to use [CSS framework]: [code snippet]

举例: Convert the below code using Bootstrap to use Tailwind CSS: [code snippet]

<div class="container">                      
    <div class="row text-center justify-content-center mb-5">
        <div class="col-xl-6 col-lg-8">
            <h2 class="font-weight-bold">A Company Evolution</h2>
            <p class="text-muted">We’re very proud of the path we’ve taken. Explore the history that made us the company we are today.</p>
        </div>
    </div>

    <div class="row">
        <div class="col">
            <div class="timeline-steps aos-init aos-animate" data-aos="fade-up">
                <div class="timeline-step">
                    <div class="timeline-content" data-toggle="popover" data-trigger="hover" data-placement="top" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-original-title="2003">
                        <div class="inner-circle"></div>
                        <p class="h6 mt-3 mb-1">2022</p>
                        <p class="h6 text-muted mb-0 mb-lg-0">Favland Founded</p>
                    </div>
                </div>
                <div class="timeline-step mb-0">
                    <div class="timeline-content" data-toggle="popover" data-trigger="hover" data-placement="top" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-original-title="2020">
                        <div class="inner-circle"></div>
                        <p class="h6 mt-3 mb-1">2023</p>
                        <p class="h6 text-muted mb-0 mb-lg-0">In Fortune 500</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

生成结果

<div class="container">                      
    <div class="flex items-center justify-center mb-5">
        <div class="max-w-3xl">
            <h2 class="font-bold text-2xl md:text-3xl">A Company Evolution</h2>
            <p class="text-gray-600 mt-2">We’re very proud of the path we’ve taken. Explore the history that made us the company we are today.</p>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="p-4">
            <div class="relative">
                <div class="absolute left-1/2 transform -translate-x-1/2 top-0 h-full w-1 bg-gray-300 pointer-events-none"></div>
                <div class="relative flex items-start space-x-3">
                    <div class="h-12 w-12 rounded-full bg-green-500 flex items-center justify-center">
                        <span class="text-white font-bold">2022</span>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="text-gray-800 font-bold">Favland Founded</div>
                        <p class="text-gray-600 mt-1">And here's some amazing content. It's very engaging. Right?</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="p-4">
            <div class="relative">
                <div class="absolute left-1/2 transform -translate-x-1/2 top-0 h-full w-1 bg-gray-300 pointer-events-none"></div>
                <div class="relative flex items-start space-x-3">
                    <div class="h-12 w-12 rounded-full bg-green-500 flex items-center justify-center">
                        <span class="text-white font-bold">2023</span>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="text-gray-800 font-bold">In Fortune 500</div>
                        <p class="text-gray-600 mt-1">And here's some amazing content. It's very engaging. Right?</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

四、代码解读

ChatGPT可以帮助我们解读代码，通过提供有关代码的解释，回答特定问题来实现。在读别人的代码，或者尝试理解复杂功能时，非常有用且高效。

  • ? 4.1 提示词:Explain the following [language] snippet of code: [code block]
  • ? 4.2 提示词:What does this code do: [accepted answer code from stack overflow]

举例： What does this code do:

function checkNested(obj /*, level1, level2, ... levelN*/) {
  var args = Array.prototype.slice.call(arguments, 1);

  for (var i = 0; i < args.length; i++) {
    if (!obj || !obj.hasOwnProperty(args[i])) {
      return false;
    }
    obj = obj[args[i]];
  }
  return true;
}

var test = {level1:{level2:{level3:'level3'}} };

checkNested(test, 'level1', 'level2', 'level3'); // true
checkNested(test, 'level1', 'level2', 'foo'); // false

生成结果

这段 JavaScript 代码定义了一个名为 checkNested 的函数，用于检查嵌套对象中是否存在指定的属性路径。

函数接受一个对象作为第一个参数，后面跟着一个或多个字符串参数，表示要检查的属性路径。函数遍历这些属性路径，检查对象是否具有每个路径中指定的属性，如果存在，则将对象更新为该属性的值，继续检查下一个属性路径，如果不存在，则返回 false。

如果函数成功检查了所有的属性路径，则返回 true。如果任何一个属性路径不存在，则返回 false。

函数使用了 Array.prototype.slice.call 方法，将参数列表转换为一个数组。它还使用了 hasOwnProperty 方法，以确保对象中只检查实际存在的属性。

在代码的最后，它定义了一个名为 test 的对象，该对象包含三个嵌套属性。然后，它调用 checkNested 函数两次，一次检查属性路径 'level1.level2.level3' 是否存在，另一次检查属性路径 'level1.level2.foo' 是否存在，并输出结果。第一次调用返回 true，因为该属性路径存在，第二次调用返回 false，因为该属性路径不存在。

五、代码评审

代码审查是软件开发的重要环节。我们自己的代码，自己通常很难发现bug所在。可以借助ChatGPT, 让TA来评审代码，找出其中可能存在的bug，以便让代码更健壮。

  • ? 5.1 提示词:Review the following [language] code for code smells and suggest improvements: [code block]
  • ? 5.2 提示词:Identify any security vulnerabilities in the following code:
var unArray = ["yousif", "ali", "thaer", "michael", "ahmedwael", "ahmedmagdy", "abdo", "ahmedkhaled1", "ahmedkhaled2", "ahmedkhaled3", "ahmedkhaled4", "ahmedkhaled5"];
var pwArray = ["123", "123", "123", "123", "123", "123", "123", "123", "123", "123", "123", "123"];
for (var i = 0; i < unArray.length; i++) {
  if ((un == unArray[i]) && (pw == pwArray[i])) {
    valid = false;
    break;
  }
}

生成结果

此代码段的目的是验证输入的用户名和密码是否与预定义的用户名和密码匹配。但是，此代码段存在以下安全漏洞：

  1. 1. 硬编码的用户名和密码：此代码段将用户名和密码硬编码到变量中，这意味着任何人都可以查看源代码并获得这些凭据，从而导致安全风险。
  2. 2. 明文密码存储：该代码段将密码存储在明文格式中。这是一个严重的安全漏洞，因为攻击者可以轻松地获得这些密码并访问用户的帐户。
  3. 3. 未经验证的输入：此代码段未对输入的用户名和密码进行任何验证。这可能导致攻击者通过暴力攻击等方式轻松地访问用户帐户。

因此，建议对代码进行以下更改以提高其安全性：

  1. 1. 使用加密算法存储密码，例如SHA-256等。
  2. 2. 避免硬编码凭据并将其存储在外部存储器中，例如数据库。
  3. 3. 对输入的用户名和密码进行验证，例如检查输入是否包含恶意脚本，或是否为字符串等。

六、代码重构

通常在写代码的时候，有一个 todo 想要重构这段代码，可以总是太忙没时间做。ChatGPT完全可以胜任，根据已存在的代码，让TA来改写，效率会高很多。

  • ? 6.1 提示词:Refactor the given [language] code to improve its error handling and resilience: [code block]
  • ? 6.2 提示词:Refactor the given [language] code to make it more modular: [code block]
  • ? 6.3 提示词:Refactor the given [language] code to improve performance: [code block]
  • ? 6.4 提示词:Refactor the below component code to be responsive across mobile, tablet, and desktop screens: [code block]
  • ? 6.5 提示词:Suggest descriptive and meaningful names for variables and functions, making it easier to understand the purpose of each element in your code: [code snippet]
  • ? 6.6 提示词:Suggest ways to simplify complex conditionals and make them easier to read and understand: [code snippet]

七、找bug+修复bug

作为开发人员，我们知道找bug有多难，复现异常简直不要太繁琐。然而，借助ChatGPT提示，我们可以轻松识别和解决那些可能引起问题的烦人漏洞。

  • ? 7.1 提示词:Find any bugs in the following code: [code snippet]
  • ? 7.2 提示词:I am getting the error [error] from the following snippet of code: [code snippet]. How can I fix it?

八、系统设计与架构

ChatGPT能够提供关于如何用不同技术堆栈设计系统的有价值见解和建议，甚至可以帮你比较不同技术堆栈的设计和架构哦！无论是在构建Web应用、移动应用还是分布式系统方面，ChatGPT都可以帮你设计出可扩展、可靠且易于维护的架构，满足你的需求。

  • ? 8.1 提示词:You are an expert at system design and architecture. Tell me how to design a [system]. The technology stack is [comma-separated list of technologies].

举例:

You are an expert at system design and architecture. Tell me how to design a hotel reservation system. The technology stack is Next.js and Firebase.

生成结果

酒店预订系统的设计需要考虑以下几个方面：

  1. 1. 需求分析：明确系统需要实现的功能，比如用户注册、酒店信息管理、房间预订、订单管理、支付等等。
  2. 2. 数据库设计：设计数据库结构，包括酒店信息、房间信息、用户信息、订单信息等，以及各种关联关系，比如房间和酒店之间的关联、用户和订单之间的关联等。
  3. 3. 后端开发：使用 Next.js 和 Firebase 开发后端 API，实现与数据库的交互，处理用户请求，返回相应的数据。
  4. 4. 前端开发：使用 Next.js 和 Firebase 开发前端界面，实现用户注册、酒店信息展示、房间预订、订单管理等功能。
  5. 5. 安全性设计：采用安全的开发方式和框架，对用户数据进行加密和保护，确保系统安全可靠。
  6. 6. 性能优化：优化系统性能，保证系统响应速度和并发访问量。
  7. 7. 测试和部署：进行全面的测试，确保系统的稳定性和可用性，并将系统部署到生产环境中。

总的来说，设计一个酒店预订系统需要综合考虑多个方面，包括需求分析、数据库设计、后端开发、前端开发、安全性设计、性能优化、测试和部署等。使用 Next.js 和 Firebase 技术栈可以提高开发效率和系统的可靠性，但仍需要细心谨慎地处理每一个环节。

  • ? 8.2 提示词:Contrast the design and architecture with [comma-separated list of technologies] as the technology stack.

举例:

Contrast the design and architecture with React and Supabase as the technology stack.

生成结果

技术堆栈设计和架构特点React- 用于构建用户界面的JavaScript库
– 使用组件化的方式来构建应用程序
– 将UI分解为组件，然后在这些组件之间构建数据流
– 使得开发人员能够更好地组织代码，并减少应用程序中的重复代码Supabase- 开源的后端即服务平台
– 提供了一系列工具和服务，使得开发人员能够更轻松地构建和维护数据库驱动的应用程序
– 使用PostgreSQL作为其数据库引擎
– 提供了一系列API和工具，使得开发人员能够更好地与数据库交互
– 提供了实时数据推送和身份验证等功能，使得开发人员能够更好地构建实时应用程序和安全的用户身份验证系统

九、SEO优化

让ChatGPT给我们的网站提提建议，从SEO优化的角度进行修改。

  • ? 9.1 提示词:How to improve SEO for a landing page?
  • ? 9.2 提示词:Give an example section of the HTML code that is optimized for Search Engine Optimization (SEO) for a [website]

举例:

Give an example section of the HTML code that is optimized for Search Engine Optimization (SEO) for a social networking site for athletes

生成结果

以下是一个针对运动员社交网络网站的头部HTML代码示例，优化了搜索引擎优化（SEO）：

<head>
  <title>运动员社交网络 - 竞技场</title>
  <meta name="description" content="竞技场是一个专门为运动员和体育爱好者打造的社交网络，您可以在此找到类似的人，分享您的运动成果和比赛经验。">
  <meta name="keywords" content="运动员社交网络, 运动员社交媒体, 体育社交网络, 竞技场">
  <meta name="author" content="竞技场团队">
  <link rel="canonical" href="athletesocialnetwork">
  <meta name="robots" content="index, follow">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

在这个头部HTML代码示例中，可以看到以下优化措施：

  • ? <title> 标签包含了网站的主要关键词“运动员社交网络”，并在结尾加上品牌名称“竞技场”。
  • ? <meta name="description"> 标签提供了网站的简要描述，包含关键词“运动员”、“体育”、“社交网络”，有助于搜索引擎了解网站内容。
  • ? <meta name="keywords"> 标签包含了网站的关键词，包括“运动员社交网络”、“运动员社交媒体”、“体育社交网络”、“竞技场”。
  • ? <meta name="author"> 标签提供了网站的作者信息。
  • ? <link rel="canonical"> 标签指定了网站的主要URL，防止搜索引擎将相似内容的多个URL视为不同的页面。
  • ? <meta name="robots"> 标签指示搜索引擎索引和跟踪网站内容。
  • ? <meta name="viewport"> 标签指定了网站在移动设备上的展示方式。

这些优化措施有助于提高网站的搜索引擎排名，吸引更多的运动员和体育爱好者来访问并使用该社交网络。

十、模拟数据

无论是为了测试还是演示，使用真实、有代表性的数据都非常重要。ChatGPT可以快速生成各种领域，各种格式的模拟数据。

  • ? 10.1 提示词:Generate a sample [data format] of [number] [entity] for a [domain]

举例:

Generate a sample JSON of 5 products for a clothing e-commerce site

生成结果

以下是一家服装电商网站的5个产品的JSON示例：

{
  "products": [
    {
      "id": "001",
      "name": "女式针织衫",
      "description": "舒适柔软的女式针织衫，适合秋季穿着。",
      "price": 199.99,
      "image_url": "images/product001.jpg"
    },
    {
      "id": "002",
      "name": "男式夹克",
      "description": "时尚休闲的男式夹克，适合春季穿着。",
      "price": 299.99,
      "image_url": "images/product002.jpg"
    },
    {
      "id": "003",
      "name": "女式连衣裙",
      "description": "优雅时尚的女式连衣裙，适合晚宴等场合穿着。",
      "price": 499.99,
      "image_url": "images/product003.jpg"
    },
    {
      "id": "004",
      "name": "男式长袖衬衫",
      "description": "高品质面料的男式长袖衬衫，适合商务场合穿着。",
      "price": 399.99,
      "image_url": "images/product004.jpg"
    },
    {
      "id": "005",
      "name": "女式牛仔裤",
      "description": "休闲舒适的女式牛仔裤，适合日常穿着。",
      "price": 249.99,
      "image_url": "images/product005.jpg"
    }
  ]
}

其中，每个产品都包括以下信息：

  • ? id：产品的唯一标识符。
  • ? name：产品的名称。
  • ? description：产品的描述信息。
  • ? price：产品的价格。
  • ? image_url：产品的图片链接。
  • ? 10.2 提示词:You can also enter prompts after every response for more fine-grained control

Give me a list of [number] fields for [entity] on an e-commerce site

Add an “id” field that will be unique to each [entity]. Replace [existing field] with [new field]

Generate a sample [data format] of [number] such [entity] with realistic values

十一、写注释、写文档

开发人员，又要写代码，又要写文档，真的是太困难了。这一点都不高效。写文档这些脏活、累活，交给ChatGPT来干吧。代码贴给TA，文档打出来，岂不美哉。

  • ? 11.1 提示词:Write comments for the code below: [code snippet]
  • ? 11.2 提示词:Write JSDoc comments for the below JavaScript function: [code snippet]

举例：

Write JSDoc comments for the below JavaScript function:

function deleteInactiveUser(inactiveUsers) {
  if (inactiveUsers.length > 0) {
    const userToDelete = inactiveUsers.pop();

    // Delete the inactive user.
    return admin.auth().deleteUser(userToDelete.uid).then(() => {
      return logger.log(
          "Deleted user account",
          userToDelete.uid,
          "because of inactivity",
      );
    }).catch((error) => {
      return logger.error(
          "Deletion of inactive user account",
          userToDelete.uid,
          "failed:",
          error,
      );
    });
  } else {
    return null;
  }
}

生成结果

以下是 JavaScript 函数的 JSDoc 注释（中文版）：

/**
 * 从给定的用户数组中删除最后一个不活跃用户，返回 Promise。
 *
 * @param {Array} inactiveUsers - 包含不活跃用户对象的数组。
 * @returns {Promise|null} 如果删除成功，返回一个 Promise；如果 inactiveUsers 数组为空，返回 null。
 *
 * @throws {Error} 如果 admin.auth().deleteUser() 方法出错，抛出异常。
 */
function deleteInactiveUser(inactiveUsers) {
  if (inactiveUsers.length > 0) {
    const userToDelete = inactiveUsers.pop();

    // 删除不活跃用户。
    return admin.auth().deleteUser(userToDelete.uid).then(() => {
      return logger.log(
          "删除用户账户",
          userToDelete.uid,
          "因为不活跃",
      );
    }).catch((error) => {
      return logger.error(
          "删除不活跃用户账户",
          userToDelete.uid,
          "失败：",
          error,
      );
    });
  } else {
    return null;
  }
}

十二、写命令

开发代码，比如用git管理代码仓库，使用 npm 管理本地代码的运行，编译，测试等等。每次重写，固然是乏味的。让ChatGPT来干吧。

  • ? 12.1 提示词:Write a shell command to [requirement]

举例:

Write a shell command to delete all files with the extension '.log' in the 'logs' folder

生成结果

以下是删除“logs”文件夹中所有扩展名为“.log”的文件的shell命令：

rm logs/*.log

该命令使用了“rm”命令来删除文件，以及通配符“”来匹配文件名。通配符“”表示匹配任何字符序列，因此命令将删除所有扩展名为“.log”的文件，无论它们的名称如何。请注意，这将不会删除子目录中的任何文件。

  • ? 12.2 提示词:Write a git command to [requirement]

举例:

Write a git command to undo the previous commit

生成结果

使用Git命令撤销之前的提交，可以使用以下命令：

git reset HEAD~1

这将取消上一次提交并将所有更改放回工作目录。如果您希望保留更改并将其保留在暂存区中，则可以使用以下命令：

git reset --soft HEAD~1

这将取消上一次提交并将更改保留在暂存区中，以便您可以重新提交它们。请注意，这些命令将更改历史记录，因此如果您在共享存储库上工作，则需要小心使用它们。

  • ? 12.3 提示词:Explain the following command [command]

举例:

Explain the following command [git switch -c feat/qwik-loaders]

生成结果

这条命令的作用是创建并切换到一个名为 "feat/qwik-loaders" 的新分支。具体解释如下：

  • ? "git switch" 是一个 Git 命令，用于切换分支或恢复工作树文件。在这个命令中，它用于创建并切换到一个新的分支。
  • ? "-c" 参数用于创建新分支。如果该参数没有被指定，"git switch" 命令将只切换到已存在的分支。
  • ? "feat/qwik-loaders" 是新分支的名称。这个名称应该能够清晰地表达新分支所涉及的特性或功能。在这个例子中，这个新分支可能是为了实现某个名为 "qwik loaders" 的功能。

因此，这个命令的作用是在当前分支基础上创建一个名为 "feat/qwik-loaders" 的新分支，并切换到该分支。

十三、写正则表达式

正则表达式实乃天书，非人类所能及。让ChatGPT上吧。

  • ? 13.1 提示词:Explain this regular expression: [regex]

举例:

Explain this regular expression in JavaScript: const regex = /^[A-Za-z0–9._%+-]+@[A-Za-z0–9.-]+\.[A-Za-z]{2,}$/;

生成结果

这个正则表达式可以用于匹配电子邮件地址。它的 JavaScript 表示为:

const regex = /^[A-Za-z0–9._%+-]+@[A-Za-z0–9.-]+\\.[A-Za-z]{2,}$/;

这个正则表达式可以解读为：

  • ? ^: 匹配输入的开始
  • ? [A-Za-z0–9._%+-]+: 匹配一个或多个大写或小写字母、数字、点（.）、下划线（_）、百分号（%）、加号（+）、减号（-）
  • ? @: 匹配 @ 符号
  • ? [A-Za-z0–9.-]+: 匹配一个或多个大写或小写字母、数字、点（.）、减号（-）
  • ? \\.: 匹配点（.），由于点在正则表达式中有特殊意义，因此需要使用反斜杠转义
  • ? [A-Za-z]{2,}: 匹配两个或更多大写或小写字母
  • ? $: 匹配输入的结尾

因此，这个正则表达式可以匹配所有符合标准格式的电子邮件地址，例如 username@example.com 或 first.last@subdomain.domain.com。

  • ? 13.2 提示词:Your role is to generate regular expressions that match specific patterns in text. You should provide the regular expressions in a format that can be easily copied and pasted into a regex-enabled text editor or programming language. Generate a regular expression that matches [text].

写在最后

如果是Web开发攻城狮，那就必须要使用ChatGPT，快速优化我们的工作流程，提高效率，让编码任务变得更加简单易行。

当然啦，ChatGPT虽然是一个强大的工具，但要记住它也有自己的局限性，只能作为知识和技能的补充哦。

在不断研究的同时，可以更好地发挥AI在Web开发中的优势。利用ChatGPT这样有价值的资源，大家可以自信地航行在Web开发的海洋中，提高自己的技能水平哦！

生意营销3大宝：彩铃、定位、认证，一个也不能少，如有需要，添加 微信：xnc528  备注：3

本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 820277912@qq.com 举报，一经查实，本站将立刻删除。
如若转载，请注明出处：https://www.clzz8.com/46412.html
赞 (0)
投稿用户
0
上一篇 2023年5月30日 am12:03
下一篇 2023年5月30日 am4:23

相关推荐