本文正在参加「金石计划」

前言

ChatGPT是openAi于2022年11月推出的一个火爆全球的ai谈天机器人，作为一个前端开发人员，咱们能够让ChatGPT帮咱们做什么呢？我会将chatGPT的部分回答也贴上来和各位大佬们一起同享。

ChatGPT能够供给的协助的比如

1. 前端有关的技能解答：

当你遇到跟前端有关的技能问题时，能够问询chatGPT，比方咱们问他最近很火的微前端：

作为一名前端开发，我们可以让chatGPT帮我们做什么？

2. 资源引荐：

在需求学习新技能或寻觅教程时，咱们能够向ChatGPT寻求资源。它能够引荐一些在线资源，包含教程、博客、文档等。

你能够笼统的问：请引荐我一些前端学习网站

它就会给你引荐一些资源：

  1. MDN Web 文档（MDN Web Docs）：developer.mozilla.org/ MDN 是一个详尽的资源库，涵盖了 HTML、CSS 和 JavaScript 等前端技能的教程、参考文档和示例代码。
  2. W3Schools：www.w3schools.com/ W3Schools 供给了丰富的前端开发教程和实例，覆盖了 HTML、CSS、JavaScript、jQuery、Bootstrap 等技能，适合初学者入门。
  3. ：/ 是一个专注于技能领域的社区，你能够在这里找到许多关于前端开发的文章、教程和项目共享。
  4. CSS-Tricks：css-tricks.com/ CSS-Tricks 供给了许多 CSS 技巧和前端开发相关的文章，是一个学习和进步 CSS 技能的好去处。
  5. freeCodeCamp：www.freecodecamp.org/ freeCodeCamp 是一个免费的编程学习渠道，供给了 HTML、CSS、JavaScript 等前端技能的课程和实践项目，以及一个活泼的社区论坛。
  6. Codecademy：www.codecademy.com/ Codecademy 是一个在线学习渠道，供给了许多前端技能的互动式课程，如 HTML、CSS 和 JavaScript，适合初学者入门。
  7. 前端大全：www.frontendfront.com/ 前端大全是一个前端开发资源的聚合站点，收集了许多来自互联网的优质文章、教程和东西，协助你更方便地学习前端技能。

作为一名前端开发，我们可以让chatGPT帮我们做什么？

当然如果你有特定的，就能够问得更详细一些，详细到某个常识点。 比方让它供给一些three.js的学习资源

作为一名前端开发，我们可以让chatGPT帮我们做什么？

从以上的比如，咱们能够看出来，只要向它发问，咱们就能够获取学习的资源，这对于咱们学习前端来说非常方便，并且咱们能够留意看他的回答，你会发现，是不是与你的挑选的优先级简直共同，就拿我来说，当我从一个小白开始学前端的时候，MDN确实是我第一挑选的资源，其次是 W3C，再后来便是运用协助学习了，还有three.js也是优先引荐官网，阐明即便是资源引荐，它也不是笼统的列出所知道的资源。不愧是人工智能啊！

3. 设计主张：

应该有许多小伙伴跟我相同，会写代码，但是对设计一窍不通，在小公司的时候，常常是咱们领导给我个原型图，让我自己去定义款式，这个时候就能够向ChatGPT咨询关于布局、色彩搭配、字体挑选等方面的主张，让你即便没有UI也能轻松搞定款式。

作为一名前端开发，我们可以让chatGPT帮我们做什么？

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，让它帮我优化，以下是优化后的代码

作为一名前端开发，我们可以让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帮我们做什么？

咱们就能够跟依据ChatGPT的主张，对项目进行优化，当然也纷歧定要，全都依照它说的做，究竟这仅仅主张哦，咱们仍是要按需优化对。

6. 技能选型主张

当你还在苦恼决议运用哪种前端库、框架或东西时，你能够试试看问询ChatGPT的意见，能够以它的意见为辅助，为项目挑选适宜的技能栈。不得不说这个功用对我来说太有用了，每次接到一个新的项目，我就要开始考虑用什么技能栈。除了以往运用的旧技能栈，咱们还要关心，有没有更好的挑选以及技能栈是否有更新。

作为一名前端开发，我们可以让chatGPT帮我们做什么？

咱们能够依据ChatGPT给的技能选型主张，依据本身的项目去挑选。

7. 问题排查

当你遇到问题或过错时，能够向ChatGPT描绘问题或许直接把报错发给它，它将协助你找到或许的原因并供给处理方案。

这应该是用ChatGPT最多的功用了，便是协助处理BUG。这就不举例啦，因为在日常写代码中，这个实在是阅历太多了。大都时候我会谷歌一下，去看各种答案剖析，其实许多时候也不知道那个答案是正确的或许是最优解，这时候咱们就靠chatGPT去协助处理BUG，其实效率更高

总结

运用ChatGPT已经有一段时间了，给我的感觉是更像一个功用更加完善也更方便的浏览器搜索引擎，但是一起它比搜索引擎的成果更智能。用ChatGPT要留意ChatGPT的常识截至2021年9月，因此对于在此之后发布的新技能或更新，它或许无法供给最精确的信息。并且它现在只能是谈天对话，无法去辨认图片，不过它仍是能很好的帮咱们处理大部分前端问题。

作为一名前端开发，我们可以让chatGPT帮我们做什么？