Javascriptのfilter()メソッド: インデックス、複数条件、重複除去、マップ

JavaScriptの filter() 関数は、既存の配列から特定の条件にマッチする要素だけをフィルタリングした新しい配列を取得するために必要不可欠なメソッドです。この記事では、index パラメータ、複数の条件の使用、重複の除去など、filter() 関数の使い方を紹介します、 includes()メソッドの使い方と、map()メソッドやfind()メソッドとの違いについて学ぶ。

1. filter()関数の基本とindexパラメータ [#1].

JavaScriptにおいて、filter() メソッドは、配列の中から特定の条件を満たす要素のみを抽出し、新しい配列を作成するメソッドです。

基本的な構文を以下に示します。

array.filter(callback(element[, index[, array]])[, thisArg])

filter()メソッドはコールバック関数をパラメータとして受け取り、配列の各要素に対して実行され、trueまたはfalseの値を返す。この時点で、コールバック関数は true の値を返す要素のみからなる新しい配列を返す。

この関数の使い方を簡単な例で見てみよう。

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(number => number % 2 === 0);
 
console.log(evenNumbers); // Output: [2, 4]

この例では、アロー関数 number => number % 2 === 0 をコールバック関数として受け取った。そして、それを適用すると、2、4だけを含む新しい配列が返され、trueという値が返されることがわかる。

forEach()関数やmap()関数のように、コールバック関数は2つのオプションのパラメータを取ることができます。以下の例では、2番目と3番目のパラメータにそれぞれ index と array という名前を付けて、現在の要素のインデックスと配列そのものにアクセスしている。パラメータの名前は自由である。

const numbers = [10, 20, 30, 40, 50];
 
numbers.filter((number, index, array) => {
    return index % 2 === 0
});
 
// Output: [10, 30, 50]

この例の filter() 関数では、現在の要素のインデックスを index パラメータとして使用し、0, 2, 4 の位置にある要素のみを返すという条件を定義しています。が返されます。

2. 複数条件の使用

複数の条件を使用する方法は2つあります。

1つ目は、関係演算子 && を使って複数の条件を設定する方法である。次に、3の倍数であり、かつ5より大きいという2つの条件をチェックする。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const filteredNumbers = numbers.filter(number => number % 3 === 0 && number > 5);
 
console.log(filteredNumbers); // Output: [6, 9]

もう1つは、次のように複数の filter 関数をチェーンして使用する方法です。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const filteredNumbers = numbers.filter(number => number % 3 === 0).filter(number => number > 5);
 
console.log(filteredNumbers); // Output: [6, 9]

3. filter() による重複の除去

filter()関数を使うと、配列から重複した要素を簡単に取り除くことができます。

まずはサンプルコードを見てみましょう。

const array = [1, 2, 3, 2, 4, 3, 5, 1];
 
const uniqueArray = array.filter((element, index, array) => {
  return array.indexOf(element) === index;
});
 
console.log(uniqueArray);
// Output: [1, 2, 3, 4, 5]

上の例のコールバック関数は、セクション1で見た index と array の両方のパラメータを使ってアルゴリズムを構築しています。

Array.indexOf(element)メソッドは、elementにマッチする配列の最小のインデックスを返します。 (存在しない場合は -1 を返す）。

現在の要素が配列内の唯一の値である場合、array.indexOf() メソッドの戻り値は現在の要素の index 値に等しい。逆に、コールバック関数の戻り値が false の場合は、複数の値が存在することを意味し、コールバック関数によってフィルタリングされる。

4. includes()によるコールバック関数の定義 [#4].

String.includes(string)メソッドは、文字列の中に string という値が含まれているかどうかを返します。 filter()メソッドと併用することで、文字列の配列の中から特定の部分文字列を含む要素だけを選択することができます。

簡単な例を見てみましょう。

const subjects = ["Basic English", "Basic Chinese", "Intermediate Japanese", "Intermediate French", "Basic Chemistry"]
 
const basics = subjects.filter(subject => subject.includes("Basic"))
 
console.log(basics)
// Output: [ 'Basic English', 'Basic Chinese', 'Basic Chemistry' ]

上記の例では、includes メソッドは "Basic" という文字列を含む科目に対してのみ true という値を返します。その結果、5つの科目のうち、"Basic"という文字列を含む科目のみをフィルタリングすることができました。

このように、2つのメソッドを併用することで、多くのケースで相乗効果を得ることができます。

map() との違い

filter()関数は、forEach()、map()、reduce()と並んで、以下のような配列メソッドです。これらが使える配列メソッドです。それぞれのメソッドには独自の機能があるので、違いを知って上手に使い分けることが大切です。

各メソッドの詳しい説明は、それぞれの投稿を参照してください。

forEach()：配列の全要素を走査し、指定されたコールバック関数を実行する。
map()：各要素にコールバック関数を適用し、コールバック関数の戻り値を持つ新しい配列を返す。
reduce()：前の値と現在の値を結合する関数を適用し、配列内の値を合計して1つの値にする。

map()関数との主な違いは、コールバック関数と返す配列である。

map()関数のコールバック関数は新しい要素を返し、その値が新しい配列を構成するので、配列の長さは常に同じである。 filter()関数のコールバック関数は、新しい配列にどの要素を含めるかを決定する参照を返す。新しい配列の長さは常に古い配列以下になり、要素の値は変更されません。

6.find()との違い

Array.find(condition)メソッドは、コールバック関数 condition で定義された条件にマッチする要素を配列から見つけ、その値を返す。複数の要素がある場合は、最も小さいインデックスを持つ要素のみを返し、見つからない場合は undefined を返す。

コールバック関数は filter() 関数と同じ形式である。

const result = array.find(callback((element, index, array) => {
  // Condition logic
  // Return true or false
}))

使用例を見てみよう。

const numbers = [1, 2, 3, 4, 5, 6];
 
const firstEvenNumber = numbers.find((number) => {
  return number % 2 === 0;
});
 
console.log(firstEvenNumber);
// Output: 2

これは 2 という値を返し、これは条件にマッチする最小のインデックスの値である。

このように、find() メソッドは条件にマッチする値を見つけるという点では filter() メソッドと同じですが、filter() メソッドとは異なり、1つの値しか返しません。

7. 結論

filter関数を使って、与えられた配列の中から条件にマッチする要素だけをフィルタリングする方法を見てきました。このメソッドは単独で使っても強力ですが、他の配列メソッドと組み合わせて使うことで、さらに多くの可能性が広がります、他の関数やメソッドと組み合わせて使う方法を探る価値はあります。

map()reduce()