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

文章目录

    • 1、技术搜索
    • 2、生成常用工具函数
    • 3、帮助解读代码
    • 4、添加注释
    • 5、优化代码
    • 6、Vue2 转 Vue3
    • 7、Vue 转 React
    • 8、补充 TypeScript 类型
    • 9、生成文档
    • 10、工具配置
    • 总结

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

1、技术搜索

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

在这里插入图片描述
还有,打打嘴仗,问它 Vue和React,哪个更好?

在这里插入图片描述
看上去,在我这里的回答,是 Vue 更好一些,可能与我之前问过一些 Vue 的问题有关吧…

2、生成常用工具函数

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

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

在这里插入图片描述
这段代码使用 FileReader 来读取文件信息,生成图像的 Base64 字符串,然后通过 Image 对象加载。

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

在这里插入图片描述
上图,可以看到这里就换成了 BlobURL 的方式来转换图片。

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

在这里插入图片描述
如上所示,在定义函数时,增加了类型。

3、帮助解读代码

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

在这里插入图片描述
几乎对代码逐行进行了解读。
下面再看一个例子,一段 Vue 中的 HTML 代码:

在这里插入图片描述
也能每一步都解读出来,并且也指出了事一个Vue的单文件组件。

4、添加注释

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

在这里插入图片描述
几乎每行代码都加了注释,真的已经很完善了。

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

5、优化代码

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

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

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

在这里插入图片描述
除了给出代码,还列出了具体的优化建议,使用什么方法,起到什么作用,非常详细,不管是优化代码还是学习技术知识,都能带来好处。

6、Vue2 转 Vue3

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

在这里插入图片描述

这里 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实现:

在这里插入图片描述
给出提示语,就能将当前的 Vue 单文件组件,转成一个html文件,使用纯 JavaScript
当然,对于代码中的一些业务性质、或者 Vue 复杂指令的一些代码,则需要自动手动添加了。

7、Vue 转 React

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

在这里插入图片描述
很快就完成了我们的需求,但在这里 ChatGPT 直接使用了老版本的组件方式 Component,更进一步的话,让它使用最新版本的重新生成,结果如下所示:

在这里插入图片描述
代码中使用 useStateuseEffect 和函数组件的方式还是比较快速的,不过最新的 React 版本已经到了 18.2.0,这里存在大概一年多的时间差。

8、补充 TypeScript 类型

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

在这里插入图片描述
更多复杂的代码,都可以在 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 接口文档等等。
除了各种文档模板,也可以直接给它一段代码,帮助生成相应的文档,如果接口代码的文档:

在这里插入图片描述
当然,图中可看出文档比较粗糙,需要二次加工。

10、工具配置

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

如下,配置 tsconfig 文件:

在这里插入图片描述
再比如,nginx 配置:

在这里插入图片描述
如果给 ChatGPT 足够多的提示指令,还是能够比较方便和有效的生成我们想要的内容的。

总结

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/32456.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【会讯易】4月线下活动分享

4月&#xff0c;全国会展活动恢复的势头愈加猛烈&#xff0c;师盛也马不停蹄&#xff0c;足迹遍布北京、上海、广州、深圳、杭州、三亚、南京、苏州、绍兴等地。在活动紧凑、地域跨度较大的情况下&#xff0c;师盛充分发挥16年的现场运营经验和能力&#xff0c;合理规划人员和物…

国际短信通道短信后台软件路由流程—移讯云短信系统

国际短信通道短信后台源码路由流程—移讯云短信系统 用户模板审核和签名审核 可审核用户提交过来的短信模板&#xff0c;可审核用户提交过来的签名&#xff0c;可管理用户提交过来的模板和签名进行编辑删除和修改&#xff0c;支持用户企业认证和个人认证 短信号码分拣功能介绍…

android短信和彩信探秘threads

android源代码在 彩信sms 表和彩信 pdu表&#xff0c;增加了一个触发器 CREATE TRIGGER delete_obsolete_threads_pdu AFTER DELETE ON pdu BEGIN DELETE FROM threads WHERE _id old.thread_id AND _id NOT IN (SELECT thread_id FROM sms UNION SEL…

中国最容易和最难被GPT所代替的TOP25职业!

ChatGPT狂飙160天&#xff0c;世界已经不是之前的样子。 我新建了人工智能中文站https://tmqcjr.com 每天给大家更新可用的国内可用chatGPT资源 OpenAI 研究人员曾发文称「约 80% 美国人的工作将被 AI 影响」。 文章的结论是&#xff0c;至少80%的美国劳动力会受到影响&#xf…

AI帮我搞科研-网站汇总

检索相关论文&#xff1a;https://www.connectedpapers.com/ 说明&#xff1a;Connected Papers 不是引文树。为了创建每个图表&#xff0c;网站分析了大约 50,000 篇论文&#xff0c;并选择了几十篇与原始论文有最强联系的论文。在图中&#xff0c;论文根据它们的相似性进行…

android6 wifi耗电,耗电太快?快来看不一样的安卓手机省电攻略

前阵子在官方授权店把我的iPhone电池换了个新的&#xff0c;感觉自己的手机又活过来了!那么问题来了&#xff0c;咱们的安卓手机该怎么省电呐~ 所以我发现其实最简单粗暴的方法就是 换电池&#xff01;别打我…我就是皮一下… 下面就是知识点了&#xff0c;快点操作起来吧~ 首先…

股票价格趋势预测与量化投资案例可视化演示系统(附代码)

摘要 随着全球经济与股市的快速发展&#xff0c;股票投资成为了民众们常用的理财方式之一。近年来&#xff0c;量化投资凭借其优良的纪律性、准确性、时效性和系统性等优势受到越来越多的关注。与西方成熟市场相比&#xff0c;我国量化投资还处于起步阶段&#xff0c;存在一些…

基于大数据的股票数据可视化分析与预测系统

温馨提示&#xff1a;文末有 CSDN 平台官方提供的博主 Wechat / QQ 名片 :) 1. 项目简介 股票市场行情分析与预测是数据分析领域里面的重头戏&#xff0c;其符合大数据的四大特征&#xff1a;交易量大、频率高、数据种类多、价值高。 本项目基于 Python 利用网络爬虫技术从某财…

TensorFlow神经网络实现股票预测

目录 1、数据来源 2、数据可视化 3、神经网络设计 神经网络&#xff08;NeuralNetworks&#xff09;是一种用训练数据拟合目标函数的黑箱模型&#xff0c;只要数据量足够大&#xff0c;它可以拟合出输入到输出之间的任意函数关系。 本篇博文将使用TensorFlow神经网络进行股…

火狐插件FoxyProxy的使用方法

以前自己挖漏洞使用火狐burp抓包测试&#xff0c;但是每次浏览器开代理老麻烦了 今天同事无意间给我提了这个插件FoxyProxy 很实用&#xff0c;下面是使用教程&#xff0c;很直白很详细 首先安装火狐插件FoxyProxy 然后选择Options开始配置 . 然后重启浏览器 选中Burpsuite …

如何解决:FIREFOX的副本已经打开。一次只能打开一份FIREFOX

1.问题 由于电脑卡机使Firefox自动退出之后&#xff0c;重新点击Firefox图标无法打开程序在mac版Firefox中打开时提示&#xff1a;“Firefox的副本已经打开。一次只能打开一份Firefox” 2.解决 重启没解决使用终端中断程序也无法解决活动监视器中中断程序解决 3.方法 1.其他…

Firefox浏览器多账号登陆方法

1、需要安装插件Multifox&#xff0c;由于此插件已经从firefox官网&#xff08;插件&#xff09;上下架&#xff0c;因此需要从Multifox的github上直接下载 2、下载地址&#xff1a;https://github.com/hultmann/multifox/releases/tag/3.2.3 3、直接选则“ multifox-3.2.3-fx.…

Firefox个性化教程

Firefox是跨平台兼容的浏览器软件 注意&#xff0c;是浏览器软件而不是搜索引擎 可能有人不明白&#xff0c;那我简单讲解。 常见的浏览器软件有edge&#xff0c;Firefox&#xff0c;chrome之类的 常见的搜索引擎有Google&#xff0c;bing&#xff0c;duck duck go&#xff0c;…

火狐安全软件Huohong

你还在为垃圾软件&#xff0c;恶意弹窗&#xff0c;病毒骚扰等而烦扰吗&#xff1f; 让简约高效的火狐安全软件来帮助你吧&#xff01; 火绒互联网安全软件 — 轻巧、高效、超强防御的安全防护软件。功能强悍&#xff0c;体量轻巧&#xff0c;既干净又安静。它能全面防御病毒、…

音视频技术开发周刊 | 298

每周一期&#xff0c;纵览音视频技术领域的干货。 新闻投稿&#xff1a;contributelivevideostack.com。 AI艺术在北京798&#xff0c;展望人工智能与环境的未来 本文很有意思的提出了个假设&#xff0c;通过人工智能和艺术家协作与实践产生环绕地球的叙事&#xff0c;去开启置…

chatgpt赋能python:用Python模拟串口:学习串口通信的好方法

用Python模拟串口&#xff1a;学习串口通信的好方法 计算机与外部设备之间的通信经常需要串口。串口通信是指通过串行通信协议在计算机与外部设备之间进行数据传输。在实验室工作中&#xff0c;在传感器网络和控制系统中我们经常使用串口进行通信。为了调试这些系统&#xff0…

绿联nas骚操作,没事帮你压测下网络

如果遇到路由器频繁掉网&#xff0c;且家里有个绿联nas&#xff0c;那么大概率是nas的锅&#xff0c; 没啥值钱东西&#xff0c;希望不要掏空我的资料~ 继扫盘之后的又一骚操作 发现自从更新最新版本后&#xff0c;家里频繁出现断网。因为路由器为与nas通过单口1000兆&#xff…

History of Object Recognition (物体识别)

在github上看到一副总结的非常好的图&#xff08;原图地址&#xff09;先码住 &#x1f600;&#x1f600;&#x1f600; 物体识别的综述 &#x1f340;发展历史&#xff1a; &#x1f331;图像分类&#xff08;Image Classification&#xff09; 任务&#xff1a;根据图像中…

谷歌 TensorFlow 物理检测 API,目前最好的物体识别方案?

原文&#xff1a;Is Google Tensorflow Object Detection API the easiest way to implement image recognition? 作者&#xff1a;Priya Dwivedi 译者&#xff1a;聂震坤 审校&#xff1a;屠敏 用大数据干大事&#xff01; 目前有很多种图像识别的方案&#xff0c;而 Goog…

姿态识别、手势识别(附代码)

姿态识别技术是一种基于计算机视觉的人体姿态分析方法,可以通过分析人体的姿态,提取出人体的关键点和骨架信息,并对人体的姿态进行建模和识别。随着深度学习技术的发展,近年来姿态识别技术得到了广泛的应用和研究,其中Pose是一种基于深度学习的姿态识别工具包。本篇博客将…