网站建设自学网,免费代理网址,网络推广公司营销方案,北京广告网站建设序#xff1a;如何让代码看起来更优雅#xff1f;代码是由文字堆叠起来的可以被机器执行的程序。它记载着相关信息#xff08;状态#xff09;、表达相关的情绪#xff08;函数#xff09;#xff0c;所以如何能够写出简洁、优雅、健壮、可维护性强的程序至关重要。本系… 序如何让代码看起来更优雅代码是由文字堆叠起来的可以被机器执行的程序。它记载着相关信息状态、表达相关的情绪函数所以如何能够写出简洁、优雅、健壮、可维护性强的程序至关重要。本系列笔记的目的就是带着大家如何实现更有效、更优雅的编程。笔记涵盖运算符、流程语句、设计模式、ES6 新增方法等多个方面。 1. 逻辑或运算符 ||
逻辑或运算符也叫短路运算符。当 || 运算符左边的值为 true 时则返回左边表达式的值反之则返回右边表达式的值。如下
true || false // true
false || true // true
10 20 || Hello // Hello|| 0 // 0
undefined || null // null上面代码是逻辑或最常用的场景其实基于上面的场景可以来优化大家经常写的 if…else 代码如下
let result
if (a) {result a
} else {result b
}很简单的一段代码但是使用短路运算符要简洁的多如下
let result a || b看到这里是不是有一种 “柳暗花明又一村” 的感觉那就让我们接着往下看吧。
2. 三元运算符 ? :
提到 if…else 优化就不得不说一下三元运算符了。这个运算符在替换条件语句的时候也是很好用的。但是注意不要嵌套太多层哦毕竟嵌套多了可读性就不强了也就背离了我们代码优化的目的。
语法格式
条件表达式 ? 条件表达式成立的值 : 条件表达式不成立的值这样上面的 if 语句使用三元运算符表示如下
let result a ? a : b当然写到这里见多识广的你可能会想到上面的语句还能再一步优化这里先卖个关子大家可以在后面的案例中查找彩蛋。 三元表达式在诸如条件判断、条件赋值、递归等场景应用也是比较多的。如下实现一个累加函数 使用条件语句实现
let sum 0;
function increment (n) {sum nif (n 1) return sumelse return increment(n - 1)
}使用三元运算符实现
let sum 0;
function increment (n) {sum nreturn n 2 ? increment(n - 1) : sum
}3. 对象/数组配置
对于条件复杂的多重判断三元运算符可读性不强条件语句和选择语句可以实现但是写起来很麻烦代码变得很臃肿。如下 条件语句实现
let dayNum 1
let getWeekDay (dayNum) {if (dayNum 7) {return 星期日} else if (dayNum 1) {return 星期一} else if (dayNum 2) {return 星期二} else if (dayNum 3) {return 星期三} else if (dayNum 4) {return 星期四} else if (dayNum 5) {return 星期五} else if (dayNum 6) {return 星期六} else {return 不是合法的值}
}选择语句实现
let result;
switch (dayNum) {case 0: result 星期日breakcase 1: result 星期一breakcase 2: result 星期二breakcase 3: result 星期三breakcase 4: result 星期四breakcase 5: result 星期五breakcase 6: result 星期六breakdefault:result 不是合法的值break
}
return result;看到这里你应该已经不想看了不禁吐槽这也太麻烦了吧是的所以我们想办法优化他吧比方把相关的数据封装到数组或者对象中然后取对应的值呢 数组方式实现
let days [星期一, 星期二, 星期三, 星期四, 星期五, 星期六, 星期日]
let result days[dayNum] ?? 不是合法的值对象方式实现
let days {0: 星期日,1: 星期一,2: 星期二,3: 星期三,4: 星期四,5: 星期五,6: 星期六,
}
let result days[dayNum] ?? 不是合法的值这样的代码在你看来是不是有一种“神清气爽”的感觉。ES6 中新增 Map 对象我们同样可以使用 Map 来实现上面的功能原理都是一样的。
let days new Map([[0, 星期日],[1, 星期一],[2, 星期二],[3, 星期三],[4, 星期四],[5, 星期五],[6, 星期六]
])
let result days.get(dayNum) || 不是合法的值4. 复杂条件分支优化
上面所列举的都是一些比较简单直接的判断条件如果判断条件过于复杂那么我们应该如何去处理呢先看下面这段改造代码
let days {0: () 星期日,1: () 星期一,2: () 星期二,3: () 星期三,4: () 星期四,5: () 星期五,6: () 星期六,
}
let result days[dayNum] ? days[dayNum]() : 不是合法的值看过上面的代码你可能会说这不还是 key-value 形式吗无非就是多了一步需要执行函数才能获得对应的值。没错但是这样的好处是你可以在对应的函数中执行任何你想实现的逻辑相对更加灵活一些。 那么回过头了我们继续说复杂条件分支的优化问题如下
let score 98;
let getResult (score) {if (score 100 score 90) {return 优秀} else if (score 90 score 80) {return 良好} else if (score 80 score 70) {return 中等} else if (score 70 score 60) {return 及格} else if (score 60 score 0) {return 不及格} else {return 非法字符}
}很明显上面判断的条件表达式不再是简单的等值判断了像这种情况我们依旧可以按照上面的思想进行优化改造。可以考虑使用二维数组实现。
二维数组方式
let scores [[(score) score 100 score 90, () 优秀],[(score) score 90 score 80, () 良好],[(score) score 80 score 70, () 中等],[(score) score 70 score 60, () 及格],[(score) score 60 score 0, () 不及格]
]
let getResult (score) {// 判断符合条件的子数组let obj scores.find(v v[0](score))// 子数组存在则运行数组中第二个函数元素否则返回其它信息let result obj ? obj[1]() : 非法字符return result;
}这里注重的是最终得到的结果而不是获得结果的过程。当今硬件性能过剩下情况下我们通过这种更加优雅、简洁、可维护性的方式来获取最终想要的结果显然是更可取的。 你要记住优雅永不过时,浪漫至死不渝。 好了到这里《JS代码优化一》分享就已经结束了如果感觉还不错记得点赞收藏。你还知道哪些代码优化的方案呢那就写出来把。
