.net column
.NET開発者のためのブログメディア

JavaScriptでのfilterの使い方とは?Callback関数の使い方やアロー演算子の使い方について紹介!

 

SE
Callback関数で抽出した条件に合った要素を取り出す、filterの使い方について教えてください。

PM
では、Callback関数にの使い方などについて、おさらいしながら見ていきましょう。

JavaScriptでのfilterの使い方とは?


今回は、JavaScriptでのfilterの使い方について説明します。filterを使うと、配列を指定条件で抽出できます。
ここでは、
・基本的な使い方
・整数配列に対するfilter
・文字列配列に対するfilter
・第2引数(index)の使い方
・第3引数(array)の使い方
・連想配列に対するfilter
・アロー演算子
について紹介します。

JavaScriptでのfilterの使い方に興味のある方はぜひご覧ください。

基本的な使い方

JavaScriptにおける、filterの基本的な使い方は以下です。

value: 配列の値、index: 配列のインデックス番号、array: 配列 を表します。indexおよびarrayはなくても良いです。

整数配列に対するfilter

JavaScriptでの整数配列に対するfilterの使い方を紹介します。実際のソースコードを見てみましょう。

実行結果は以下のようになります。

抽出条件に合致する要素のみが抽出されていることが分かります。

文字列配列に対するfilter

JavaScriptでの文字列配列に対するfilterの使い方を紹介します。実際のソースコードを見てみましょう。

実行結果は以下のようになります。

もちろん、複数条件でも抽出可能です。

実行結果は以下のようになります。

includesメソッドを使用すれば、特定文字列を含む要素を抽出できます。

実行結果は以下のようになります。

第2引数(index)の使い方

callback関数の第2引数(index)の使い方を紹介します。実際のソースコードを見てみましょう。

実行結果は以下のようになります。

このように、JavaScriptのfilterでは、第2引数(index)に対して処理できます。

第3引数(array)の使い方

callback関数の第3引数(array)の使い方を紹介します。実際のソースコードを見てみましょう。

実行結果は以下のようになります。

indexOfメソッドでインデックス番号が分かります。インデックス番号とインデックスを比較することで、重複データを排除した配列を生成できます。

同様に、重複データ以外を排除した配列も生成できます。

実行結果は以下のようになります。

このように、JavaScriptのfilterでは、第3引数(array)に対して処理できます。

連想配列に対するfilter

filterは配列だけでなく、連想配列に対しても使用できます。実際のソースコードを見てみましょう。

実行結果は以下のようになります。

このように、JavaScriptでは、連想配列に対してもfilterできます。

アロー演算子

アロー演算子を使えば、filterをシンプルに記述できます。実際のソースコードを見てみましょう。

実行結果は以下のようになります。

結果は同じになりますが、アロー演算子を使うほうがシンプルに記述できます。

SE
アロー演算子を使用することで、よりシンプルに記述でき、条件抽出も簡単にできますね。

PM
そうですね。頻繁に使うメソッドではありませんが、いざというときに必要なメソッドですのでマスターしておきたいですね。

まとめ

いかがでしたでしょうか。JavaScriptでのfilterの使い方について説明しました。filterを使うと、配列や連想配列を指定条件で抽出できます。基本的な使い方だけでなく、callback関数の使い方やアロー演算子の使い方について紹介しました。

ぜひご自身でJavaScriptのソースコードを書いて、理解を深めてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags