尝试在 JavaScript 中将 for 循环更改为单行过滤器方法

Question

I have been trying to change a for loop to filter() one-liner, but I get this error: (index):44 Uncaught TypeError: childrenElements.filter is not a function .

Working code snippet:

const parentElement = document.querySelector('.container');

let childrenElements = parentElement.children;

let results = [];

for(i = 0; i < childrenElements.length; i++){
  if( childrenElements[i].classList.contains('ui-widget')){
    results.push('ui-widget')
  }
}

Not Working code snippet:

const parentElement = document.querySelector('.container');

let childrenElements = parentElement.children;

let results = [];

results = childrenElements.filter(childrenElement => childrenElement.classList.contains('ui-widget') )

I think it's because it doesn't recognize the childrenElements as array , but I'm not sure how to fix it.

You can find a demo here .

EDIT:

The accepted's answer final code snippet is the following:

const parentElement = document.querySelector('.container');

let childrenElements = parentElement.children;

let results = [];

results = [...childrenElements].map(childrenElement => childrenElement.classList );

console.log(results)

if (results[0].contains('ui-widget')) {
    alert('it has class')
}

Answer 1

You can convert your HTMLCollection object to an array using the spread operator, so that your data is iterable:

results = [...childrenElements].filter(childrenElement => childrenElement.classList );

However, it seems like you are trying to look for a particular class in the elements. For that you should map over your elements to create an array of classList arrays and then use contains to search for the element you're looking for.

results = [...childrenElements].map(childrenElement => childrenElement.classList );

if (results[0].contains('ui-widget')) {
    alert('it has class');
}

Answer 2

The reason for that is that childrenElements is a HTMLCollection that is enumerable, which means you can access its objects using indexes . Eg childrenElements[0]

However, it does not provide the same methods provided by the Array object. Therefore, you will need to convert it to an Array by using:

Array.from(childrenElements)

Then, you can use all of the methods provided for an Array .

Please be aware that if your list is too big, this might not be the most performant way as you are converting your HTMLCollection to an Array and then, looping all over again on it to filter elements.

Answer 3

In your code childrenElements is HTMLCollection which is array like object not an array. So, you just need to convert that to array and it will work.

 const parentElement = document.querySelector('.container'); let childrenElements = parentElement.children; console.log(childrenElements) let results = []; // working code snippet - uncomment to test it /* for(i = 0; i < childrenElements.length; i++){ if( childrenElements[i].classList.contains('ui-widget')){ results.push('ui-widget') } } console.log(results) */ // not working code snippet results = Array.from(childrenElements).filter(childrenElement => childrenElement.classList ) console.log(results) if (results[0] === 'ui-widget') { alert('it has class') }

 <div class="container"> <div class="ui-widget ui-widget-content widget-left"> I am a ui-widget </div> <p class="paragraph"> Hello Paragraph </p> <button class="btn"> Close </button> </div>

Answer 4

使用这个函数把它变成一个数组

var realArray = Array.from(childrenElements);