优化三目

July 26, 2024 by ccforeverd

偶遇一则三目表达式:

typescript

const transition = isMenusActiveLTR
  ? active
    ? 'slide-left'
    : 'slide-right'
  : active
    ? 'slide-right'
    : 'slide-left'

Emm... 有点难懂, 表达意思大概是:

当前是从左向右的菜单切换 并且 切换到当前项, 使用 slide-left
当前是从左向右的菜单切换 并且 非当前项, 使用 slide-right
当前是从右向左的菜单切换 并且 切换到当前项, 使用 slide-right
当前是从右向左的菜单切换 并且 非当前项, 使用 slide-right

有点绕了...

观察表达式, 二级判断都是 active, 这样简单做一下转换, 即三目中为 true 的加 1, 否则不变, 则转换为:

typescript

const transition = isMenusActiveLTR
  ? active
    ? 'slide-left' // 2
    : 'slide-right' // 1
  : active
    ? 'slide-right' // 1
    : 'slide-left' // 0

注释部分的数字, 相当于 Number(isMenusActiveLTR) + Number(active), 这样呢, 就可以转换为数组:

typescript

const transitions: MantineTransition[] = ['slide-left', 'slide-right', 'slide-left']
const transition = transitions[(Number(isMenusActiveLTR) + Number(active))]

再做一个简单转化, 最终得到:

typescript

const transition = (['slide-left', 'slide-right'] as MantineTransition[])[
  (Number(isMenusActiveLTR) + Number(active)) % 2
]

就像一个矩阵:

	isMenusActiveLTR=true	isMenusActiveLTR=false
active=true	slide-left	slide-right
active=false	slide-right	slide-left

集中到一个数组中, 然后通过 Number(isMenusActiveLTR) + Number(active) 来索引, 最后取余, 得到最终结果

slide-left	slide-right
slide-right	slide-left

这样, 代码就清晰了很多

The End

阅读原文欣赏图片