本文正在参加「金石计划」
前言
ChatGPT是openAi于2022年11月推出的一个火爆全球的ai谈天机器人，作为一个前端开发人员，咱们能够让ChatGPT帮咱们做什么呢？我会将chatGPT的部分回答也贴上来和各位大佬们一起同享。
ChatGPT能够供给的协助的比如
1. 前端有关的技能解答：
当你遇到跟前端有关的技能问题时，能够问询chatGPT，比方咱们问他最近很火的微前端：
2. 资源引荐：
在需求学习新技能或寻觅教程时，咱们能够向ChatGPT寻求资源。它能够引荐一些在线资源，包含教程、博客、文档等。
你能够笼统的问：请引荐我一些前端学习网站
它就会给你引荐一些资源：
- MDN Web 文档（MDN Web Docs）：developer.mozilla.org/ MDN 是一个详尽的资源库，涵盖了 HTML、CSS 和 JavaScript 等前端技能的教程、参考文档和示例代码。
- W3Schools：www.w3schools.com/ W3Schools 供给了丰富的前端开发教程和实例，覆盖了 HTML、CSS、JavaScript、jQuery、Bootstrap 等技能，适合初学者入门。
- ：/ 是一个专注于技能领域的社区，你能够在这里找到许多关于前端开发的文章、教程和项目共享。
- CSS-Tricks：css-tricks.com/ CSS-Tricks 供给了许多 CSS 技巧和前端开发相关的文章，是一个学习和进步 CSS 技能的好去处。
- freeCodeCamp：www.freecodecamp.org/ freeCodeCamp 是一个免费的编程学习渠道，供给了 HTML、CSS、JavaScript 等前端技能的课程和实践项目，以及一个活泼的社区论坛。
- Codecademy：www.codecademy.com/ Codecademy 是一个在线学习渠道，供给了许多前端技能的互动式课程，如 HTML、CSS 和 JavaScript，适合初学者入门。
- 前端大全：www.frontendfront.com/ 前端大全是一个前端开发资源的聚合站点，收集了许多来自互联网的优质文章、教程和东西，协助你更方便地学习前端技能。
当然如果你有特定的，就能够问得更详细一些，详细到某个常识点。 比方让它供给一些three.js的学习资源
从以上的比如，咱们能够看出来，只要向它发问，咱们就能够获取学习的资源，这对于咱们学习前端来说非常方便，并且咱们能够留意看他的回答，你会发现，是不是与你的挑选的优先级简直共同，就拿我来说，当我从一个小白开始学前端的时候，MDN确实是我第一挑选的资源，其次是 W3C，再后来便是运用协助学习了，还有three.js也是优先引荐官网，阐明即便是资源引荐，它也不是笼统的列出所知道的资源。不愧是人工智能啊！
3. 设计主张：
应该有许多小伙伴跟我相同，会写代码，但是对设计一窍不通，在小公司的时候，常常是咱们领导给我个原型图，让我自己去定义款式，这个时候就能够向ChatGPT咨询关于布局、色彩搭配、字体挑选等方面的主张，让你即便没有UI也能轻松搞定款式。
4. 代码查看
你是否明知道自己代码写得烂，但是却不知道从何下手优化，或许代码过错，你却不知道哪里过错，作为一个常常有这种感觉的人，ChatGPT代码查看的功用也太棒了，当你想要查看代码质量时，你能够将代码片段复制给ChatGPT。它会尝试查看代码的结构、可读性以及是否存在潜在过错。
献祭一下我从前写的欠好的代码，把它丢给ChatGPT让它帮我优化一下这段代码。
async initData() {
this.loading = true
if (this.curNetId || this.curLineId || this.curSegmentId) {
if (this.curSegmentId) {
const resp = await getSafeOverviewHidden({
workAreaId: this.curSegmentId,
})
const resp2 = await getSafeDangerTable({
lineNetId: '',
lineId: '',
pageNum: this.page,
areaId: this.curSegmentId,
pageSize: 10,
})
this.dangerPage = resp2.data || {}
this.dangerData = resp.data
} else if (this.curLineId) {
const resp = await getSafeDangerData({
lineId: this.curLineId,
})
const resp2 = await getSafeDangerTable({
lineId: this.curLineId,
pageNum: this.page,
pageSize: 10,
})
this.dangerPage = resp2.data || {}
this.dangerData = resp.data
} else {
const resp = await getSafeDangerData({
lineNetId: this.curNetId,
})
const resp2 = await getSafeDangerTable({
lineNetId: this.curNetId,
pageNum: this.page,
pageSize: 10,
})
this.dangerPage = resp2.data || {}
this.dangerData = resp.data
}
}
this.loading = false
},
把代码丢给ChatGPT，让它帮我优化，以下是优化后的代码
async initData() {
this.loading = true;
if (this.curNetId || this.curLineId || this.curSegmentId) {
const params = {
workAreaId: this.curSegmentId,
lineId: this.curLineId,
lineNetId: this.curNetId,
pageNum: this.page,
pageSize: 10
};
const [resp, resp2] = await Promise.all([
this.curSegmentId
? getSafeOverviewHidden({ workAreaId: this.curSegmentId })
: getSafeDangerData({ lineId: this.curLineId, lineNetId: this.curNetId }),
getSafeDangerTable(params)
]);
this.dangerData = resp.data;
this.dangerPage = resp2.data || {};
}
this.loading = false;
}
咱们能够看出，让ChatGPT协助优化之后，代码的行数削减了，代码的可读性进步了，健壮性更强了，当然优化大部分仍是要靠自己，如果不知道怎么优化自己写的代码的话，无妨让ChatGPT帮你优化代码
5. 功用优化主张
ChatGPT能够为供给有关进步网站功用的主张，例如优化图片、削减HTTP恳求、运用CDN等。我之前从前开发过大屏项目，众所周知大屏项目最大的问题便是资源太多，且一次性要展示较多的内容，这时候大屏优化就极为重要，咱们能够向ChatGPT问询有什么优化主张吗？
咱们就能够跟依据ChatGPT的主张，对项目进行优化，当然也纷歧定要，全都依照它说的做，究竟这仅仅主张哦，咱们仍是要按需优化对。
6. 技能选型主张
当你还在苦恼决议运用哪种前端库、框架或东西时，你能够试试看问询ChatGPT的意见，能够以它的意见为辅助，为项目挑选适宜的技能栈。不得不说这个功用对我来说太有用了，每次接到一个新的项目，我就要开始考虑用什么技能栈。除了以往运用的旧技能栈，咱们还要关心，有没有更好的挑选以及技能栈是否有更新。
咱们能够依据ChatGPT给的技能选型主张，依据本身的项目去挑选。
7. 问题排查
当你遇到问题或过错时，能够向ChatGPT描绘问题或许直接把报错发给它，它将协助你找到或许的原因并供给处理方案。
这应该是用ChatGPT最多的功用了，便是协助处理BUG。这就不举例啦，因为在日常写代码中，这个实在是阅历太多了。大都时候我会谷歌一下，去看各种答案剖析，其实许多时候也不知道那个答案是正确的或许是最优解，这时候咱们就靠chatGPT去协助处理BUG，其实效率更高
总结
运用ChatGPT已经有一段时间了，给我的感觉是更像一个功用更加完善也更方便的浏览器搜索引擎，但是一起它比搜索引擎的成果更智能。用ChatGPT要留意ChatGPT的常识截至2021年9月，因此对于在此之后发布的新技能或更新，它或许无法供给最精确的信息。并且它现在只能是谈天对话，无法去辨认图片，不过它仍是能很好的帮咱们处理大部分前端问题。
