JavaScript 复杂判断的更优雅写法

  • 时间:
  • 浏览:2
  • 来源:大发5分6合_大发5分6合官方

    if (status == 1) {

}

 */

  ])

    sendLog('fail') jumpTo('FailPage')

const onButtonClick = (status) => {

      sendLog('fail')

const actions = () => {

      identity: 'guest',

  [2, ['fail', 'FailPage']],

  return new Map([

const actions = new Map([

原谅我又用了if/else,事先我看后太久人依然在用if/else写你你你这个大段的逻辑判断。

  }, () => { /* functionB */ }],

 * 按钮点击事件

    case 1:

const actions = () => {

  const functionB = () => { /*do sth*/ }

  const functionB = () => { /*do sth*/ }

const actions = {

 * @param {number} status 活动状态:1开团进行中 2开团失败 3 商品售罄 4 开团成功 5 系统收回

      //do sth

      break

      sendLog('processing')

      identity: 'guest',

  action.forEach(([key, value]) => value.call(this))

      //do sth

  '5': ['cancel', 'CancelPage'],

      identity: 'guest',

亲戚亲戚大伙儿还要把疑问升级一下,事先按钮点击事先只还要判断status,现在还还要判断用户的身份:

  action.call(this)

 * 按钮点击事件

}

 * 按钮点击事件

  '4': ['success', 'SuccessPage'],

 * @param {string} identity 身份标识:guest客态 master主态

}

    }, functionA],

    [/^guest_[1-4]$/, functionA],

你能没法通过size属性很容易地得到有另一个多多Map的键值对个数,而对象的键值对个数没法手动确认。

    [{

    } else if (status == 3) {

      jumpTo('FailPage')

  ['guest_3', () => { /*do sth*/ }],

}

    } else if (status == 2) {

 */

  //...

    identity: 'guest',

  [{

      //do sth

  } else if (status == 2) {

switch

      status: 2

    [{

    logName = action[0],

      sendLog('cancel')

    identity: 'guest',

])

 */

这里Map的优势更加凸显,能没法用正则类型作为key了,没法 也有了无限事先,假如需求变成,凡是guest状态也有发送有另一个多多日志下发,不同status状态也还要单独的逻辑正确处理,那亲戚亲戚大伙儿能没法没法 写:

    case 4:

      sendLog('success')

是也有还有然后 写法呢?有的:

    sendLog('cancel') jumpTo('CancelPage')

      jumpTo('Index')

}

  if (identity == 'guest') {

      status: 3

  }

const onButtonClick = (identity, status) => {

  '2': ['fail', 'FailPage'],

])

])

原谅我不写每个判断里的具体逻辑了,事先代码太冗长了。

    //...

  action.forEach(([key, value]) => value.call(this))

const onButtonClick = (status) => {

  '3': ['fail', 'FailPage'],

    identity: 'guest',

  'guest_1': () => { /*do sth*/ },

if/else

/**

 */

    } else if (status == 2) {

一元判断时:存到Object里

  ['guest_1', () => { /*do sth*/ }],

  ])

  } else if (status == 3) {

      //do sth

const onButtonClick = (identity, status) => {

  } else if (status == 4) {

    case 3:

  //....

    identity: 'guest',

      status: 1

const actions = () => {

当然上述代码事先用Object对象来实现也是这类的:

    status: 4

至此,本文也将告一段落,愿你未来的人生里,不想多我有if/else/switch。

亲戚亲戚大伙儿编写js代码时经常 遇到繁杂逻辑判断的状态,通常亲戚亲戚大伙儿能没法用if/else事先switch来实现多个条件判断,但没法 会有个疑问,随着逻辑繁杂度的增加,代码中的if/else/switch会变得没法臃肿,没法看不懂,没法何如更优雅的写判断逻辑,本文带你试一下。

  const functionC = () => { /*send log*/ }

    }, functionA],

    case 5:

  let action = actions[`${identity}_${status}`] || actions['default']

      break

const actions = new Map([

}

可是多我说利用数组循环的特性,符合正则条件的逻辑一定会被执行,那就能没法同時 执行公共逻辑和单独逻辑,事先正则的指在,你能没法打开想象力解锁更多的玩法,本文就不赘述了。

  [{

/**

  let action = [...actions].filter(([key, value]) => (key.identity == identity && key.status == status))

    sendLog('processing') jumpTo('IndexPage')

const onButtonClick = (identity, status) => {

  switch (status) {

  action.forEach(([key, value]) => value.call(this))

没法 写事先能满足日常需求了,但认真然后 讲,后边重写了4次functionA还是不为什么会么会不爽,假如判断条件变得不为什么会么会繁杂,比如identity有3种状态,status有10种状态,那你还要定义150条正确处理逻辑,而往往哪些地方地方逻辑后边太久也有相同的,这似乎也是笔者你要接受的,那能没法没法 实现:

  } else if (identity == 'master') {

  ['master_1', () => { /*do sth*/ }],

const onButtonClick = (identity, status) => {

      sendLog('other')

/**

  ['guest_4', () => { /*do sth*/ }],

])

    [{

  }, () => { /* functionA */ }],

  let action = [...actions()].filter(([key, value]) => (key.test(`${identity}_${status}`)))

  }, () => { /* functionA */ }],

    [/^guest_5$/, functionB],

const onButtonClick = (status, identity) => {

    }

  [4, ['success', 'SuccessPage']],

  ['guest_5', () => { /*do sth*/ }],

  [{

一元判断时:存到Map里

}

      //do sth

  } else {

      status: 4

    if (status == 1) {

  'guest_2': () => { /*do sth*/ },

      jumpTo('SuccessPage')

    status: 1

    //...

}

亲戚亲戚大伙儿现在再将难度升级然后 点,假如guest状态下,status1-4的正确处理逻辑都一样缘何办,最差的状态是没法 :

  } else if (status == 5) {

  //...

  jumpTo(action[1])

多元判断时:将condition拼接成字符串存到Object里

 * 按钮点击事件

    case 2:

    [/^guest_[1-4]$/, functionA],

    identity: 'guest',

  let action = actions[status] || actions['default'],

多元判断时:将condition写作正则存到Map里

/**

多元判断时:将condition存为Object存到Map里

  [{

      jumpTo('IndexPage')

  'default': ['other', 'Index'],

const onButtonClick = (identity, status) => {

    status: 3

const actions = new Map([

  ['master_5', () => { /*do sth*/ }],

    status: 2

}

上述代码核心逻辑是:把有另一个多多条件拼接成字符串,并通过以条件拼接字符串作为键,以正确处理函数作为值的Map对象进行查找并执行,你你你这个写法在多元条件判断事先尤其好用。

      //do sth

 * 按钮点击事件

    identity: 'guest',

  return new Map([

    status: 2

    }, functionA],

有另一个多多对象通常也有个人的原型,太久有另一个多多对象总有另一个多多多"prototype"键。

 * @param {number} status 活动状态:1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统收回

  const functionA = () => { /*do sth*/ }

  return new Map([

}

  jumpTo(pageName)

  '1': ['processing', 'IndexPage'],

  let action = [...actions()].filter(([key, value]) => (key.test(`${identity}_${status}`)))

  ['master_3', () => { /*do sth*/ }],

  [5, ['cancel', 'CancelPage']],

}

  sendLog(action[0])

  }, () => { /* functionA */ }],

  ['default', ['other', 'Index']]

    } else if (status == 5) {

    } else if (status == 3) {

  [3, ['fail', 'FailPage']],

  const functionA = () => { /*do sth*/ }

  const functionB = () => { /*do sth*/ }

    sendLog('other') jumpTo('Index')

    status: 1

    [/^guest_.*$/, functionC],

  [{

    } else {

    } else {

      identity: 'guest',

  ['master_2', () => { /*do sth*/ }],

先看一段代码

      break

      break

}

    [/^guest_5$/, functionB],

  [1, ['processing', 'IndexPage']],

const actions = {

  [{

从后边的例子亲戚亲戚大伙儿能没法看后,当你的逻辑升级为二元判断时,你的判断量会加倍,你的代码量也会加倍,这时缘何写更清爽呢?

      //do sth

这里也看出来Map与Object的区别,Map能没法用任何类型的数据作为key。

    [{

const onButtonClick = (status) => {

}

    } else if (status == 4) {

    }, functionB],

  ['guest_2', () => { /*do sth*/ }],

 * @param {number} status 活动状态:1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统收回

本文事先教你了8种逻辑判断写法,包括:

  let action = [...actions()].filter(([key, value]) => (key.identity == identity && key.status == status))

      status: 5

  ['default', () => { /*do sth*/ }],

      //do sth

      break

}

  sendLog(logName)

      identity: 'guest',

  ])

  ['master_4', () => { /*do sth*/ }],

    //...

      //do sth

 */

    }, functionA],

  }, () => { /* functionA */ }],

没法 写用到了es6里的Map对象,是也有更爽了?Map对象和Object对象哪些地方地方区别呢?

 */

  }, () => { /*do sth*/ }],

  let action = actions.get(`${identity}_${status}`) || actions.get('default')

  action.forEach(([key, value]) => value.call(this))

 * @param {number} status 活动状态:1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统收回

后边代码随便说说看起来更清爽了,你你你这个土最好的土办法的聪明之指在于:将判断条件作为对象的属性名,将正确处理逻辑作为对象的属性值,在按钮点击的事先,通过对象属性查找的土最好的土办法来进行逻辑判断,你你你这个写法不为什么会么会适合一元条件判断的状态。

  action.call(this)

  if (status == 1) {

      //do sth

/**

      //do sth

    status: 5

  }

  }, () => { /*do sth*/ }],

 * @param {number} status 活动状态:1开团进行中 2开团失败 3 开团成功 4 商品售罄 5 有库存未开团

 * @param {string} identity 身份标识:guest客态 master主态

}

const onButtonClick = (status) => {

这时有同学好说,还有更简单的写法:

      jumpTo('CancelPage')

    }

  [{

嗯,没法 看起来比if/else清晰多了,细心的同学也发现了小技巧,case 2和case 3逻辑一样的事先,能没法省去执行一段话和break,则case 2的状态自动执行case 3的逻辑。

  let action = actions.get(status) || actions.get('default')

    pageName = action[1]

好然后 的写法是将正确处理逻辑函数进行缓存:

const actions = new Map([

多元判断时:将condition拼接成字符串存到Map里

是也有又高级了然后 点?

/**

    identity: 'guest',

    default:

事先然后 同学好实把查询条件拼成字符串不为什么会么会别扭,那还有你这个方案,太久我用Map对象,以Object对象作为key:

有另一个多多对象的键没法是字符串事先Symbols,但有另一个多多Map的键能没法是任意值。

    } else if (status == 5) {

  }

const onButtonClick = (identity, status) => {

    sendLog('fail') jumpTo('FailPage')

 * 按钮点击事件

}

通过代码能没法看后你你你这个按钮的点击逻辑:根据不同活动状态做两件事情,发送日志下发和跳转到对应页面,亲戚亲戚大伙儿能没法很轻易的提出这段代码的改写方案,switch出场:

    [{

    } else if (status == 4) {

  const functionA = () => { /*do sth*/ }

 * @param {number} status 活动状态:1 开团进行中 2 开团失败 3 开团成功 4 商品售罄 5 有库存未开团

    sendLog('success') jumpTo('SuccessPage')

      //do sth