Фрагмент кода написан для отображения элементов меню боковой панели. Допустим, у нас есть разные роли пользователей, которые позволяют пользователям видеть определенные разделы в зависимости от ролей, назначенных их учетным записям. Предположим, у нас есть два пользователя, UserA и UserB. Пользователь А может просматривать раздел «Панель мониторинга и загрузка отчетов», а пользователь Б может просматривать раздел «Панель мониторинга и платежи» в строке меню.

Приведенный выше код показывает меню на основе индексов элементов массива. Это делает работу, но условная строка в операторах IF имеет некоторые недостатки,

if(index === 0 || index === 1)
  1. Проблема читабельности. Невозможно понять, что находится в индексе 0/1. Если строка меню огромна, например, 20–30 пунктов меню, нам нужно будет пройти через массив маршрутов, чтобы найти 17-й индекс для проверки заголовка пункта меню.
  2. Это приведет к ошибке —если мы просто добавим новый пункт меню в начало маршрута, то пункты меню будут изменены для всех пользователей. Пользователи на основе ролей увидят меню, на которые у них нет разрешений, а также меню для них будут отсутствовать.

Как избежать такой проблемы?

Очень просто. Просто отфильтруйте данные по данным массива. В нашем случае массив содержит объекты. Каждый объект представляет собой маршрут, а маршруты имеют путь, заголовок и значок. Для уникального заголовка поиска это не вариант, так как он может измениться в будущем, но путь маршрута, скорее всего, будет стабильным, поэтому мы можем использовать путь для нашего условного оператора if.

if (menuItem.path === 'dashboard' || menuItem.path === 'payments')

Теперь у нас есть лучшая читабельность кода, чем то, какие меню будут показаны текущему пользователю. Также мы можем добавить новый маршрут в любую позицию, и это не повлияет на вид отображаемых пунктов меню.

Полный код: