Решил задачу, но вопрос насколько верное решение выбрал?

Question

[VitaUshakov51]

При нажатии b-14 выполняете функцию f14. Функция должна в out-14 выводить нулевые (по индексу) элементы вложенных массивов в a14. Вывод через пробел.

let a14 = {
    'prim': [1, 2, 23],
    'one': [3, 4, 5],
    'testt': [6, 7, 8],
    'ivan': [9, 10]
};

function f14() {
    let out = '';
    let arr = [];
    for (let key in a14) {
        arr = a14[key];
        out += arr[0] + ' ';
    };
    document.querySelector('.out-14').innerHTML = out;
}

document.querySelector('.b-14').onclick = f14;

Comments

[Вадим]

"насколько верное" - а критерии какие у верности?
Вы их не предоставили.

Из хорошего - делаете querySelector().innerHTML один раз на вызов функции, а не в цикле на каждый элемент innerHTML += arr[0].
Но можно и вовсе вынести поиск элемента вне функции и сохранить в переменную

[alexalexes]

Если придраться, то после последнего числа пробел лишний.
Можно своим велосипедом через i это отслеживать:

let i = 0;
for (let key in a14) {
        arr = a14[key];
        out += (i > 0 ? ' ' : '') + arr[0];
    };

А можно изменить роль массива arr и воспользоваться join-ом:

let arr = [];
for (let key in a14) {
        arr.push(a14[key][0]);
    };
document.querySelector('.out-14').innerHTML = arr.join(' ');

[VitaUshakov51]

Вадим, Ну да, согласен, что критерии не указал. Просто у меня все работает и хотел понимания насколько можно было улучшить код

Answer 1

[Сергей Соколов]

Ревью
В вашем решении можно улучшить мелочи:
1. переменная arr нужна только внутри цикла, лучше её туда и поместить. В большом коде проще будет разобраться, когда ограничена область видимости созданных переменных. const вместо let уместнее, т.к. внутри цикла значение key не меняется, да и arr тоже:

for (const key in a14) {
  const arr = a14[key];
  // ...
}

2. т.к. просят «через пробел» – удобнее всего складывать значения в массив, а потом его .join(' ') – это избавляет от проблемы лишнего пробела, да и мухи данные отдельно, оформление отдельно.

3. вместо innerHTML лучше innerText, т.к. выводимое не содержит разметки, и зачем заставлять браузер пытаться разбирать его как HTML.

4. вешать слушателя события клика лучше через addEventListener:

- document.querySelector('.b-14').onclick = f14;
+ document.querySelector('.b-14').addEventListener('click', f14);

Альтернатива
На какой стадии обучения выдали это задание, мне неизвестно.
Но раз там есть и объект a14, то может, слышали про Object.values().
А раз в задании говорят про массивы, то, может, знакомы методы map() и join()?

Можно решить так:

const f14 = () => document.querySelector('.out-14') // элемент для вывода результата
  .innerText = Object.values(a14) // массив массивов [ [1, 2, 23], [3, 4, 5], ... ]
    .map(arr => arr[0]) // вместо каждого под-массива, его первый элемент
    .join(' '); // склеить в строку через пробел

Comments

[Сергей Соколов]

Борис Алексеев, onclick=func затирает предыдущее значение, если б было.
Через addEventListener() можно добавлять несколько обработчиков события и случайно никто не уберёт именно ваш )