在映射数组函数中将三元转换为 if/else

Question

我在 map 函数中有一个三元函数，目前它只根据一个选项进行切换。如果用户单击该选项

，我需要能够拉出 "home" 选项并将其设置为“/”

const buttons = ['Home', 'Docs', 'About-Us'];
const buttonSlugs = buttons.map(button => button === 'About-Us' ? 'aboutus' : button.toLowerCase());

如何将三进制修改为if/else，使主页按钮可以设置为“/”？

Answer 1

你只是想问：

buttons.map(button => {
  if(button === 'Home'){
    do something
  } else if (button === 'About-us') {
    do something else
  } else if (button === 'Docs') {
    do something elser
  }
}

使用 switch 和 forEach 可能会更好，因为 map returns 东西，forEach 不：

buttons.forEach(button => {
  switch(button){
    case 'Home':
      do something
      break
    case 'About-us':
      do something
      break
    case 'Docs':
      do something
      break
    default:
      break
  }
}

Answer 2

您可以使用 switch 语句而不是 if

const buttonSlugs = buttons.map(button =>  {
  switch (button) {
    case 'About-Us':
        button = 'aboutus';
        break;
    case 'Docs':
        button = 'docs';
        break;
    case 'Home':
        button = '/';
        break;
  }  
})

Answer 3

我想这就是你想要做的。

const buttons = ['Home', 'Docs', 'About-Us'];
        const buttonSlugs = buttons.map((button)=>{
             if(button==='About-Us'){
                return 'aboutus';
               }
             else if(button==='Home'){
                  return '/';
              }
             else{
                  return button.toLowerCase();
               }
    });
    
    console.log(buttonSlugs); // for result

Answer 4

您可以使用如下条件：

const buttons = ['Home', 'Docs', 'About-Us'];
const buttonSlugs = buttons.map(button => {
  if (button === 'About-Us') { 
    return 'aboutus';
  }
  else if (button === 'Home') {
    return '/';
  }
  else {
    return button.toLowerCase();
  }
});

console.log(buttonSlugs);

但是如果您有很多映射或者您希望添加更多映射，这种方法可能会变得很丑陋。另一种方法是使用函数对象，每个函数都执行您希望给定按钮的转换：

const buttons = ['Home', 'Docs', 'About-Us'];
const transformations = {
  'About-Us': () => 'aboutus',
  Home: () => '/',
  Docs: button => button.toLowerCase(),
};
const buttonSlugs = buttons.map(btn => transformations[btn](btn));

console.log(buttonSlugs);

这很容易扩展并将转换逻辑保留在地图之外。

如果您想要默认操作或处理缺失按钮的能力，您可以在调用检索到的函数之前检查 transformations 对象中的空键并相应地继续。

Answer 5

const buttons = ['Home', 'Docs', 'About-Us'];
const buttonSlugs = buttons.map(button => {
    let slug;
        switch (button) {
            case 'About-Us':
                slug = 'aboutus';
                break;
            case 'Home':
                slug = '/';
                break;
            default:
                slug = button.toLocaleLowerCase();
                break;
        }
        return slug;
});

在映射数组函数中将三元转换为 if/else

Convert ternary to if/else in mapped array function

javascript

if-statement

ternary