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.
Ответы
Ответ 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
});