七个你需要知道的强大 JavaScript 优化技巧 _JavaScript

每种语言都有其独特性，使用最广泛的编程语言 JAVAScript 也不例外。

文章插图

今天这篇文章将讨论一些 JavaScript 通用优化技巧，这些技巧将帮助您编写更好的代码，希望你能从今天这篇文章中获取一些新知识。
1. Fallback Values如果值为 [] 或 0 ，则使用逻辑或 || 没有给你预期的结果。
无效共生将是一个更好的解决方案？如果定义的值为 null 或未定义，则仅使用回退值。

// Lengthylet name;if (user?.name) {name = user.name;} else {name = "Anonymous";}// Shortlyconst name = user?.name ?? "Anonymous";

2.Shortly For SwitchingLong switch case 通常通过使用一个对象来最大化，该对象的键充当开关，而值试图充当返回值。

const dayNumber = new Date().getDay();// Lengthylet 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";}// Shortlyconst days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday",];// Orconst days = `Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday`.split(",");const day = days[dateNumber];

3.调用函数您还可以使用二元运算符来根据条件决定调用哪个函数。
函数的调用模式必须相同，否则最终会出错。

function f1() {// ...}function f2() {// ...}// Lengthyif (condition) {f1();} else {f2();}// Shortlyconditon ? f1() : f2();

4. 多字符串检查需要检查一个字符串是否等于多个值之一是很常见的，这很快就会变得烦人。
幸运的是， JavaScript 有办法帮助您解决这个问题。

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

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

const arr = [1, 2, 3, 4, 5];// Lengthyfor (let i = 0; i < arr.length; i++) {const element = arr[i];// ...}// Shortlyfor (const element of arr) {// ...}

For-in

const obj = {a: 1,b: 2,c: 3,};// Lengthyconst keys = Object.keys(obj);for (let i = 0; i < keys.length; i++) {const key = keys[i];const value = https://www.isolves.com/it/cxkf/yy/js/2023-03-20/obj[key];// ...}// Shortlyfor (const key in obj) {const value = obj[key];// ...}

6. False Checks如果要检查变量是否为 null、undefined、0、false、NaN 或空字符串，可以使用逻辑非 (!) 运算符来执行此操作，而无需多重效果。
这使得验证变量是否包含有效数据变得简单。

// Lengthyconst isFalsey = (value) => {if (value =https://www.isolves.com/it/cxkf/yy/js/2023-03-20/== null ||value === undefined ||value === 0 ||value === false ||value === NaN ||value === "") {return true;}return false;};// Shortlyconst isFalsey = (value) => !value;

7.Secondary Operator作为 JavaScript 开发人员，您一定遇到过三元运算符。
这是编写简洁的 if-else 语句的绝佳方法。
但是，您可以使用它来编写简洁的代码，甚至可以将它链接起来以检查多个条件。

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

到这里，我要与你分享的内容，就全部结束了，感谢你的阅读，祝编程开心。

【七个你需要知道的强大 JavaScript 优化技巧】