乐趣区

关于visual-studio-code:7个必备JavaScript优化技巧CodeGeeX-5秒搞定了

jiezi

JavaScript，目前成了应用最宽泛的编程语言。这篇文章给出的是一些 JavaScript 的优化技巧，这些技巧帮忙开发者编写出更好的代码。当写完这些代码段之后，我忽然意识到，所有的这些代码段，因为它们的罕用性，非常适合用 AI 辅助编程工具 CodeGeeX 来主动生成。

下载应用——CodeGeeX 插件，在 VSCode 和 JetBrains IDEs 能够间接收费下载应用。CodeGeeX 插件能够主动实现代码生成，能够逐行为代码增加正文，也能够进行不同编程语言之间的代码翻译。特地值得点赞的性能“Ask CodeGeeX”，把相似 chatGPT 一样的智能问答性能，与开发者编程环境 IDE 深度交融。开发者能够在 IDE 中，通过问答对话的形式解决技术问题。

在 IDE 中应用 Ask CodeGeeX 性能，使得开发过程中遇到的问题，都能够在 IDE 中沉迷式解决，不必跳出开发环境寻找解决代码问题的答案，晋升了代码开发效率。同时，在这个新版本中，通过对话框区域常用命令“explain/ 解释代码”、“comment/ 生成正文”、“fixbug/ 查看 bug”的快捷方式，能够间接操作代码，实现代码解释，逐行增加代码正文，尝试修复代码片段潜在 bug 等性能。

“explain/ 解释代码”按钮，取得整段代码解释

当你编写代码时，心愿理解某一段生成的代码作何解释？那么你就能够在 CodeGeeX 插件的代码生成区域中，选中该段代码，左侧边栏的对话区会呈现浮层，同时展现选中代码。在对话区通过快捷按钮：“解释代码”，在对话界面中就能够回复出整段的代码解释。

“comment/ 生成正文”按钮为代码逐行增加正文

同样，当你心愿为一段生成的代码逐行增加正文，你就能够在 CodeGeeX 代码生成区域，选中该段代码，侧边栏的对话区会呈现浮层，同时展现选中代码。在对话区通过快捷按钮：“生成正文”，在对话界面就能够间接为这段代码逐行增加正文。

“fixbug/ 查看 bug”修复代码潜在 bug

当你编写代码遇到一个谬误时，在 CodeGeeX 插件的代码生成区域中选中该段代码，左侧边栏的对话区会呈现浮层，同时展现选中代码。在对话区通过快捷按钮：“查看 bug”，代码编辑区就能够间接帮你找到这段代码中的问题并进行谬误修复，并且对修复代码的区域做高亮标记，不便进行代码对照。

Fallback Values：回退值 

// Lengthy
let name;
if (user?.name) {name = user.name;} else {name = "Anonymous";}

// Shortly
const name = user?.name ?? "Anonymous";

这个代码段能够用 CodeGeeX 插件工具，在你代码上下文中主动生成。

Shortly For Switching
Long switch 通常应用一个对象来最大化，其中 Key 为开关，Value 为返回值。

const dayNumber = new Date().getDay();

// Lengthy
let day;
switch (dayNumber) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
}

// Shortly
const days = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
];

// Or
const days = `Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday`.split(",");

const day = days[dateNumber];

这个代码段能够用 CodeGeeX 插件工具，在你代码上下文中主动生成。

Calls To Functions

函数调用 

// Lengthy
function f1() {// ...}
function f2() {// ...}

// Shorter
condition ? f1() : f2();

这个代码段能够用 CodeGeeX 插件工具，在你代码上下文中主动生成。

多个字符串查看

通常须要查看字符串是否等于多个值之一，不难但很繁琐。这里齐全能够交给 CodeGeeX 来生成这段代码。

// Lenghty
const isVowel = (letter) => {
  return (
    letter === "a" ||
    letter === "e" ||
    letter === "i" ||
    letter === "o" ||
    letter === "u"
  );
};

// Shortly
const isVowel = letter => /[aeiou]/i.test(letter);

For-of 和 For-in 循环有利于反复数组或对象，无需手动跟踪对象键的索引。

For-of

const arr = [1, 2, 3, 4, 5];

// Lengthy
for (let i = 0; i < arr.length; i++) {const element = arr[i];
  // ...
}

// Shortly
for (const element of arr) {// ...}

For-in

const obj = {
  a: 1,
  b: 2,
  c: 3,
};

// Lengthy
const keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {const key = keys[i];
  const value = obj[key];
  // ...
}

// Shortly
for (const key in obj) {const value = obj[key];
  // ...
}

这个代码段能够用 CodeGeeX 插件工具，在你代码上下文中主动生成。

False Checks

如果要查看变量是空、未定义、0、假、还是空字符串，能够应用逻辑非执行操作。使得验证变量是否蕴含无效数据变得简略。

// Lengthy
const isFalsey = (value) => {
  if (
    value === null ||
    value === undefined ||
    value === 0 ||
    value === false ||
    value === NaN ||
    value === ""
  ) {return true;}
  return false;
};

// Shortly
const isFalsey = (value) => !value;

这个代码段能够用 CodeGeeX 插件工具，在你代码上下文中主动生成。

Secondary Operator

JavaScript 开发肯定遇到过 ternary operator。这是编写简洁版 if-else 语句的绝佳办法。你能够用它来编写简洁的代码，甚至能够连起来查看多个条件。

// Lengthy
let info;

if (value < minValue) {info = "Value is too small";} else if (value > maxValue) {info = "Value is too large";} else {info = "Value is in range";}

// Shortly
const info =
  value < minValue
    ? "Value is too small"
    : value > maxValue ? "Value is too large" : "Value is in range";
退出移动版