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() у змінній. Це допоможе уникнути повторного обчислення ітератора під час кожної ітерації.

автор: Bond правити

Порада

Пам'ятайте, що entries() повертає ітератор, а не масив. Якщо вам потрібно отримати масив індексів та елементів, використовуйте розподілення масиву або метод Array.from(). Наприклад:

const options = document.querySelectorAll('option');
const optionArray = Array.from(options.entries());

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

NodeList.entries()

Повернення

iterator

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

автор: Bond

правити

Переглядачі

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

Підтримка: стаціонарні переглядачі

Переглядач
	51	50	10	38	16

Підтримка: мобільні переглядачі

Переглядач
	51	51	50	10

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

<ul>
    <li>перший пункт</li>
    <li>другий пункт</li>
</ul>
<ul>
    <li>перший пункт</li>
    <li>другий пункт</li>
</ul>

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

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

<a href="#demo">перше посилання</a>
<a href="#demo2">друге посилання</a>

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);