Подтвердить что ты не робот

ForEach не является функциональной ошибкой с массивом JavaScript

Я пытаюсь сделать простой цикл:

const parent = this.el.parentElement
console.log(parent.children)
parent.children.forEach(child => {
  console.log(child)
})

Но я получаю следующую ошибку:

VM384: 53 Uncaught TypeError: parent.children.forEach не является функцией

Даже если parent.children logs:

введите описание изображения здесь

В чем может быть проблема?

Примечание: Здесь JSFiddle.

4b9b3361

Ответ 1

parent.children является объектом, похожим на массив. Используйте следующее решение:

const parent = this.el.parentElement;
console.log(parent.children);
Array.prototype.forEach.call(parent.children, child => {
  console.log(child)
});

parent.children имеет тип NodeList, который является объектом, похожим на массив, потому что:

  • Он содержит свойство length, которое указывает количество узлов
  • Каждый узел представляет собой значение свойства с числовым именем, начиная с 0: {0: NodeObject, 1: NodeObject, length: 2,...}

Смотрите более подробную информацию в этой статье.

Ответ 2

parent.children не является массивом. Это HTMLCollection и не имеет метода forEach. Вы можете сначала преобразовать его в массив. Например, в ES6:

Array.from(parent.children).forEach(function (child) {
    console.log(child)
});

или с помощью оператора спредов:

[...parent.children].forEach(function (child) {
    console.log(child)
});

Ответ 3

parent.children вернет список списка узлов, технически HTML-коллекцию. Это объект типа массива, но не массив, поэтому вы не можете напрямую вызывать функции массива над ним. В этом контексте вы можете использовать Array.from() чтобы преобразовать это в реальный массив,

Array.from(parent.children).forEach(child => {
  console.log(child)
})

Ответ 4

Более наивная версия, по крайней мере, вы уверены, что она работает на всех устройствах, без конвертации и ES6:

const children = parent.children;
for (var i = 0; i < children.length; i++){
    console.log(children[i]);
}

https://jsfiddle.net/swb12kqn/5/

Ответ 5

parent.children - это HTMLCollection, который представляет собой объект, подобный массиву. Во-первых, вам нужно преобразовать его в реальный Array для использования методов Array.prototype.

const parent = this.el.parentElement
console.log(parent.children)
[].slice.call(parent.children).forEach(child => {
  console.log(child)
})

Ответ 6

Это потому, что parent.children - это NodeList, и он не поддерживает метод .forEach (поскольку NodeList - это массив, похожий на структуру, но не массив), поэтому попробуйте вызвать его, сначала преобразовав его в массив, используя

var children = [].slice.call(parent.children);
children.forEach(yourFunc);

Ответ 7

В forEach нет , вы можете выполнять итерацию только с помощью from second параметр, например:

let nodeList = [{0: [{'a':1,'b':2},{'c':3}]},{1:[]}]
Array.from(nodeList, child => {
  console.log(child)
});

Ответ 8

Поскольку вы используете функции ES6 (функции стрелок), вы также можете просто использовать для цикла следующим образом:

for(let child of [{0: [{'a':1,'b':2},{'c':3}]},{1:[]}]) {
  console.log(child)
}

Ответ 9

Если вы пытаетесь NodeList следующим образом:

const allParagraphs = document.querySelectorAll("p");

Я настоятельно рекомендую сделать это следующим образом:

Array.prototype.forEach.call(allParagraphs , function(el) {
    // Write your code here
})

Лично я пробовал несколько способов, но большинство из них не работало, так как я хотел NodeList, но этот работает как шарм, попробуйте!

NodeList не является массивом, но мы рассматриваем его как массив, используя Array. Итак, вы должны знать, что он не поддерживается в старых браузерах!

Нужна дополнительная информация о NodeList? Пожалуйста, прочитайте его документацию по MDN.

Ответ 10

Это всегда работало для меня

const someElement = document.querySelectorAll('.someElement');

  someElement.forEach((element) => {
    // Your code here
  });