写法比较

if else 适用于：

  1. 对具体的值进行判断
  2. 区间的判断
  3. 对运算的结果是boolean类型表达式进行判断 true false
    1. if(...){
    2. ...
    3. }else if(...){
    4. ...   
    5. }else{
    6.  ...
    7. }

switch 适用于：

  1. 对具体的值进行判断
  2. 这个值是固定的
  3. 值的可能性多
    1. switch (+state) {
    2. case 'loaded':
    3.  this.sound.play()
    4.  break
    5. default:
    6.  Toast.loading()
    7.  this.sound.play()
    8.  break
    9. }

对象的方式 适用于：

  1. 返回多个结果
  2. 少量的、固定的值 ```javascript const judgeTypeDict = { 0: { typeDescription: ‘单选题’, iconType: iconRadio, iconSelect: iconRadioCorrect, }, 1: { typeDescription: ‘多选题’, iconType: iconCheckout, iconSelect: iconCheckoutCorrect, }, }

const { typeDescription, iconType, iconSelect } = judgeTypeDict[type]

  2. <a name="CKzMW"></a>
  3. #### 三目运算符 适用于：
  5. 1. 条件少、返回值类型一致
  6. ```javascript
  7. // 推荐
  8. const result = score >= 60 ? '合格' ： '不合格'
  9. // 不推荐这样的方式，推荐使用 梯度函数
  10. +value / denominator >= 1 ?
  11.       +value / denominator >= 10000 ?
  12.         `${(+value / (denominator * 10000)).toFixed(2)}亿` :
  13.         `${(+value / denominator).toFixed(2)}万` : +value;

梯度函数 适用于：

  1. 区间的判断 ```javascript const checkList = [ { check: value => value >= 1000 * 10000, format: value => ‘999万+’, }, { check: value => value >= 10000, format: value => { const result = Math.round(+value / 10000) if (result === 1000) {
    1.  return '999万+'
    } return ${result}万 }, }, { check: value => value >= 0, format: value => value, }, ]

export const numberFormat = number => { const checker = checkList.find(item => item.check(number)) return checker.format(number) }

numberFormat(9999)

  2. ```javascript
  3. const getResourceIcon = (videoUrl, audioUrl) => {
  4.   if (videoUrl) {
  5.     return iconVideo
  6.   }
  8.   if (audioUrl) {
  9.     return iconAudio
  10.   }
  12.   return iconNote
  13. }

常用函数

时间判断

今天 显示：今天10:30
今年 显示：11-12 10:30
不是今年 显示：2009-11-12 10:30

  1. import dayjs from 'dayjs'
  3. const currentYear = new Date().getFullYear()
  4. const startDay = new Date(new Date().toLocaleDateString()).valueOf()
  5. const endDay = startDay + 24 * 60 * 60 * 1000
  7. export const timeFormatList = [
  8.   {
  9.     check: time => time >= startDay && time < endDay,
  10.     render: time => '今天 ' + dayjs(time).format('HH:mm'),
  11.   },
  12.   {
  13.     check: time => dayjs(time).year() === currentYear,
  14.     render: time => dayjs(time).format('MM-DD HH:mm'),
  15.   },
  16.   {
  17.     check: () => true,
  18.     render: time => dayjs(time).format('YYYY-MM-DD HH:mm'),
  19.   },
  20. ]
  22. export const timeFormat = time => {
  23.   const checker = timeFormatList.find(item => item.check(time))
  24.   return checker.render(time)
  25. }
  27. timeFormat('时间戳')

复杂判断

  1.  interface IcalcStatus {
  2.   hasPromotion: boolean;
  3.   initTime?: number;
  4. }
  6. const calcStatus = {
  7.   0: () => {
  8.     return {
  9.       hasPromotion: true,
  10.     };
  11.   },
  12.   1: () => {
  13.     if (currentTime > milliActivityBeginTime && currentTime < milliAactivityEndTime && inventory > 0)
  14.       return {
  15.         hasPromotion: true,
  16.         initTime: milliAactivityEndTime - currentTime,
  17.       };
  18.     return {};
  19.   },
  20.   2: () => {
  21.     if (currentTime > milliActivityBeginTime && currentTime < milliAactivityEndTime)
  22.       return {
  23.         hasPromotion: true,
  24.         initTime: milliAactivityEndTime - currentTime,
  25.       };
  26.     return {};
  27.   },
  28.   3: () => {
  29.     if (inventory > 0)
  30.       return {
  31.         hasPromotion: true,
  32.       };
  33.     return {};
  34.   },
  35. };
  37. const { hasPromotion = false, initTime = 0 } = calcStatus[sellStatus]() as IcalcStatus;

更优写法

  1. const calcStatus = [
  2.   {
  3.     check: value => value === 0,
  4.     format: { hasPromotion: true, initTime: 0 },
  5.   },
  6.   {
  7.     check: value => value === 1 && currentTime > milliActivityBeginTime && currentTime < milliAactivityEndTime && inventory > 0,
  8.     format: { hasPromotion: true, initTime: milliAactivityEndTime - currentTime },
  9.   },
  10.   {
  11.     check: value => value === 2 && currentTime > milliActivityBeginTime && currentTime < milliAactivityEndTime,
  12.     format: { hasPromotion: true, initTime: milliAactivityEndTime - currentTime },
  13.   },
  14.   {
  15.     check: value => value === 3 && inventory > 0,
  16.     format: { hasPromotion: true, initTime: milliAactivityEndTime - currentTime },
  17.   },
  18. ];
  19. const checker = calcStatus.find(item => item.check(sellStatus)) || {
  20.   format: { hasPromotion: false, initTime: 0 },
  21. };
  22. const { hasPromotion, initTime } = checker.format as IcalcStatus;