Преподаватель попросил сократить код массива. Как можно это сделать?

Question

[z1oN]

Собственно, имеется два массива "s" и "u". Первый массив отвечает за id (местами class) ссылки, а второй массив за путь к этой id ссылке.

let s = ['#sg2002','#sg20003','#sg989','#gib','.mk','.doom','.hf','.mb','#action','#advent','#arcade','#educational','#fighting','#interactive','#other','#puzzle','#quest','#racing','#rpg','#simulation','#sports','#strategy','#tabletop'];
let u = ['side/sg2002.html','side/sg2003.html','side/sg98.html','side/gib.html','side/mk.html','side/doom.html','side/hf.html','side/mb.html','side/action.html','side/advent.html','side/arcade.html','side/education.html','side/fighting.html','side/interactive.html','side/other.html','side/puzzle.html','side/quest.html','side/racing.html','side/rpg.html','side/simulation.html','side/sports.html','side/strategy.html','side/tabletop.html'];

Comments

[Developer]

Отформатируй код

[Developer]

А вот здесь точно нет опечатки?
'#gib','.mk','.doom','.hf','.mb','#action'

[z1oN]

Developer, нет, нету

[edward_freedom]

z1oN, тебе второй массив в принципе не надо. Из первого бери все элементы, удаляй из них точки и решетки и склеивай 'side/{item}.html'

[z1oN]

edward_freedom, а 'item' в данном случае это что?

[edward_freedom]

z1oN, каждый элемент массива

Answer 1

[Rsa97]

Я вам в прошлом вопросе писал вариант, с ним вообще массива не надо.
В HTML-коде ко всем нужным элементам добавляется класс, например 'link', и data-атрибут со ссылкой, например data-url='sg2002'.
После этого достаточно в обработчике нажатия прочитать атрибут и построить ссылку:

$('.link').click(function() {
  let url = $(this).data('url');
  url = `side/${url}.html`;
  ...
}

Comments

[dodiko1d]

Vanilla script сейчас больше ценится на рынке, сам работаю на фронте. Есть document.querySelector и document.querySelectorAll. Из js работать с DOM правильнее через data-attributes. Вообще, чем меньше НЕНУЖНОГО скрипта, тем лучше. Стили проще рефакторить, связка bootstrap + sass + bootstrap mixins позволяет реализовывать большинство простых задач без скрипта.

[edward_freedom]

dodiko1d, ценится конечно, но все равно многие jq используют

Answer 2

[Владимир]

У тебя базовый путь у всех одинаковый, не обязательно хранить side/ и .html можешь потом добавить при разборе массива

Comments

[Developer]

Там есть загвоздка: в некоторых местах вместо шарпа стоит точка

[Владимир]

Developer, Я про линки а не про id

[FridayJew]

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

Answer 3

[ProDiAn]

Я думаю, проблема не в самих массивах, а в целом во всей работе. Почему у тебя айдишники перемешаны с классами? Если ты потом делаешь путь к этой ссылке, то это очень похоже на якорь, а якорь вешается на айдишник, поскольку он уникален. Проблема скорее-всего в том, что ты захардкодил 2 массива, один из которых можно получить через

const idArray = Array.from(document.links).filter(item => item.id)

А второй:

const pathArray = idArray.map(item => `side/${item.id}.html`)

Как-то так.

Answer 4

[Argentinium]

const s = ['.class', '#id'];
const u = s.map(i=>`side/${i.slice(1)}.html`);

Comments

[Денис]

Слаг (имя файла) и якорь, ему соответствующий, не совпадают в задании.

[Argentinium]

Не совпадают только две цифры, я подумал, что это опечатка.

Answer 5

[Katrychenko]

Просто используй объекты :)

Comments

[Денис]

В JS массивы – объекты и так.
Функции – тоже объекты.

[Katrychenko]

Денис, сам понял что сказал? Покури немножко
С помощью обычного массива ты не создашь ассоциативный массив в js. Именно для этого объекты и существуют. А что ты туда засунишь, функцию или переменную это дело твоё. Но нельзя говорить что массивы это функции