Как можно расписать более понятно этот код?

Question

[Andrew Kolomiets]

Нашёл этот кусок кода, просто хотелось бы его расписать более развёрнуто, не в такой короткой форме, а сам пока не понимаю, как он работает.

let res = Array.from(elems).find(v => v.textContent == mass[i]);

Comments

[Сергей delphinpro]

Куда понятнее-то?
Ищется первый элемент, у которого текстовое содержимое (textContent) совпадает с mass[i]

Answer 1

[Алексей Ярков]

<div>text</div>
<div>text2</div>

// Предположим что elems это NodeCollection преобразованная в массив
const elems = Array.from(document.querySelectorAll('div'));
// Предположим что mass какой-то массив строк.
// Судя по примеру непонятно откуда взялась переменная i, поэтому опустим этот момент
const mass = ['text', 'text2'];

let res; // Здесь будет либо нужный нам DIV, либо undefined

for (let i = 0; i < elems.length; i++) {
  const div = elems[i];

  if (div.textContent === mass[i]) {
    res = div; // Сохраняем найденный DIV
    break; // Выходим из цикла
  }
}

console.log(res); // DIV или undefined

Answer 2

[historydev]

Array.from - по дефолту querySelectorAll возвращает nodeList (к нему можно применить только forEach для пробега), а нам нужен массив чтобы получить доступ к методам массивов, в данном случае find.

Find - пробегается по массиву и возвращает undefined или первый найденный элемент

v - текущий элемент, v.textContent - v это объект у которого есть textContent поле.
mass[i] если mass объект, достаёт значение поля по ключу, если mass массив достаёт элемент по индексу.

v.textContent == mass[i] сравнивает на соответствие, условие которое передано в find, вернуться все элементы к которым подошло условие (вернуло true).

let res = Array.from(elems).find(v => v.textContent == mass[i]);

Comments

[Алексей Ярков]

вернуться все элементы к которым подошло условие (вернуло true)

%Зануда mode-on%
Вернётся первое совпадение, а не все ))
%Зануда mode-off%

[historydev]

Алексей Ярков, да, что-то я не то написал)