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 ），所以這就是我在上面的第一片段中所做的。 不過，這很奇怪。

Answer 2

除了Crowder先生的回答，您還可以按以下方式使用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);