配列に値を追加すると、結果が異なるのはなぜですか？

Question

animals = ['ant', 'bear', 'cat', 'dog', 'elephant', 'cat', 'fox', 'goat', 'cat'];のような配列が与えられた場合、単語catの出現回数を調べるように任命されます。

私は、以下の機能と出力OUTの結果実行できます。

let catCounter = 0; 
let result = []; 

animals.filter(animal => { 
    if (animal === 'cat') { 
    catCounter++; 
    } result.push(catCounter); 
}); 

console.log(result); 

[ 0, 0, 1, 1, 1, 2, 2, 2, 3 ]を与えます。

私は最終結果3を要求します。これを行うことで希望の結果を得ることができます。console.log(catCounter);

なぜこのようなことが発生するのかを簡単に説明してください。また、自分のタスクを完了するためのより良い方法がある場合は、提供できれば非常に感謝しています。

Answer 1

をあなたが配列結果に毎回値を追加している、そうすることによって、Array.push()メソッドを使用し、使用プッシュ（）。これはなぜこのような配列になるのかを説明します。

繰り返して繰り返しましょう。

あなたはあなたができることがあるどのように多くの猫カウントするようにしたい場合は、次の動物配列['cat', 'dog', 'chicken', 'cat']

On first loop =>  increment catCounter (1) and push it to array => `[1]` 
On second loop => don't increment catCounter (1) and push it to array => `[1, 1]` 
On third loop => don't increment catCounter (1) and push it to array => `[1, 1, 1]` 
On fourth loop =>  increment catCounter (2) and push it to array => `[1, 1, 1, 2]` 

を想定します。

let catCounter = 0; 

animals.forEach(animal => { 
    if (animal === 'cat') { 
    catCounter++; 
    } 
}); 

console.log(catCounter); 

Answer 2

この方法が好きですか：

var arrayVal = ['ant', 'bear', 'cat', 'dog', 'elephant', 'cat', 'fox', 'goat', 'cat']; 
 
console.log(arrayVal.filter(function(e){ if(e=='cat'){return e}}).length);