JavaScript для каждого синтаксиса и длины

Question

Я перебираю весь массив автомобилей и слежу за количеством объектов, которые не имеют класса «отфильтрованный». Можно ли упростить этот синтаксис? Я знаю, что в jQuery вы можете сделать что-то подобное с элементами:

        $("element").hasClass("filtered-out").length;

Мой код:

        var available_cars = 0;
        cars.forEach(function(element) {
            if (!element.hasClass("filtered-out"))
                available_cars++;
        });

Answer 1

Наряду с ответом мистера Краудера вы также можете использовать Array.prototype.reduce следующим образом:

cars.reduce((a, car) => { if(!car.hasClass("filtered-out")) {a++}; return a; }, 0);

Или, «минимизированный»:

cars.reduce((a, car) => !car.hasClass("filtered-out") && a++, 0);

Также будет возвращено количество автомобилей, пропускающих класс «отфильтрованный». Если элементы не являются объектами jQuery, вам нужно добавить дополнительный $() вокруг переменной car:

cars.reduce((a, car) => { if(!$(car).hasClass("filtered-out")) {a++}; return a; }, 0);

Answer 2

Вы можете сделать что-то подобное без jQuery

const cars = document.querySelectorAll('.cars');
const carFilter = (car) => car.classList.contains('filtered-out');
const available_cars = [...cars].filter(carFilter);
console.log(available_cars.length);

Answer 3

Вы можете использовать filter:

var available_cars = cars.filter(function(car) { return !car.hasClass("filtered-out"); }).length;

Это более лаконично с функцией стрелки ES2015 +:

var available_cars = cars.filter(car => !car.hasClass("filtered-out")).length;

Если вы можете сделать cars объектом jQuery вместо массива (вы, похоже, используете его в качестве массива в своем вопросе), это будет:

var available_cars = cars.filter(":not(.filtered-out)").length;

---

В этом вопросе cars рассматривается как массив (cars.forEach), но отдельные элементы рассматриваются как объекты jQuery (element.hasClass), поэтому я сделал это в первом фрагменте выше. Хотя это странно.