「代码水平」巧用Map/Object literal 提高代码l

function test(feup) {
  switch (feup) {
    case '妲己':
      return ['法师', '控'];
    case '鲁班':
      return ['射手', '腿短'];
    case '安其拉':
      return ['法师', '喜欢读魔法书'];
    case '前端指北':
      return ['成长', '进阶','面试题'];
    default:
      return ['starkwang'];
  }
}

//test results
test(null); // ['starkwang']
test('安其拉'); // ['法师', '喜欢读书']

image

上面的代码看起来没什么问题，但是我发现它相当冗长。同样的结果也可以通过使用更清晰的 object literal 来实现:

const hero = {
  daji: ['法师', '控'],
  luban: ['射手', '腿短'],
  anqila: ['法师', '喜欢读魔法书'],
  qianduanzhibei:['成长', '进阶','面试题']
};

function test(feup) {
  return hero[feup] || [];
}

image

或者，你也可以使用 Map 来达到同样的结果:

  const hero = new Map()
    .set('daji', ['法师', '控'])
    .set('luban', ['射手', '腿短'])
    .set('anqila',  ['法师', '喜欢读魔法书'])
    .set('qianduanzhibei', ['成长', '进阶','面试题'])

function test(color) {
  return hero.get(color) || [];
}

image

Map详细知识了解可以去这了解：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

Map 是自 ES2015以来可用的对象类型，允许您存储键值对。

我们应该禁止 switch 语句的使用吗？不要把自己局限于此。就我个人而言，只要有可能，我就会使用 object literal，但我不会设置硬性规则来阻止它，而是使用任何对您的场景有意义的方法。

对于上面的例子，我们实际上可以通过重构代码来使用 Array.filter 实现相同的结果。

const hero = [
    { name: 'daji', ability: '法师' },
    { name: 'luban', ability: '射手' },
    { name: 'anqila', ability: '喜欢读魔法书' },
    { name: 'qianduanzhibei', ability: '成长' }
];

function test(ability) {
  return hero.filter(f => f.ability == ability);
}

image

总有不止一种方法可以达到同样的结果，当写代码的时候，我们要思考怎么用更优雅的方式来表达，这样当别人review代码的时候，会体现出自己的水平。