JavaScript - Array filter()の使い方

JavaScriptでは、Array.filter()は配列の要素の中で特定の条件を満たす要素を集めて新しい配列に返します。例で filter() の使い方を見てみましょう。

1. Array.filter()

以下は filter() を使う簡単な例です。配列 words の要素の中で、文字列の長さが 6 より大きいものだけを探して、新しい配列に追加して返します。 filter() は引数として関数を受け取り、この例では Arrow function に関数を渡しました。関数では、 wordは要素の配列が引数として渡され、 word.length > 6の操作でTrueと判断された要素だけを集めて配列に返します。

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);

Output:

[ 'exuberant', 'destruction', 'present' ]

2. Array.filter()의Synta

filter(callback) のような引数で callback を受け取り、 callback 関数は以下のように 3 つの引数を受け取ります。

  • element: 配列の要
  • index: 渡された要素の Inde
  • array: 配列客
function callback(element, index, array)

次の例は callback 関数を実装して filter() に渡します。 callbackが呼び出されたときに要素をログに出力することで、どのように動作するかを確認できます。 callback 関数から true を返す要素だけを集め、新しい配列に渡します。

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

function func(element, index, array) {
  console.log("element: " + element + ", index: " + index + ", array: " + array);
  return element.length > 6;
}

const result = words.filter(func);

console.log(result);

Output:

element: spray, index: 0, array: spray,limit,elite,exuberant,destruction,present
element: limit, index: 1, array: spray,limit,elite,exuberant,destruction,present
element: elite, index: 2, array: spray,limit,elite,exuberant,destruction,present
element: exuberant, index: 3, array: spray,limit,elite,exuberant,destruction,present
element: destruction, index: 4, array: spray,limit,elite,exuberant,destruction,present
element: present, index: 5, array: spray,limit,elite,exuberant,destruction,present
[ 'exuberant', 'destruction', 'present' ]

3. callback の引数が省略された Array.filter() 例

callback の引数の中に index や array を使用しない場合は省略できます。

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

function func(element) {
  return element.length > 6;
}

const result = words.filter(func);

console.log(result);

以下は、数値配列で Array.filter() を使用する例です。

function isBigEnough(value) {
  return value >= 10;
}

var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
console.log(filtered);

Output:

[ 12, 130, 44 ]

以下のように filter() に直接関数を入力することもできます。

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(function func(element) {
  return element.length > 6;
});

console.log(result);

4. Arrow functionを使用したArray.filter()の例

Arrow 関数を使用すると、より少ないコードで同じコンテンツを実装できます。

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
codechachaCopyright ©2019 codechacha