这段 if...else 有优雅的写法吗？

76 条回复 • 2024-05-03 19:22:15 +08:00

1

Ericcccccccc

239 天前

2

我感觉最多搞个 map 套一下 prop 和 sortType

外层的 if else 逻辑清晰不用改吧。

2

ma836323493

239 天前

1

简单枚举套枚举

3

ajaxgoldfish

239 天前 via Android

2

没事，无伤大雅，大道至简，要是再多的话，switch case 走一个

4

2kCS5c0b0ITXE5k2

239 天前

7

```
function onSortChange({ order, prop }) {
const sortMapping = {
descending: {
thisYearIncome: 1,
lastYearIncome: 3,
rate: 5
},
ascending: {
thisYearIncome: 2,
lastYearIncome: 4,
rate: 6
}
};

// Get the sort type from the mapping based on the order and property
const sortType = sortMapping[order][prop] || 0; // Default to 0 if not found

this.fetchData(sortType);
}

```

5

pkokp8

239 天前

1

map? 不会 js ，大概这个意思
sortTypeMap[order][prop]=0-6
fetchData(sortTypeMap[order][prop])

6

pkokp8

239 天前

另外，第二层的第 2/3 个 if 少了 else ，会多两次判断，js 应该也支持 else if

7

tomatocici2333

239 天前

switch case 呗 = =看着不累

8

lingyi95

239 天前

你去问 gpt ，它可以给你优化成 10 行代码

9

mowen1992

239 天前

通义灵码来了：
function onSortChange({ order, prop }) {
// 使用映射对象来简化条件判断逻辑
const sortOrders = {
'thisYearIncome': { descending: 1, ascending: 2 },
'lastYearIncome': { descending: 3, ascending: 4 },
'rate': { descending: 5, ascending: 6 },
};

try {
// 检查 prop 是否存在于映射对象中
if (!sortOrders.hasOwnProperty(prop)) {
throw new Error(`Invalid property: ${prop}`);
}

// 检查 order 是否有效
if (!sortOrders[prop].hasOwnProperty(order)) {
throw new Error(`Invalid order: ${order}`);
}

// 直接通过映射对象获取 sortType
const sortType = sortOrders[prop][order];

// 调用 fetchData 方法更新数据
this.fetchData(sortType);
} catch (error) {
console.error('Error in onSortChange:', error.message);
// 可以在这里添加额外的错误处理，例如通知用户或记录日志
}
}

10

Kakaaa

239 天前

有

11

xiangyuecn

239 天前

var order="xxx",prop="rate"
var sortType=(
/**/ ({descending:
/*----*/ {thisYearIncome:1,lastYearIncome:3,rate:5}
/**/ })[order] ||
/*----*/ {thisYearIncome:2,lastYearIncome:4,rate:6}
)[prop]||0;

12

davin

239 天前

3

先定义枚举吧，不然时间久了怎么解释这些 1 到 6
···
enum SortType {
THIS_YEAR_INCOME_DESC = 1,
THIS_YEAR_INCOME_ASC = 2,
LAST_YEAR_INCOME_DESC = 3,
LAST_YEAR_INCOME_ASC = 4,
RATE_DESC = 5,
RATE_ASC = 6
}
···

13

yangg

239 天前

接口设计有问题，搞什么 1 ，2,3 ，4,5,6 的参数

14

bertonzh

239 天前

{
'descending-thisYearIncome': 1,
'descending-lastYearIncome': 3,
}[`${order}-${prop}`]

15

43n5Z6GyW39943pj

239 天前

16

yuzo555

239 天前

function onSortChange({ order, prop }) {
const sortTypes = {
thisYearIncome: order === 'descending' ? 1 : 2,
lastYearIncome: order === 'descending' ? 3 : 4,
rate: order === 'descending' ? 5 : 6,
};
this.fetchData(sortTypes[prop] || 0);
}

17

foolnius

239 天前

18

NessajCN

239 天前 via Android

function onSortChange({ order, prop }) {
const l=["thisYearIncome", "lastYearIncome", "rate"];
const sortType = order === "descending" ? l.indexOf(prop)*2+1 : l.indexOf(prop)*2+2;
this.fetchData(sortType)
}

19

wysnxzm

239 天前

switch 或者 map
各种设计模式最终也都是依赖 map 进行实现比如策略模式

20

z1829909

239 天前

举手提问, 这里为啥需要转成数字传入 fetchData, 为什么不在这一层直接转为查询条件传入 fetchData.
因为我觉得 sortType 在 fetchData 中又要被拆开解析, 看代码的人又要去记 sortType 的意思, 多一层开销

21

foolnius

239 天前

@foolnius #17
"thisYearIncome: 3, //注释" => "thisYearIncome: 2, //注释"

22

makejohn2015

239 天前

23

InkStone

239 天前

fetchData 的参数设计太烂了。这种设计字段一变动直接 gg 。排序这种场景就应该直接根据传入的字段动态生成 query 。

24

Track13

239 天前

25

renmu

239 天前 via Android

我选择 switch

26

ChefIsAwesome

239 天前

不得不说，chatgpt 给的答案可读性强，易扩展，非常好。

27

Pencillll

239 天前

好像楼上都没有提到这种写法啊，感觉这样更清晰一些：

const sortTypes = {
1: { prop: "thisYearIncome", order: "descending" },
2: { prop: "thisYearIncome", order: "ascending" },
3: { prop: "lastYearIncome", order: "descending" },
4: { prop: "lastYearIncome", order: "ascending" },
5: { prop: "rate", order: "descending" },
6: { prop: "rate", order: "ascending" },
}

function getSortType({ order, prop }) {
for (const [sortType, condition] of Object.entries(sortTypes)) {
if (condition.order === order && condition.prop === prop) {
return sortType
}
}

return 0
}

28

qinxs

239 天前

如果 135 246 是固定的值

function onSortChange({ order, prop }) {
let sortType = 0
const sortMap = {
thisYearIncome: 1,
lastYearIncome: 3,
rate: 5,
}

sortType = sortMap[prop] || sortType
if (order !== 'descending' && sortMap.hasOwnProperty(prop)) {
sortType++
}
console.log(sortType)
// this.fetchData(sortType)
}

29

wildnode

239 天前

const sortTypeMap = {
descending: {
thisYearIncome: 1,
lastYearIncome: 3,
rate: 5
},
ascending: {
thisYearIncome: 2,
lastYearIncome: 4,
rate: 6
}
}

function onSortChange({ order, prop }) {
const sortType = sortTypeMap?.[order]?.[prop] ?? 0
this.fetchData(sortType)
}

30

ZnductR0MjHvjRQ3

239 天前

能否改成这样呢？
```js
function onSortChange({ order, prop }) {
let sortType = 0;
const data = {
descending: {
thisYearIncome: 1,
lastYearIncome: 3,
rate: 5,
},
default: {
thisYearIncome: 2,
lastYearIncome: 4,
rate: 6,
},
};
if (!data[order]) order = "default";
this.fetchData(data[order][prop]);
}

```

31

z1154505909

239 天前

def test(order,prop):
arr={
'descending':{
"thisYearIncome":1,
"lastYearIncome":3,
"rate":5
},
"thisYearIncome":2,
"lastYearIncome":4,
"rate":6
}

try:
return arr[order][prop]
except:
return arr[prop]
python 写法

32

sima675

239 天前

33

darkengine

239 天前

3

const arr = ['thisYearIncome', 'lastYearIncome', "rate']

return (arr.indexOf(prop) + 1) * 2 - (order==='descending'?1:0)

你这样写，看同事揍不揍就完了 😂

34

maigebaoer

239 天前 via Android

扔给 gpt 吧

35

wuyiccc

239 天前

order_prop 组成 map 的 key ，value 存放 sortType, 然后需要的时候根据 order_prop 这个 key 直接去 get 就可以了

36

secondwtq

239 天前

我怎么感觉如果这是 C/C++ 的代码的话，主楼原本的写法就挺好的 ...

37

Lax

239 天前

怀疑紧接着还有一段对应的代码：

function fetchData(sortType) {
let prop = null;
let order = null;

if(sortType === 1) {
prop = "thisYearIncome";
order = "descending";
}
if(sortType === 2) {
prop = "...";
order = "...";
}
if(sortType === 3) {
prop = "...";
order = "...";
}
if(sortType === 4) {
prop = "...";
order = "...";
}
if(sortType === 5) {
prop = "...";
order = "...";
}
if(sortType === 6) {
prop = "...";
order = "...";
}

// do something
}

38

cookii

239 天前 via Android

@darkengine 这么多答案我还是喜欢你这个

39

bidongliang

239 天前 via Android

@darkengine 果然找到了心目中的答案

40

lanlanye

239 天前

```javascript
class SortService {
getSortType(sort) {
const mapping = {
thisYearIncome: {
ascending: 2,
descending: 1,
},
lastYearIncome: {
ascending: 4,
descending: 3,
},
rate: {
ascending: 6,
descending: 5,
},
};
return mapping[sort.sortBy][sort.sortOrder];
}
}

function onSortChange({ order, prop }) {
const sort = new Sort(prop, order);
const sortType = new SortService().getSortType(sort);
this.fetchData(sortType);
}
```

41

hefish

239 天前

我怎么觉着 op 的代码挺顺眼的？反而是各位大佬回复的代码，看着不够顺。。。

42

leconio

239 天前 via iPhone

43

AlexTCX

239 天前

44

mingl0280

239 天前 via Android

const props=['thisYearIncome','lastYearIncome','rate']
function onSortChange({ order, prop })
{
let b=order=== 'descending'?-1:0;
return this.fetchData(props.IndexOf(prop)*2+b); //如果 JS 的 IndexOf 可以这么用的话
}

45

mingl0280

239 天前 via Android

上面打错了，修正
const props=['thisYearIncome','lastYearIncome','rate']
function onSortChange({ order, prop })
{
let b=order=== 'descending'?-1:0;
return this.fetchData((props.findIndex(prop)+1)*2+b); //查了，不是 indexof
}

46

nekochyan

239 天前

如果是业务代码，我可能就这么写了，简单清晰明了，后续修改也方便；如果是自己项目，可能会优化成 map 去实现

47

YuCH

239 天前

可以看下这篇文章，讲的挺好的 https://dreith.com/blog/theres-such-a-thing-as-using-too-many-ifs/

48

lalalalacc

239 天前

```
function onSortChange({ order, prop }) {
const propSortTypeMap = {
thisYearIncome: 0, // 基础值，用于计算排序类型
lastYearIncome: 2,
rate: 4
};

// 计算基础排序类型，如果属性不匹配，则默认为 0
let baseSortType = propSortTypeMap[prop] || 0;

// 根据排序顺序调整排序类型
let sortTypeAdjustment = order === 'descending' ? 1 : 2;

// 计算最终的排序类型
let sortType = baseSortType + sortTypeAdjustment;

// 调用 fetchData 函数
this.fetchData(sortType);
}
```

49

leonshaw

239 天前 via Android

function fetchData({ order, prop })

50

lalalalacc

239 天前

51

lalalalacc

239 天前

// 定义排序策略接口
class SortStrategy {
getSortType(order, prop) {
throw new Error("This method should be implemented by subclasses");
}
}

// 实现具体的排序策略
class IncomeSortStrategy extends SortStrategy {
getSortType(order, prop) {
const baseSortType = prop === 'thisYearIncome' ? 1 : 3;
return order === 'descending' ? baseSortType : baseSortType + 1;
}
}

class RateSortStrategy extends SortStrategy {
getSortType(order) {
return order === 'descending' ? 5 : 6;
}
}

// 环境类，用于使用排序策略
class SortContext {
constructor(strategy) {
this.strategy = strategy;
}

setStrategy(strategy) {
this.strategy = strategy;
}

onSortChange({ order, prop }) {
const sortType = this.strategy.getSortType(order, prop);
this.fetchData(sortType); // 假设这是一个获取数据的方法
}
}

// 使用
const incomeStrategy = new IncomeSortStrategy();
const rateStrategy = new RateSortStrategy();

const sortContext = new SortContext(incomeStrategy); // 初始使用收入排序策略
sortContext.onSortChange({ order: 'descending', prop: 'thisYearIncome' });

sortContext.setStrategy(rateStrategy); // 切换到利率排序策略
sortContext.onSortChange({ order: 'ascending', prop: 'rate' });

52

foam

239 天前 via Android

@hefish 因为他们开始整活了。别搞那些花里胡哨的，用一个 map 做配置就行了。

53

fox0001

239 天前 via Android

@Ericcccccccc #1 我也是第一时间想到 map

54

fox0001

239 天前 via Android

这段代码最大问题是，第二层的 if ，居然没有写成 if…else if…else 的形式

55

DOLLOR

239 天前

@darkengine
这样写可能清晰一些
function toSortType({ order, prop }) {
const orderType = (order === 'descending') ? (1) : (2);
// 0,2,4 or -2
let sortType = ['thisYearIncome', 'lastYearIncome', 'rate'].indexOf(prop) * 2;
if (sortType < 0) {
return 0;
}
// 1,3,5 or 2,4,6
sortType = sortType + orderType;
return sortType;
}

56

weeei

239 天前

function onSortChange({ order, prop }) {
var map = new Map(
[
['descending-thisYearIncome', 1], ['descendinglastYearIncome', 3], ['descendingrate', 5],
['ascending-thisYearIncome', 2], ['ascending-lastYearIncome', 4], ['ascending-rate', 6]
])
var sortType = map.get('descending' + '-' + 'thisYearIncome')
this.fetchData(sortType)
}

57

weeei

239 天前

```js
function onSortChange({ order, prop }) {
var map = new Map(
[
['descending-thisYearIncome', 1], ['descending-lastYearIncome', 3], ['descending-rate', 5],
['ascending-thisYearIncome', 2], ['ascending-lastYearIncome', 4], ['ascending-rate', 6]
])
var sortType = map.get(order + '-' + prop)
this.fetchData(sortType)
}
```

58

anjingdexiaocai

239 天前 via Android

先解决最基本的魔数问题再说😂

59

libook

239 天前 via Android

我会选择用类 map 对象。

60

egoistttt

239 天前

61

kinge

238 天前

优雅的代码不易于阅读,这样就很好

62

ntedshen

238 天前

map=new map([
['desc_tyi',1],
['desc_lyi',3],
['desc_r',5],
])

function onSortChange({ order, prop })
key=[order,pop].join('_')
type=map.get(key)??0
this.fetchData(sortType)

63

lDqe4OE6iOEUQNM7

238 天前

64

incubus

238 天前

65

FYFX

238 天前

你是 order2 种值，prop 3 种值组合总共 6 种，我是觉得把 6 种可能枚举出来比较好，先判断 order 再判断 prop 感觉没那么清晰

66

mrytsr

238 天前 via Android

没搞懂为什么要把 prop 和 order 转成 sorttype ，建议直接存储或传输 prop,order

67

pennai

238 天前 via Android

1.可以配在 db 里，这样一行查 db 然后一行赋值 sort type 就行
2.策略模式实现
3.上规则引擎

68

nuk

238 天前

let sortType = order === 'descending'?prop === 'thisYearIncome'?1:prop === 'lastYearIncome'? 3:prop === 'rate'?5:0:prop === 'thisYearIncome'?2:prop === 'lastYearIncome'?4:prop === 'rate'?6:0

69

shyangs

238 天前

@z1829909

'''
> 举手提问, 这里为啥需要转成数字传入 fetchData, 为什么不在这一层直接转为查询条件传入 fetchData.
因为我觉得 sortType 在 fetchData 中又要被拆开解析, 看代码的人又要去记 sortType 的意思, 多一层开销
'''

z1829909 說的對，原本 order, prop 不是魔法數字 (magic number)，經過 onSortChange 反而變成魔術數字了.

onSortChange 根本就是多餘的，fetchData 直接傳入 order, prop 即可. 呼叫者直接調用 fetchData 即可.

70

walkerliu

238 天前

评论里的反向优化看醉了..........。OP 的代码逻辑清晰，可读性强，也没性能问题。评论里面又是匿名函数又是三目运算符的.. 这不妥妥的反向优化嘛

71

cpstar

238 天前

全都是优雅 order 和 prop 的，窃以为问题的根源在 0123456
如果真的要优雅，应该多态到头，连带 fetchData 做到多态

72

amlee

238 天前

我不懂为什么接口要单独定义一个 sortType ，直接 fetchData(order, prop)不就好了？后端也简单前端也简单。

73

zcm3579

238 天前

你这边前端转成数字 , 后端接口拿到后是不是又转回字段和 order

74

pytth

238 天前 via Android

使用对象映射法：

```
function onSortChange({ order, prop }) {
const propMap = {
thisYearIncome: {
descending: 1,
ascending: 2
},
lastYearIncome: {
descending: 3,
ascending: 4
},
rate: {
descending: 5,
ascending: 6
}
};

const sortType = propMap[prop][order];
this.fetchData(sortType);
}
```

75

bv

237 天前

下面这样，有点为了优化而优化，让人难以理解了：
function onSortChange(order, prop) {
let props = new Map([
["thisYearIncome", 1],
["lastYearIncome", 3],
["rate", 5],
]);

this.fetchData((order === "descending" ? 0 : 1) + props.get(prop))
}

76

netabare

236 天前

表驱动。