序：如何让代码看起来更优雅？代码是由文字堆叠起来的可以被机器执行的程序。它记载着相关信息（状态）、表达相关的情绪（函数），所以如何能够写出简洁、优雅、健壮、可维护性强的程序至关重要。本系列笔记的目的，就是带着大家如何实现更有效、更优雅的编程。笔记涵盖：运算符、流程语句、设计模式、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 = 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 = 90, () => "优秀"],  [(score) => score = 80, () => "良好"],  [(score) => score = 70, () => "中等"],  [(score) => score = 60, () => "及格"],  [(score) => score = 0, () => "不及格"] ] let getResult = (score) => {  // 判断符合条件的子数组  let obj = scores.find(v => v[0](score))  // 子数组存在，则运行数组中第二个函数元素，否则返回其它信息  let result = obj ? obj[1]() : "非法字符"  return result; }

这里注重的是最终得到的结果，而不是获得结果的过程。当今硬件性能过剩下情况下，我们通过这种更加优雅、简洁、可维护性的方式来获取最终想要的结果，显然是更可取的。

你要记住：优雅永不过时,浪漫至死不渝。

好了，到这里《JS代码优化一》分享就已经结束了，如果感觉还不错记得点赞收藏。你还知道哪些代码优化的方案呢？那就写出来把。