更好地使用JavaScript编写更好的条件语句

最新推荐文章于 2024-02-21 15:36:40 发布

原创最新推荐文章于 2024-02-21 15:36:40 发布 · 244 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#includes #更好的switch写法 #使用对象代替switch #使用map代替switch

JavaScript 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了如何使用Array.includes简化值的空值判断，以及通过对象属性和Map来替代传统的switch语句，实现更简洁、高效的JavaScript代码编写方式。

1. 数组方法 Array.includes

项目中常常要判断值是否为空值，一般，我们会这么写

if(value === '' || value === undefined || value === null){
.....
}

使用 includes 后，简写为

if(['', undefined, null].includes(value)){
....
}

2. 使用对象属性代替switch

一般地，我们习惯使用switch来写条件

function printFruits(color) {
  switch (color) {
    case 'red':
      return ['apple', 'strawberry'];
    case 'yellow':
      return ['banana', 'pineapple'];
    case 'purple':
      return ['grape', 'plum'];
    default:
      return [];
  }
}

使用对象属性后，代码瞬间简洁了许多

  const fruitColor = {
    red: ['apple', 'strawberry'],
    yellow: ['banana', 'pineapple'],
    purple: ['grape', 'plum']
  }
function printFruits(color) {
  return fruitColor[color] || [];
}

3. 使用Map代替switch

 const fruitColor = new Map()
    .set('red', ['apple', 'strawberry'])
    .set('yellow', ['banana', 'pineapple'])
    .set('purple', ['grape', 'plum'])

function printFruits(color) {
  return fruitColor.get(color) || []
}