写 JS 逻辑判断,不要只知道用 if-else 和 switch (2)

如果读者觉得把查询拼成一个字符串有点尴尬,还有另一个解决办法,那就是用一个 Map 对象作为 key。

const actions = new Map([ [{ identity: \'guest\', status: 1 }, () => {}], [{ identity: \'guest\', status: 2 }, () => {}], //... ]) const onButtonClick = (identity, status) => { let action = [...actions].filter(([key, value]) => key.identity == identity && key.status == status) action.forEach(([key, value]) => value.call(this)) }

这里你也可以看到 Map 和普通对象的区别,其中 Map 可以用任何类型的数据作为键。现在让我们把它的难度再提高一点。如果对于 guest 身份来说,状态 1-4 的处理逻辑是一样的呢?

最坏的情况是这样的(代码大量重复):

const actions = new Map([ [{ identity: \'guest\', status: 1 }, () => {}], [{ identity: \'guest\', status: 2 }, () => {}], [{ identity: \'guest\', status: 3 }, () => {}], [{ identity: \'guest\', status: 4 }, () => {}], [{ identity: \'guest\', status: 5 }, () => {}], //... ])

更好的方法是把处理逻辑函数分离出来:

const actions = () => { const functionA = () => {} const functionB = () => {} return new Map([ [{ identity: \'guest\', status: 1 }, functionA], [{ identity: \'guest\', status: 2 }, functionA], [{ identity: \'guest\', status: 3 }, functionA], [{ identity: \'guest\', status: 4 }, functionA], [{ identity: \'guest\', status: 5 }, functionB], //... ]) } const onButtonClick = (identity, status) => { let action = [...actions()].filter(([key, value]) => key.identity == identity && key.status == status) action.forEach(([key, value]) => value.call(this)) }

这对于日常需求来说已经足够了,但是说真的,函数 A 被引用了 4 次,还是有点烦人。

如果事情真的变得很复杂,比如身份有 3 种,状态有 10 种,你需要定义 30 个处理逻辑,其中很多处理逻辑都是一样的,这似乎让人无法接受。

而你可以这样做:

const actions = () => { const functionA = () => {} // 逻辑处理 A const functionB = () => {} // 逻辑处理 B return new Map([ [/^guest_[1-4]$/, functionA], [/^guest_5$/, functionB], //... ]) } const onButtonClick = (identity, status) => { let action = [...actions()].filter(([key, value]) => key.test(`${identity}_${status}`)) action.forEach(([key, value]) => value.call(this)) }

这时使用 Map 而不是 Object 的优势比较明显,因为可以用正则式作为键。

如果需求变成:所有的对 guest 操作都需要发送一个日志埋点,不同状态的 guest 可能有不同的逻辑处理,那么我们可以写成如下:

const actions = () => { const functionA = () => {} // 逻辑处理 A const functionB = () => {} // 逻辑处理 B const functionC = () => {} // 发送日志 C return new Map([ [/^guest_[1-4]$/, functionA], [/^guest_5$/, functionB], [/^guest_.*$/, functionC], //... ]) } const onButtonClick = (identity, status) => { let action = [...actions()].filter(([key, value]) => key.test(`${identity}_${status}`)) action.forEach(([key, value]) => value.call(this)) }

这样一来,公共逻辑和单个逻辑可以同时执行。

总结

本文讲到了八种 JS 逻辑判断的写法,包括:

if/else

switch

单一判断:存储在 Object 中

单一判断:存储在 Map 对象中

多重判断:将条件串联成一个字符串,存储在 Object 中

多重判断:将条件连成一个字符串,存储在 Map 对象中

多重判断:把条件作为对象存储在 Map 中

多重判断:把条件写成正则式存储在 Map 中

今天就分享到这里,愿你今后的编码生活不仅仅只有 if/else 或 switch。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgwspx.html