7个必备JavaScript优化技巧，CodeGeeX 5秒搞定了！
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";
本文由博客一文多发平台 OpenWrite 发布！
