JS метод NodeList.entries()

Загальний опис

NodeList.entries() є вбудованим методом в JavaScript, який повертає новий об'єкт Iterator, що містить пари ключ/значення для всіх елементів NodeList. Цей метод дозволяє ітерувати елементи NodeList за допомогою циклів або інших конструкцій, які підтримують ітерацію.

Метод entries() корисний, коли потрібно отримати як індекси, так і значення елементів NodeList. Він часто використовується у поєднанні з циклами for...of або розподіленням масивів для зручного перебору елементів.

Розглянемо приклад використання entries() з NodeList, що містить всі елементи <p> на веб-сторінці:

const paragraphs = document.querySelectorAll('p');

// Ітерація з використанням циклу for...of
for (const [index, paragraph] of paragraphs.entries()) {
  console.log(`Параграф ${index + 1}: ${paragraph.textContent}`);
}

// Ітерація з використанням розподілення масиву
[...paragraphs.entries()].forEach(([index, paragraph]) => {
  console.log(`Параграф ${index + 1}: ${paragraph.textContent}`);
});

У цьому прикладі ми спочатку отримуємо NodeList всіх елементів <p> за допомогою document.querySelectorAll('p'). Потім ми використовуємо метод entries() для отримання ітератора пар ключ/значення.

У першому випадку ми ітеруємо через ітератор за допомогою циклу for...of. Для кожної ітерації ми деструктуризуємо пару [index, paragraph], де index - індекс поточного елемента, а paragraph - сам елемент. Потім ми виводимо індекс та текстовий вміст елемента в консоль.

У другому випадку ми використовуємо розподілення масиву [...paragraphs.entries()] для конвертації ітератора в масив пар ключ/значення. Потім ми ітеруємо через цей масив за допомогою методу forEach і виконуємо ті самі дії з індексами та елементами.

Метод entries() також корисний для перетворення NodeList на масив пар ключ/значення для подальшого використання з іншими методами масивів, такими як map, filter або reduce. Ось приклад, де ми фільтруємо NodeList за допомогою entries() та filter:

const paragraphs = document.querySelectorAll('p');
const longParagraphs = [...paragraphs.entries()]
  .filter(([index, paragraph]) => paragraph.textContent.length > 100)
  .map(([index, paragraph]) => ({
    index,
    text: paragraph.textContent,
  }));

console.log(longParagraphs);

У цьому прикладі ми спочатку конвертуємо NodeList в масив пар ключ/значення за допомогою entries() та розподілення масиву. Потім ми використовуємо метод filter для вибору лише тих елементів, текстовий вміст яких перевищує 100 символів. Для кожного відфільтрованого елемента ми створюємо новий об'єкт з індексом та текстовим вмістом за допомогою методу map.

Синтаксис

NodeList.entries()

Параметри

Return

iterator

Повертає об'єкт ітератора, який містить пари [ключ, значення] для кожного елемента NodeList. Кожна пара містить індекс елемента та сам елемент.

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

const list = document.querySelector('ul');
const listItems = list.querySelectorAll('li');

for (const [index, item] of listItems.entries()) {
  console.log(`Елемент ${index + 1}: ${item.textContent}`);
}

const links = document.querySelectorAll('a');
const externalLinks = [...links.entries()]
  .filter(([index, link]) => {
    // Регулярний вираз для перевірки зовнішніх посилань
    const externalPattern = /^https?:\/\/(?!www\.).*$/;
    return externalPattern.test(link.href);
  })
  .map(([index, link]) => ({
    index,
    href: link.href,
    text: link.textContent,
    target: link.target,
  }));

console.log(externalLinks);