序：如何让代码看起来更优雅？代码是由文字堆叠起来的可以被机器执行的程序。它记载着相关信息（状态）、表达相关的情绪（函数），所以如何能够写出简洁、优雅、健壮、可维护性强的程序至关重要。本系列笔记的目的，就是带着大家如何实现更有效、更优雅的编程。笔记涵盖：运算符、流程语句、设计模式、ES6 新增方法等多个方面。
数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus教程
权限系统-商城
个人博客地址
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 += n if (n === 1) return sum else return increment(n - 1) }
使用三元运算符实现
let sum = 0; function increment (n) { sum += n return 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 = "星期日" break case 1: result = "星期一" break case 2: result = "星期二" break case 3: result = "星期三" break case 4: result = "星期四" break case 5: result = "星期五" break case 6: result = "星期六" break default: 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代码优化一》分享就已经结束了，如果感觉还不错记得点赞收藏。你还知道哪些代码优化的方案呢？那就写出来把。
