Я нашел очень забавную карту бинго для конференц-связи на Pinterest и хотел создать приложение React на ее основе для использования во время конференц-связи. Приложение все еще находится в разработке, но вы можете найти его здесь, если хотите играть и во время конференц-связи.
В любом случае, этот средний пост посвящен не самому приложению, а простой функции, которую я в итоге написал для отслеживания счета, то есть подсчета маркера.
Я большой поклонник reduce
, и для меня это был подходящий момент, чтобы использовать его для увеличения счета каждый раз, когда проверялась оценка. Вот что я в итоге написал:
function getScore(board) { return board.reduce((score, row) => { return ( score + row.reduce((counter, cell) => { return counter + (cell.checked ? 1 : 0); }, 0) ); }, 0); } export default getScore;
Теперь я думаю, что это выглядит красиво, как агрегация поднимается вверх от внутренней функции до последнего возврата. Ты бы согласился с этим?
Тем не менее, я смотрел на это и думал: «Это действительно читабельно?».
Учитывая, что у меня было много тестовых сценариев, я решил провести рефакторинг, используя императивный подход, и вот что я в итоге написал:
function getScore(board) { let score = 0; for (let y = 0; y < board.length; y += 1) { for (let x = 0; x < board[y].length; x += 1) { if (board[y][x].checked) { score += 1; } } } return score; } export default getScore;
Я должен сказать, что это, вероятно, более читабельно, и я ясно могу сказать, что мне будет легче объяснить себе в будущем, что делает эта версия функции getScore
, если я увижу ее через пару недель.
Но действительно ли я хочу поставлять свой код с этой версией или, возможно, мне следует поставлять его с более элегантным функциональным подходом? Какой из них вы предпочитаете? Что вы думаете?
Ресурсы
- https://github.com/mattiaerre/conference-call-bingo
- https://mattiaerre.github.io/conference-call-bingo/
Примечания
Спасибо Kim за обзор кода 🙏