JavaScript 条件判断优化技巧详解：Map、Object与提前返回

引言

本文将简要介绍如何在 JavaScript 中编写更简洁且可读性更高的条件判断逻辑。

假设我们需要实现一个将颜色名称转换为十六进制编码的函数。

function convertToHex(color) {
  if (typeof color === 'string') {
    if (color === 'slate') {
      return '#64748b'
    } else if (color === 'gray') {
      return '#6b7280'
    } else if (color === 'red') {
      return '#ef4444'
    } else if (color === 'orange') {
      return '#f97316'
    } else if (color === 'yellow') {
      return '#eab308'
    } else if (color === 'green') {
      return '#22c55e'
    } else {
      return '#ffffff'
    }
  } else {
    return '#ffffff'
  }
}

该函数的核心逻辑是：接收颜色字符串并返回对应的十六进制值；若输入非字符串或未提供参数，则默认返回白色的十六进制编码。

接下来，我们将对这段初始代码进行逐步优化。

避免直接使用字符串作为条件

直接在条件判断中使用字符串存在隐患，一旦拼写错误，逻辑将难以排查。

convertToHex("salte")

为解决此问题，建议引入常量来替代硬编码字符串。

const Colors = {
	SLATE: 'slate',
  GRAY: 'gray',
  // ...
}
function convertToHex(color) {
  if (typeof color === 'string') {
    if (color === Colors.SLATE) {
      return '#64748b'
    } else if (color === Color.GRAY) {
      return '#6b7280'
    }
    // ...
  } else {
    return '#ffffff'
  }
}
convertToHex(Colors.SLATE)

若项目使用 TypeScript，可直接利用枚举类型来确保类型安全。

使用 Object

观察上述代码可以发现，我们可以直接将十六进制值存储到对象的 value 属性中。

const Colors = {
	SLATE: '#64748b',
  GRAY: '#6b7280',
  // ...
}
function convertToHex(color) {
  if (color in Colors) {
    return Colors[color]
  } else {
    return '#ffffff'
  }
}
convertToHex(Colors.SLATE)

这种写法使代码结构更加简洁且易于阅读。

不符合预期，提前 return

另一项最佳实践是将不符合预期的情况置于函数开头并提前 return，从而避免遗漏返回语句。

const Colors = {
	SLATE: '#64748b',
  GRAY: '#6b7280',
  // ...
}
function convertToHex(color) {
  if (!color in Colors) {
    return '#ffffff'
  }
  return Colors[color]
}
convertToHex(Colors.SLATE)

采用此技巧后，甚至无需使用 else 分支。巧妙运用这一模式，可大幅减少代码中大量的 else 语句。

使用 Map 配合 Object

使用 Map 更为专业，因为它支持任意类型的键，且继承自 Map.prototype，提供了更多便捷的方法与属性。

同时，Object 在属性访问上更为便捷，我们可以继续使用 Object 来实现枚举的功能。

const ColorsEnum = {
	SLATE: 'slate',
  GRAY: 'gray',
  // ...
}
const Colors = new Map()
Colors.set(ColorsEnum.SLATE, '#64748b')
Colors.set(ColorsEnum.GRAY, '#6b7280')
// ...
Colors.set('DEFAULT', '#ffffff')
function convertToHex(color) {
  if (!Colors.has(color)) {
    return Colors.get('DEFAULT')
  }
  return Colors.get(color)
}
convertToHex(Colors.SLATE)

Map 也可以存储函数

假设我们需要处理的颜色数量庞大，多达上千种，且需支持后端动态配置，结果需通过特定运算过程得出。

在此场景下，我们可以利用 Map 来存储处理函数。

return Colors.get(color)()

尽量避免三目表达式和 switch

尽管三目表达式简洁，但会显著降低代码可读性，特别是在处理多级条件时，阅读体验极差。

与 if 语句相比，switch 并无明显优势，且有时因不当使用 return 导致代码执行逻辑偏离预期。

以上即为 JavaScript 条件判断优化技巧的详细内容，更多关于 JavaScript 条件判断的资料请关注本站其它相关文章！

JavaScript 条件判断优化技巧：从基础到高级实践

引言