这其实是我的第一个问题,所以请不要对我太苛刻。我正在学习我的Javascript技能,我想知道是否有一些有价值的建议来更好地编写下面的代码,使其更加优化/可读性等等?
我没有在代码本身中添加任何注释,但是它所做的基本上是返回一个体育赛事数组(我认为这是非常自我描述的)。
所以,你会把它保持原样,把它分解成更小的方法,或者改变其他的东西,等等。
这个问题有点“主观”,但总的来说,我想知道我是否走上了一条好的道路。
提前谢谢。
const events = response.events.map((event) => {
const dateTime = getDateTime(event.start);
return {
id: event.id,
date: dateTime.slice(0, 10),
time: dateTime.slice(11, 19),
name: event.name.trim(),
participants: event["event-participants"].map((participant, index) => {
return {
id: participant.id,
name: participant["participant-name"].trim(),
sortOrder: index + 1
};
}),
metaTags: event["meta-tags"].map((metaTag) => {
return {
id: metaTag.id,
type: metaTag.type.trim(),
name: metaTag.name.trim()
}
}),
markets: event.markets.map((market) => {
return {
id: market.id,
name: market.name.trim(),
selections: market.runners.map((selection) => {
return {
id: selection.id,
name: selection.name.trim()
};
})
};
})
};
});
发布于 2022-06-02 09:55:05
代码的结构没有什么问题,但是我们必须“阅读”代码,才能弄清楚它在做什么。将映射函数(内联回调)放入一个离散的命名函数中,该函数告诉任何读取代码的人它所做的事情。我猜这里的数据类型可能是什么,但希望您能得到要点:
function rawEventToEventModel(event) {
const dateTime = getDateTime(event.start);
return {
id: event.id,
date: dateTime.slice(0, 10),
time: dateTime.slice(11, 19),
name: event.name.trim(),
participants: event["event-participants"].map((participant, index) => ({
id: participant.id,
name: participant["participant-name"].trim(),
sortOrder: index + 1
})),
metaTags: event["meta-tags"].map((metaTag) => ({
id: metaTag.id,
type: metaTag.type.trim(),
name: metaTag.name.trim()
})),
markets: event.markets.map((market) => ({
id: market.id,
name: market.name.trim(),
selections: market.runners.map((selection) => ({
id: selection.id,
name: selection.name.trim()
}))
}))
};
}
// ...
const events = response.events.map(rawEventToEventModel);
您也可以对内部映射(即participants
、metaTags
和markets
)这样做。
箭头函数的方便有时会鼓励人们进入“我只使用一次,所以不需要单独的函数”的心态,但是函数‘name’实际上传递了重要的信息,使代码更加可读性更强(代码越少,代码的可读性就越强)。
我还冒昧地向您展示了可以使用箭头函数返回删除return { /* ... */ }
的语句,但您可能会争辩说,这在某种程度上掩盖了正在发生的事情。
发布于 2022-06-02 19:43:58
我对这部分很谨慎:
date: dateTime.slice(0, 10),
time: dateTime.slice(11, 19),
这似乎是一种容易出错的、可能与区域有关的从对象中提取日期和时间的方法。这也是“魔术数字”的一个例子,也就是说,硬编码整数出现在一行代码中,没有任何解释。如果使用Javascript的内置日期类,则可以使用其解析函数数组将日期和时间分别提取为特定于区域的格式设置。如果这是一个自己的情况,您应该添加函数到您的dateTime类来做同样的事情。(但使用内置的JavaScript日期类仍然更好,因为它处理了许多您可能不想考虑的东西,例如时区、夏时制、闰年/秒、区域格式等等)。
https://codereview.stackexchange.com/questions/277027
复制相似问题