if else过多时优化

最新推荐文章于 2024-09-14 18:52:56 发布

古迪红尘

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量141

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_57246351/article/details/126784252

版权

JavaScript 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

这篇博客探讨了四种不同的代码实现方式，通过映射表（Map）和条件判断来简化代码逻辑。第一种和第二种情况展示了将条件语句转换为对象字面量或Map来获取球员号码。第三种情况是根据标志变量跳转到相应页面，使用对象或Map优化了这一过程。第四种情况则是在不同平台上根据标志跳转，同样利用映射表实现了更简洁的代码。这些优化提高了代码的可读性和维护性。

摘要由CSDN通过智能技术生成

第一种

function getNumber(name) {
  if (name === "乔丹") {
       console.log(23);
   } else if (name === "科比") {
       console.log(24);
   } else if (name === "韦德"){
       console.log(3);
   }else if (name === "麦迪"){
       console.log(1);
   }else{
        console.log(0);
   }
}

.....key,val

function getNumber(name){
   var player = {
       "乔丹" : "23",
       "科比" : "24",
       "韦德" : "3",
       "麦迪" : "1",
       "无"  : "0"
   };
   console.log(player[name] ? player[name] : player["无"] );
}

第二种

/**
 * 按钮点选事件
 * @param {number} status活动状态：1开团进行中2开团失败3商品售罄4开团成功5系统取消
 */ 
 
const onButtonClick = ( status )=> {
   if (status == 1 ){ 
    sendLog( 'processing' ) 
    jumpTo( 'IndexPage' ) 
  } else  if (status == 2 ){ 
    sendLog( 'fail' ) 
    jumpTo( 'FailPage' ) 
  } else  if (status == 3 ) { 
    sendLog( 'fail' ) 
    jumpTo('FailPage'）
  } else  if（status== 4）{ 
    sendLog（'success'）
    jumpTo（'SuccessPage'）
  } 不然 if（status == 5）{ 
    sendLog（'cancel'）
    jumpTo（'CancelPage'）
  } else { 
    sendLog（'other'）
    jumpTo（'Index'）
  } 
}

...........key:value

const actions = {
   '1'：[ 'processing'，'IndexPage' ]，
   '2'：[ 'fail'，'FailPage' ]，
   '3'：[ 'fail'，'FailPage' ]，
   '4'：[ 'success'，'SuccessPage' ]，
   '5'：[ 'cancel'，'CancelPage' ]，
   'default'：[ 'other'，'Index' ]，
}

/** 
 * 按钮点选事件
 * @param {number} status活动状态：1开团进行中2开团失败3商品售罄4开团成功5系统取消
 */

const onButtonClick = （status）=> {
   let action = actions [status] || actions [ 'default' ]，
      logName = action [ 0 ]，
      pageName = action [ 1 ];
  sendLog（logName）
  jumpTo（pageName）
}

...........map

const actions = new  Map（[ 
  [ 1，[ 'processing'，'IndexPage' ]]，
  [ 2，[ 'fail'，'FailPage' ]]，
  [ 3，[ 'fail'，'FailPage' ]]，
  [ 4，[ 'success'，'SuccessPage' ]]，
  [ 5，[ 'cancel'，'CancelPage' ]]，
  [ 'default'，[ 'other'，'Index']] 
]）

/ *
 *
 * 按钮点选事件
 * @param {number} status活动状态：1开团进行中2开团失败3商品售罄4开团成功5系统取消
 */ 
const onButtonClick = ( status )=> {
   let action = actions .get(status) || actions.get( 'default' ) ;
  sendLog(action[ 0 ]) 
  jumpTo(action[ 1 ]) 
}

第三种

let toView = (flag = 1) => {
    if (flag === 1) {
        view('页面一')
    } else if (flag === 2) {
        view('页面二')
    } else if (flag === 3) {
        view('页面二')
    } else if (flag === 4) {
        view('页面四')
    }
}

........key,value

const flagMirror = {
  '1': '页面一',
  '2': '页面二',
  '3': '页面二',
  '4': '页面四'
}

let toView = (flag = 1) => {
    view(flagMirror[flag + ''])
}

.......map

const flagMirror = new Map([
    [1, '页面一'],
    [2, '页面二'],
    [3, '页面二'],
    [4, '页面四']
])

let toView = (flag = 1) => {
    view(flagMirror.get(flag))
}

第四种

let toView = (platform = '移动端', flag = 1) => {
    if (platform === '移动端') {
        if (flag === 1) {
            view('移动页面一')
        } else if (flag === 2) {
            view('移动页面二')
        } else if (flag === 3) {
            view('移动页面二')
        } else if (flag === 4) {
            view('移动页面四')
        }
    } else if (platform === 'PC端') {
        if (flag === 1) {
            view('PC页面一')
        } else if (flag === 2) {
            view('PC页面二')
        } else if (flag === 3) {
            view('PC页面二')
        } else if (flag === 4) {
            view('PC页面四')
        }
    } 
}

......map

const flagMirror = new Map([
    [{ platform: '移动端', flag: 1 }, '移动页面一'],
    [{ platform: '移动端', flag: 2 }, '移动页面二'],
    [{ platform: '移动端', flag: 3 }, '移动页面二'],
    [{ platform: '移动端', flag: 4 }, '移动页面四'],
    [{ platform: 'PC端', flag: 1 }, 'PC页面一'],
    [{ platform: 'PC端', flag: 2 }, 'PC页面二'],
    [{ platform: 'PC端', flag: 3 }, 'PC页面二'],
    [{ platform: 'PC端', flag: 4 }, 'PC页面四']
])

let toView = (platform = '移动端', flag = 1) => {
    let result = Array.from(flagMirror).find(([key, value]) => key.platform === platform && key.flag === flag)
    view(result[1])
}