.forEach() на масиви срещу NodeList (JavaScript)

Какво искам да знам

Чувал съм, че понякога NodeLists трябва да се променят на Arrays, за да се използва методът forEach(). В каква ситуация трябва да го направя?

Това, което опитах

Написах това:

const items = document.querySelectorAll('.js-li');
const arrItems = Array.from(items);

items.forEach((v, i, a) => console.log(`${v} / ${i} / ${a}`));
arrItems.forEach((v, i, a) => console.log(`${v} / ${i} / ${a}`));
<ul>
  <li class="js-li">zero</li>
  <li class="js-li">one</li>
  <li class="js-li">two</li>
  <li class="js-li">three</li>
  <li class="js-li">four</li>
</ul>

Но не можах да разбера разликата между with/without Array.from().


javascript foreach nodelist
person Miu    schedule 16.03.2020    source източник
comment
Вижте връзките по-долу stackoverflow.com/q/15763358/12210002   -  person tedd    schedule 16.03.2020

Отговори (1)


arrow_upward
1
arrow_downward

Виж

NodeLists и Arrays са две различни неща, защото NodeLists всъщност не са API на JavaScript, а API на браузър.

Неща като querySelectorAll() и getElementsByTagName() не са JavaScript методи, те са API на браузъра, които ви позволяват достъп до DOM елементи. След това можете да ги манипулирате с JavaScript.

NodeLists се различават от масивите и по друг значим начин.

Те често са живи списъци, което означава, че ако елементите бъдат премахнати или добавени към DOM, списъкът се актуализира автоматично. querySelector() и querySelectorAll() връщат статичен списък (този, който не се актуализира), но свойства като .childNodes са живи списъци, които ще се променят, докато манипулирате DOM (което може да е добро или лошо нещо, в зависимост от това как го използвате ).

Всичко това е още по-объркващо, защото масивите могат да съдържат възли. И има друг, по-стар тип списък, наречен HTMLCollection, който предшества NodeLists, но е функционално подобен (още една статия за друг ден).

Ключовият начин да мислите за NodeLists срещу масиви: NodeLists са езиково-агностичен начин за достъп до DOM елементи, а Arrays са JavaScript обект, който можете да използвате, за да съдържате колекции от неща.

Всеки от тях има свои собствени методи и свойства и можете да конвертирате NodeList в масив, ако е необходимо (но не и обратното).

person Ahmed Kesha    schedule 16.03.2020