• 每个 JavaScript 开发人员都应该知道的 7 个速记优化技巧


    每种语言都有自己的怪癖,最常用的编程语言JavaScript也不例外。本文将介绍大量JavaScript 速记优化技巧,这些技巧可以帮助您编写更好的代码,并确保您在遇到它们时不会做出以下反应:

    1. 多字符串检查

    通常您可能需要检查 astring是否等于多个值之一,并且很快就会变得很累。幸运的是,JavaScript有一个内置方法可以帮助您完成此操作。

    1. // Long-hand
    2. const isVowel = (letter) => {
    3. if (
    4. letter === "a" ||
    5. letter === "e" ||
    6. letter === "i" ||
    7. letter === "o" ||
    8. letter === "u"
    9. ) {
    10. return true;
    11. }
    12. return false;
    13. };
    14. // Short-hand
    15. const isVowel = (letter) =>
    16. ["a", "e", "i", "o", "u"].includes(letter);

    2.For-ofFor-in循环

    For-ofandFor-in循环是迭代arrayor的好方法,object无需手动跟踪的索引keysobject

    For-of

    1. const arr = [1, 2, 3, 4, 5];
    2. // Long-hand
    3. for (let i = 0; i < arr.length; i++) {
    4. const element = arr[i];
    5. // ...
    6. }
    7. // Short-hand
    8. for (const element of arr) {
    9. // ...
    10. }

    For-in

    1. const obj = {
    2. a: 1,
    3. b: 2,
    4. c: 3,
    5. };
    6. // Long-hand
    7. const keys = Object.keys(obj);
    8. for (let i = 0; i < keys.length; i++) {
    9. const key = keys[i];
    10. const value = obj[key];
    11. // ...
    12. }
    13. // Short-hand
    14. for (const key in obj) {
    15. const value = obj[key];
    16. // ...
    17. }

    3.虚假检查

    如果要检查变量是nullundefined0false,NaN还是空的string,可以使用逻辑非!) 运算符一次检查所有变量,而不必编写多个条件。这使得检查变量是否包含有效数据变得容易。

    1. // Long-hand
    2. const isFalsey = (value) => {
    3. if (
    4. value === null ||
    5. value === undefined ||
    6. value === 0 ||
    7. value === false ||
    8. value === NaN ||
    9. value === ""
    10. ) {
    11. return true;
    12. }
    13. return false;
    14. };
    15. // Short-hand
    16. const isFalsey = (value) => !value;

    4.三元运算符

    作为一名JavaScript开发者,你一定遇到过ternary operator. 这是编写简洁if-else语句的好方法。但是,您也可以使用它来编写简洁的代码,甚至可以将它们链接起来以检查多个条件

    1. // Long-hand
    2. let info;
    3. if (value < minValue) {
    4. info = "Value is too small";
    5. } else if (value > maxValue) {
    6. info = "Value is too large";
    7. } else {
    8. info = "Value is in range";
    9. }
    10. // Short-hand
    11. const info =
    12. value < minValue
    13. ? "Value is too small"
    14. : value > maxValue ? "Value is too large" : "Value is in range";

    5.函数调用

    借助ternary operator,您还可以根据条件确定调用哪个函数。

    重要旁注:功能必须相同,否则您可能会遇到call signature错误

    1. function f1() {
    2. // ...
    3. }
    4. function f2() {
    5. // ...
    6. }
    7. // Long-hand
    8. if (condition) {
    9. f1();
    10. } else {
    11. f2();
    12. }
    13. // Short-hand
    14. (condition ? f1 : f2)();

    6.切换速记

    较长的switch case通常可以通过使用以作为开关、以作为返回值的对象来优化。

    1. const dayNumber = new Date().getDay();
    2. // Long-hand
    3. let day;
    4. switch (dayNumber) {
    5. case 0:
    6. day = "Sunday";
    7. break;
    8. case 1:
    9. day = "Monday";
    10. break;
    11. case 2:
    12. day = "Tuesday";
    13. break;
    14. case 3:
    15. day = "Wednesday";
    16. break;
    17. case 4:
    18. day = "Thursday";
    19. break;
    20. case 5:
    21. day = "Friday";
    22. break;
    23. case 6:
    24. day = "Saturday";
    25. }
    26. // Short-hand
    27. const days = {
    28. 0: "Sunday",
    29. 1: "Monday",
    30. 2: "Tuesday",
    31. 3: "Wednesday",
    32. 4: "Thursday",
    33. 5: "Friday",
    34. 6: "Saturday",
    35. };
    36. const day = days[dayNumber];

    7. 后备值

    ||操作员可以为变量设置回退值

    1. // Long-hand
    2. let name;
    3. if (user?.name) {
    4. name = user.name;
    5. } else {
    6. name = "Anonymous";
    7. }
    8. // Short-hand
    9. const name = user?.name || "Anonymous";

    这就是所有的人!🎉

    谢谢阅读

  • 相关阅读:
    爆刷leetcode——链表(三)
    LaTeX公式编辑器ver1.6.5 编辑器 -----TeX公式编辑网站
    linux之/etc/skel目录
    谈谈高并发系统的一些解决方案
    解决微信开发者工具企业微信小程序模式下模拟器白屏问题
    详解Transformer中的Encoder
    专为年轻人打造!2022骨传导百元旗舰标杆,南卡Runner CC3重磅出击
    SAN和NAS有什么区别
    设计模式之观察者模式
    UE5.1编辑器拓展【三、脚本化资产行为,删除无引用资产】
  • 原文地址:https://blog.csdn.net/u010291330/article/details/128081891