优化js中的if/else结构

需求： 经常在代码中会有各种条件判断，导致if/else使用过多，不仅阅读麻烦，对于新加的条件，还不好扩展，文中列举了7中优化方案，可以根据实际代码环境选用。文中并没有列举switch，是因为switch结构使用上与is/else并无区别。
1、提前return，可以将判断层级拉平

let animal = 'cat'
if (animal !== 'person') {
  if (animal === 'cat') {
    console.log('猫')
  }
  if (animal === 'pig') {
    console.log('猪')
  }
}

let animal = 'cat'
if (animal === 'person') return
if (animal === 'cat') {
  console.log('猫')
}
if (animal === 'pig') {
  console.log('猪')
}

2、使用逻辑运算符

let animal = 'cat'
if (animal === 'cat') {
  console.log('猫')
} else {
  console.log('其他动物')
}

let animal = 'dog'
animal === 'cat' && console.log('猫')
animal === 'dog' && console.log('狗')

animal === 'cat' || console.log('其他动物')
animal === 'dog' || console.log('其他动物')

3、使用三元运算符

let animal = 'cat'
if (animal === 'cat') {
  console.log('猫')
} else {
  console.log('其他动物')
}
let animal = 'cat'
animal === 'cat' ? console.log('猫') : console.log('其他动物')

4、使用includes

let animal = 'cat'
if (animal === 'cat' || animal === 'dog' || animal === 'pig') {
  console.log('动物')
}
let animal = 'cat'
let arr = ['cat', 'dog', 'pig']
if (arr.includes(animal)) {
  console.log('动物')
}

5、使用Object对象存储，针对单个判断条件比较方便，也可以字符串拼接多个判断条件，但是不推荐

let animal = 'cat'
if (animal === 'cat') {
  console.log('猫')
} else if (animal === 'dog') {
  console.log('狗')
} else if (animal === 'pig') {
  console.log('猪')
} else {
  console.log('其他动物')
}
let animal = 'cat'
let animals = {
  cat: '猫',
  dog: '狗',
  pig: '猪'
}
console.log(animals[animal])
// 字符串拼接多个判断条件
let animal = 'cat'
let color = 'red'
let animals = {
  cat_red: '红猫',
  cat_white: '白猫',
  dog_red: '红狗',
  dog_white: '白狗'
}
console.log(animals[animal + '_' + color])

6、使用对象数组，多个判断条件

let animal = 'cat'
let color = 'white'
if (animal === 'cat') {
  if (color === 'red') {
    console.log('红猫')
  }
  if (color === 'white') {
    console.log('白猫')
  }
} else if (animal === 'dog') {
  if (color === 'red') {
    console.log('红狗')
  }
  if (color === 'white') {
    console.log('白狗')
  }
}

let animal = 'cat'
let color = 'white'
let animals = [
  { type: 'cat', color: 'red', name: '红猫' },
  { type: 'cat', color: 'white', name: '白猫' },
  { type: 'dog', color: 'red', name: '红狗' },
  { type: 'dog', color: 'white', name: '白狗' }
]
let _animal = animals.filter((item) => item.type === animal && item.color === color)
console.log(_animal[0].name)

7、使用Map数据结构

let animal = 'cat'
let color = 'white'
if (animal === 'cat') {
  if (color === 'red') {
    console.log('红猫')
  }
  if (color === 'white') {
    console.log('白猫')
  }
} else if (animal === 'dog') {
  if (color === 'red') {
    console.log('红狗')
  }
  if (color === 'white') {
    console.log('白狗')
  }
}

let animal = 'cat'
let color = 'white'
let animals = new Map([
  [{ type: 'cat', color: 'red' }, '红猫'],
  [{ type: 'cat', color: 'white' }, '白猫'],
  [{ type: 'dog', color: 'red' }, '红狗'],
  [{ type: 'dog', color: 'white' }, '白狗']
])
let _animal = [...animals].filter(([key, value]) => key.type === animal && key.color === color)
let [_key, _name] = _animal[0]
console.log(_name)