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

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

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

filterとは

変数 = 配列.filter(callback(element[, index[, array]]){
// 処理
}[, thisArg])

filterは、配列を関数で処理し条件にあった値で新しい配列を作成します。
→条件にあった値で新しい配列を作る点がmapとの違いです。
→mapは配列の全ての値を処理して返します。
1つめの引数は、配列の現在の値です。
2つめの引数は、配列の現在にindex値です。
3つめの引数は、使用している配列です。

filterのサンプル

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

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

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

mapの場合

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

  const arr2 = arr1.map(function (a) {
    return a > 6;
  });
  console.log(arr2); //[false, false, true]
  console.log(arr1); //(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行目の関数を呼んでいます。