使用ChatGPT帮助我们编码的10种场景

这篇具有很好参考价值的文章主要介绍了使用ChatGPT帮助我们编码的10种场景。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


ChatGPT 的出现,彻底改变的很多代码开发的方式,特别是通用型的代码,使用它来帮助我们,很大程度上可以提升我们写代码的效率和质量。
本博主工作中主要进行前端方向的项目开发,本文将直接聚焦在代码编写相关的具体场景上。通过日常工作实践中发现的能够使用 ChatGPT 辅助我们编码的示例,一一列举了大概10种编码总做中可能出现的情形。大家有兴趣的可以了解一下,在条件合适的情况下,通过 ChatGPT 来提升写代码的速度,节省下摸鱼的时间,一举多得的好事。

1、技术搜索

这个场景是 ChatGPT 最常用的,也是为什么很多人鼓吹 ChatGPT 会干掉搜索引擎的原因之一。
在开发工作中,通过它来搜索各种技术知识,也是目前在开发者中较流行的运用了,这里就简单举个例子,比如我想知道GIF格式的压缩算法:

使用ChatGPT帮助我们编码的10种场景
还有,打打嘴仗,问它 Vue和React,哪个更好?

使用ChatGPT帮助我们编码的10种场景
看上去,在我这里的回答,是 Vue 更好一些,可能与我之前问过一些 Vue 的问题有关吧…

2、生成常用工具函数

ChatGPT 中生成前端代码,是相对方便的事情,比如我们工作中常用的一些工具函数,对于初学者还是非常有用的。

如下图所示,生成一个图片读取的函数:

使用ChatGPT帮助我们编码的10种场景
这段代码使用 FileReader 来读取文件信息,生成图像的 Base64 字符串,然后通过 Image 对象加载。

接下来改造这段代码,因为 Base64 字符串的缺点,我们不要使用 base64,就会换一种方式:

使用ChatGPT帮助我们编码的10种场景
上图,可以看到这里就换成了 BlobURL 的方式来转换图片。

当前前端开发中,使用 TypeScript 越来越流行,那我们也能给 ChatGPT 提要求,使用 TypeScript

使用ChatGPT帮助我们编码的10种场景
如上所示,在定义函数时,增加了类型。

3、帮助解读代码

工作中,如果我们对于某段代码不是很理解,也可以借助 ChatGPT 的帮助,通过它对代码的解读,我们也能更快的理解代码。
如下图所示,我截取了 fabric.js 库中开头的一段代码,发送到 ChatGPT 对话框,得到它的解读:

使用ChatGPT帮助我们编码的10种场景
几乎对代码逐行进行了解读。
下面再看一个例子,一段 Vue 中的 HTML 代码:

使用ChatGPT帮助我们编码的10种场景
也能每一步都解读出来,并且也指出了事一个Vue的单文件组件。

4、添加注释

ChatGPT 对代码的理解已经很牛了,添加注释肯定也是小菜一碟,特别是那些通用的注释,如下图,给上面的 fabric.js 代码添加注释:

使用ChatGPT帮助我们编码的10种场景
几乎每行代码都加了注释,真的已经很完善了。

当然,对于那些偏业务性的代码,注释还是得自己好好写。

5、优化代码

对代码进行重构优化,是我们项目开发中经常要做的事情,通过 ChatGPT 仍然可以在一定程度上改善我们的代码。
如下代码,用于获取当天的月日年字符串:

export function getTodayString () {
  const dt = new Date()
  const day = dt.getDate()
  const month = dt.getMonth() + 1
  const year = dt.getFullYear()
  return `${month > 9 ? month : '0' + month}.${day > 9 ? day : '0' + day}.${year}`
}

接下来,让 ChatGPT 帮我们优化一下代码,直接问它怎么优化,会输出结果:

使用ChatGPT帮助我们编码的10种场景
除了给出代码,还列出了具体的优化建议,使用什么方法,起到什么作用,非常详细,不管是优化代码还是学习技术知识,都能带来好处。

6、Vue2 转 Vue3

对代码进行修改,如将一段 Vue2 代码转为 Vue3 的写法,只需要输入 帮我把这段代码转为Vue3,然后贴出代码,就可以自动转换出来:

使用ChatGPT帮助我们编码的10种场景

这里 Vue 代码,并没有高亮,可能还不支持 Vue 的语法高亮,而 JavaScriptTypeScript 等则都支持代码高亮。

除了代码转换以外,还会针对贴出的代码,简要描述在 Vue3 中的差异:

需要注意的是:
1. Vue3 中没有了 inject 和 $bus,改为了 inject 和 eventBus。
2. 由于 Vue3 引入了 Composition API,所以 computed 和 methods 都被改为了 setup() 中的函数。同时,changeBrush() 中不再需要 $event 参数。
3. 在 Vue3 中,minV 属性改为了 min-v。

除此外,我们还可以将Vue代码转为纯Javascript实现:

使用ChatGPT帮助我们编码的10种场景
给出提示语,就能将当前的 Vue 单文件组件,转成一个html文件,使用纯 JavaScript
当然,对于代码中的一些业务性质、或者 Vue 复杂指令的一些代码,则需要自动手动添加了。

7、Vue 转 React

上面的示例是将 Vue 从2转为3或纯JS实现的,下面我们如果是转成另一个框架,如 React,看看效果如何:

使用ChatGPT帮助我们编码的10种场景
很快就完成了我们的需求,但在这里 ChatGPT 直接使用了老版本的组件方式 Component,更进一步的话,让它使用最新版本的重新生成,结果如下所示:

使用ChatGPT帮助我们编码的10种场景
代码中使用 useStateuseEffect 和函数组件的方式还是比较快速的,不过最新的 React 版本已经到了 18.2.0,这里存在大概一年多的时间差。

8、补充 TypeScript 类型

上面介绍工具函数的时候,已经尝试过给代码增加 TypeScript 类型,而添加TS类型的实际用处还是很大的,对于不想写类型声明的同学来说,完全可以全部交给 ChatGPT 来完成。
如我们需要将上文的 React 组件增加TS类型,很快就能输出:

使用ChatGPT帮助我们编码的10种场景
更多复杂的代码,都可以在 ChatGPT 中自动补齐TS类型声明,对于不会或懒得写的人来说,在这里自动生成也不错。

在给代码添加TS类型以外,也能较好的修改已有的TS类型,如代码如果使用了很多any,可以进行校正。
如下代码所示,一段简单的前端 WebSocket 的操作代码,对于其中几个参数,都是用 any 类型:

export const connectPromise = (socketUrl: string, info?: any, data?: any) => {
  return new Promise((resolve, reject) => {
    const singleWS: any = new WebSocket(socketUrl)
    singleWS.binaryType = 'arraybuffer'

    singleWS.onopen = () => {
      if (info) {
        singleWS.send(info)
        data && singleWS.send(data)
      }
    }
    singleWS.onmessage = (message: any) => {
      if (message && message.data) {
        resolve(message.data)
      } else {
        reject('empty')
      }
    }
    singleWS.onerror = (err: any) => {
      reject(err)
      singleWS.close()
    }
  })
}

这在正式开发中显然是不太合适的,一般都会避免使用 any 类型,把它发给 ChatGPT,就能够帮我们修正:

export const connectPromise = (socketUrl: string, info?: string | ArrayBuffer, data?: string | ArrayBuffer): Promise<ArrayBuffer> =>  {
  return new Promise((resolve, reject) => {
    const singleWS: WebSocket = new WebSocket(socketUrl)
    singleWS.binaryType = 'arraybuffer'

    singleWS.onopen = () => {
      if (info) {
        singleWS.send(info)
        data && singleWS.send(data)
      }
    }
    singleWS.onmessage = (message: MessageEvent) => {
      if (message && message.data) {
        resolve(message.data)
      } else {
        reject('empty')
      }
    }
    singleWS.onerror = (err: Event) => {
      reject(err)
      singleWS.close()
    }
  })
}

以上代码,就是 ChatGPT 修改后的,将 any 类型全部替换,并且可以直接在项目中运行。

当然,ChatGPT在类型补充上也不是每次都完全正确,对于一些复杂的或非通用型的类型,也会存在问题,需要进行手动调整纠正。

9、生成文档

技术文档也是开发中不可少的一环,通过使用 ChatGPT 可以为我们创建各种不同的文档模板,如项目的 README.md 说明文档、RESTful API 接口文档等等。
除了各种文档模板,也可以直接给它一段代码,帮助生成相应的文档,如果接口代码的文档:

使用ChatGPT帮助我们编码的10种场景
当然,图中可看出文档比较粗糙,需要二次加工。

10、工具配置

在前端开发中,设置构建、部署相关的配置文件,也是经常碰到的,很多人也都储备了一套自己的工具配置文件模板,但对于初学者或者没有储备的同学,也可以尝试在 ChatGPT 中生成。

如下,配置 tsconfig 文件:

使用ChatGPT帮助我们编码的10种场景
再比如,nginx 配置:

使用ChatGPT帮助我们编码的10种场景
如果给 ChatGPT 足够多的提示指令,还是能够比较方便和有效的生成我们想要的内容的。

总结

以上只是平时可能会用到的一些场景,也许还有很多其他各种使用方式,用来帮助我们更好的编写代码,完全可以把 ChatGPT 当做编码助手,帮助我们更高效的完成任务。
不过,我们也需要注意,ChatGPT 虽然可以比较正确的结果————很多代码能直接运行,但多数时候我们需要进行一定的审核和验证,切忌盲目复制粘贴,尽量确保不会出现问题。
让它成为助手,而不是完全依赖它。文章来源地址https://www.toymoban.com/news/detail-418904.html

到了这里,关于使用ChatGPT帮助我们编码的10种场景的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 在Python中使用Kafka帮助我们处理数据

    Kafka是一个分布式的流数据平台,它可以快速地处理大量的实时数据。Python是一种广泛使用的编程语言,它具有易学易用、高效、灵活等特点。在Python中使用Kafka可以帮助我们更好地处理大量的数据。本文将介绍如何在Python中使用Kafka简单案例。 在Python中使用Kafka,需要安装

    2024年02月12日
    浏览(42)
  • 摸得到的chatgpt--AI场景下的编码

    千帆竞逐的时代序幕 从去年ChatGPT正式对外发布至今,其热度一直居高不下,无数大模型+类新的场景均引得无数已退休大佬下场参与,可见其中蕴含的巨大机会。2C端的搜索场景、聊天场景、教育场景、游戏场景、辅助生成场景,2B的客服场景、应用交互升级场景等等无限的蓝

    2024年02月09日
    浏览(53)
  • 【csdn AI写作助手能帮助我们做什么呢?】

    CSDN AI写作助手上线了!InsCode AI 创作助手不仅能够帮助用户高效创作文章,而且能够作为对话式AI回答你想知道的问题。成倍提高生产力! 提示:根据自身理解和情况回答 AI创作工具似乎是随着chat-gtp出现的,至于早起是否有AI创作工具,AI助手似乎可以帮助我回答这个问题?

    2024年02月02日
    浏览(39)
  • 关键词采集工具可以帮助我们做那些方面的工作

    针对搜索引擎的采集工具可以帮助我们做那些方面的工作,至少从10个工作场景说明,并列举详细的使用场景 Msray-plus,是一款企业级综合性爬虫/采集软件。 支持亿级数据存储、导入、重复判断等。无需使用复杂的命令,提供本地WEB管理后台对软件进行相关操作,功能

    2023年04月15日
    浏览(44)
  • 【ChatGPT 指令大全】怎么使用ChatGPT来帮我们写作

    在数字化时代,人工智能为我们的生活带来了无数便利和创新。在写作领域,ChatGPT作为一种智能助手,为我们提供了强大的帮助。不论是作文、文章,还是日常函电,ChatGPT都能成为我们的得力助手,快速提供准确的文本。   写出 [数字] 个有关 [主题] 的 [社群平台] 风格标题

    2024年02月13日
    浏览(43)
  • 7 个适合初学者的项目,可帮助您开始使用 ChatGPT

    推荐:使用 NSDT场景编辑器快速搭建3D应用场景 从自动化日常任务到预测复杂模式,人工智能正在重塑行业并重新定义可能性。 当我们站在这场人工智能革命中时, 我们必须了解它的潜力并将其整合到我们的日常工作流程中。 然而。。。我知道开始使用这些新技术可能会让

    2024年02月09日
    浏览(77)
  • base64编码:js实现base64编码的3种方式,多场景下分析使用

    js实现base64编码,前端一般应用场景在与后端接口参数中体现,后端可能需要某个字段是base64编码的字符,这时候就需要用前端的方法进行转换,再作为参数传递到服务端。 js实现base64编码的3种方式 1. 使用base64.js进行转换 获取base64.js,可以直接搜索base64.js下载。推荐使用n

    2024年02月16日
    浏览(48)
  • 使用 ChatGPT 从视频脚本创建知识图谱,使用 GPT-4 作为领域专家来帮助您从视频转录中提取知识(教程含完整源码)

    我一直很喜欢深海纪录片,因为这里的生态系统和动物与陆地上的大不相同。因此,我决定在水下纪录片上测试 GPT-4 的信息提取能力。此外,我不知道有任何开源 NLP 模型经过训练可以检测海洋植物和生物之间的关系。因此,一部深海纪录片是使用 GPT-4 构建知识图谱的绝佳示

    2024年02月15日
    浏览(41)
  • Paper:txyz_ai(一款帮助科研人员阅读PDF论文ChatGPT利器)的简介、安装、使用方法之详细攻略

    Paper:txyz_ai(一款帮助科研人员阅读PDF论文ChatGPT利器)的简介、安装、使用方法之详细攻略 目录 txyz.ai的简介 txyz.ai的安装 1、Web端plug-in安装步骤图文教程

    2024年02月08日
    浏览(40)
  • GPT-人工智能如何改变我们的编码方式

    在本文中,您将找到我对人工智能和工作的最新研究的总结(探索人工智能对生产力的影响,同时开启对长期影响的讨论),一个准实验方法的示例(通过 ChatGPT 和 Stack Overflow 进行说明,了解如何使用简单的 SQL 查询从 Stack Overflow 中提取数据。 作为与大多数技术革命一样,

    2024年02月07日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包