JavaScript forEach 语法和长度

Question

我正在遍历整个汽车数组，并查看没有“过滤掉”类的对象的计数。是否可以简化此语法？我知道在 jQuery 中你可以用元素做这样的事情：

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

我的代码：

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

Answer 1

你可以使用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），这就是我在上面第一个sn-p 中所做的。不过，这很奇怪。

Answer 2

除了克劳德先生的回答，您还可以通过以下方式使用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 3

你可以在没有 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);