JavaScript で配列の特定の要素を数える

1. JavaScript で .filter メソッドを使用して配列の特定の要素をカウントする
2. JavaScript で .reduce メソッドを使ってコールバック関数を実行する
3. JavaScript で .prototype 配列エンティティを使用してカスタムメソッドまたはプロパティを記述する

条件に基づいて配列要素をフィルタリングするために文字通り使用できる .filter メソッドを導入し、.length プロパティに加えて、配列の特定の要素をカウントするために使用できます。関数は、パラメーターとして渡される .filter メソッドの条件を提供します。

また、配列内の各要素に対して関数を実行し、単一の値を返す .reduce メソッドを紹介します。

パラメータとして渡される関数は、矢印関数またはコールバック関数としての共通関数のいずれかです。.filter が返される配列に追加する要素、または .reduce メソッドが配列内の各要素に対して行うことを指示します。

JavaScript で .filter メソッドを使用して配列の特定の要素をカウントする

.filter は、指定された条件でフィルタリングされた新しい配列を返す Array エンティティのメソッドです。新しい配列を返すということは、メソッドが呼び出された元の配列が不変のままであることを意味します。

たとえば、配列内の値 one に等しいすべての要素が必要な場合は、次のように .filter を使用できます。

// Input
let array = ['one', 'two', 'three', 'four', 'five']
array = array.filter(element => element == 'one')
console.log(array)

出力：

// Output
[ 'one' ]

予想どおり、.filter メソッドは element == 'one'条件に基づいて配列を返しました。したがって、配列の実際の要素が'one'に等しい場合、フィルターはこの要素を返された配列に追加します。

しかし、.filter メソッド内で何が起こっているのでしょうか。condition() 関数に共通の関数構造を使用すると、よりよくわかります。

// Input
let array = ['one', 'two', 'three', 'four', 'five']
array = array.filter(function condition(element) {
  if (element == 'one') return true
    return false
})
console.log(array)

これにより、同じ最初の出力例が得られます。

// Output
[ 'one' ]

condition() 関数はパラメータとして element を受け取り、この element が特定の値（この場合は'one'）と等しい場合には true を、そうでない場合には false を返します。

したがって、.filter メソッドは、条件が true になる element を追加します。元の配列には one として最初の要素しかないため、.filter は 1つの要素のみを返します。

condition() 関数は .filter メソッド内で宣言されていることに注意してください。外部で宣言して filter の内部で呼び出すと、element がコールバックスコープの一部であるため、機能しません。

コールバック関数は、外部関数と呼ばれる別の関数にパラメーターとして渡されます。

外部関数は、コールバック関数を呼び出して何かを実行します。.filter メソッドの場合、condition() コールバック関数を呼び出して、その条件に基づいて配列をフィルタリングします。

目的に戻ると、.filter は最終的に array.length 要素を持つ新しい配列を返します。各要素は、コールバック関数が true と同等の値を返した要素です。.length プロパティを使用してこれを簡単に実行し、これらのフィルタリングされた要素をカウントできます。

.length は、配列内の要素の数を返す配列エンティティのプロパティです。最初の要素は常にインデックス上にあるため、この数値は常にその配列の最大インデックスよりも大きくなります。これは 0 に等しいためです。

// Input
let array = [1, 2, 3, 4, 5]
console.log(array.length)

出力：

// Output
5

配列の要素数は 5 です。5 は値 5 のインデックスである 4 よりも大きくなっています。

例として、すべてをまとめると、次のように使用できます。7 を超える学校のすべてのテストノートの数を取得するにはどうすればよいですか。テストノートの配列は例にあります。

// Input
let notes =
    [7.0, 6.7, 7.3, 9.8, 5.6, 7.1, 7.8, 6.2, 8.0, 9.0, 4.5, 6.9, 7.5, 8.5, 6.4]
greaterThanSeven = notes.filter(value => value > 7)
console.log(greaterThanSeven.length)

出力：

// Output (The array returned by the .filter is: [7.3, 9.8, 7.1, 7.8, 8, 9, 7.5, 8.5])
8

したがって、8 は、元の notes 配列内の 15 個のノートすべてのうち 7 個より大きいノートの数です。

JavaScript で .reduce メソッドを使ってコールバック関数を実行する

別のオプションとして、.reduce 配列エンティティメソッドを使用できます。このメソッドは、各配列要素でコールバック関数（および .filter）を実行するために使用されますが、最終的には単一の値を返します。

.reduce が機能する簡単な例は、配列内のすべての要素の合計です。

// Input
let array = [1, 2, 3, 4, 5].reduce((previous, current) => previous + current)
console.log(array)

出力：

// Output
15

ただし、初期値を渡すことで、このメソッドを別の方法で使用できます。前の例では、previous が配列の最初のインデックス要素で始まり、次のようにコールバック関数であることがわかります。

/*
previous + current = result
1 + 2 = 3
3 + 3 = 6
6 + 4 = 10
10 + 5 = 15 -> final result
*/

2 番目のパラメーター（コールバック関数が最初のパラメーターであるため）を .reduce メソッドに渡さない場合、最初の反復で previous が配列の最初の要素と見なされるため、この合計は機能します。

しかし、配列内の特定の要素をカウントしたい場合はどうでしょうか。間違った値になる可能性があるため、最初の要素を previous として使用することはできません。

以下の例は、配列に含まれる 2つの数値の数を数えるものです。

// Input
let array = [1, 2, 3, 4, 5].reduce((sum, value) => (value == 2 ? sum + 1 : sum))
console.log(array)

出力：

// Output
2

ご覧のとおり、結果は 2 ですが、正解は 1 です。これは、コールバック関数以外のパラメーターを渡さないため、sum が最初の要素 1 で初期化されるために発生しました。

修正を行うには、2 番目の .reduce パラメーターとして 0 を渡すだけです。

// Input
let array =
    [1, 2, 3, 4, 5].reduce((sum, value) => (value == 2 ? sum + 1 : sum), 0)
console.log(array)

出力：

// Output
1

このように、.reduce は、現在の要素が 2 に等しいたびに sum + 1 を作成し、sum は 0 で初期化されます。

JavaScript で .prototype 配列エンティティを使用してカスタムメソッドまたはプロパティを記述する

さらに、配列内の特定の要素をカウントする必要があるたびにこれらすべてのロジックを使用する代わりに、.prototype 配列エンティティプロパティを使用して、このエンティティにカスタムメソッドまたはプロパティを書き込むことができます。

配列エンティティに対して .countCertainElements メソッドを作成するには、次の構造を使用できます。

// Input
// Declaring the prototype .countCertainElements method
Array.prototype.countCertainElements = function(value) {
  return this.filter(arrayElement => arrayElement == value).length
} let array1 = [1, 2, 2, 2, 3, 4, 5]
console.log(array1.countCertainElements(2))

出力：

// Output
3

.reduce についても同じことができます。

// Input
// Declaring the prototype .countCertainElements method
Array.prototype.countCertainElements = function(value) {
  return this.reduce((sum, element) => (element == value ? sum + 1 : sum), 0)
} let array1 = [1, 2, 2, 2, 3, 4, 5]
console.log(array1.countCertainElements(2))

出力：

// Output
3