JavaScript filter 条件にあった値で新しい配列を作成

JavaScriptの配列のfilterのサンプルです。

目次 filterとは
filterのサンプル
アロー関数を使用(=>)
filter関数の引数を確認
ループ内で関数を呼ぶ

filterとは

変数 = 配列.filter(callback(element[, index[, array]]){
// 処理
}[, thisArg])
  • filterは、配列を関数で処理し条件にあった値で新しい配列を作成します。
    →条件にあった値で新しい配列を作る点がmapとの違いです。
    →mapは配列の全ての値を処理して返します。
  • 1つめの引数は、配列の現在の値です。
  • 2つめの引数は、配列の現在にindex値です。
  • 3つめの引数は、使用している配列です。

filterのサンプル

<script>
  const a = [1, 5, 9];

  const c = a.filter(function (b) {
    return b > 6;
  });
  console.log(c); //[9]
  console.log(a); //(3) [1, 5, 9]
</script>

5行目は、6より大きい値を返します。
7行目のように条件でtrueとなった値で、新規の配列が作成されます。
8行目は、元の配列です。値は変更されていません

mapの場合

<script>
  const a = [1, 5, 9];

  const c = a.map(function (b) {
    return b > 6;
  });
  console.log(c); //[false, false, true]
  console.log(a); //(3) [1, 5, 9]
</script>

7行目のようにtrueとfalseで3つ返します。

アロー関数を使用(=>)

<script>
  const arr = [2, 5, 9];

  arr2 = arr.filter((b) => b > 6);

  console.log(arr2); //[9]
</script>

アロー関数は、=>を使用します。

filter関数の引数を確認

<script>
  const arr = ["A", "B", "C"];

  arr.filter(function (value, index, array) {
    console.log(value); //A B C
    console.log(index); //0 1 2
    console.log(array); //["A", "B", "C"]が3回出力される
  });
</script>

1つめの引数は、配列の値です。
2つめの引数は、配列の添字です。
3つめの引数は、配列です。

ループ内で関数を呼ぶ

<script>
  const arr = ["A", "B", "C"];

  arr.filter(function (a) {
    print(a);
  });

  function print(str){
    console.log(str + "です"); //Aです Bです Cです
  }
</script>

5行目は、ループ内で8行目の関数を呼んでいます。

関連の記事

JavaScript 配列の仕組みと使い方のサンプル

△上に戻る