https://idea-hack.com/courses/arrange-and-remember-how-to-handle-arrays-in-javascript/lessons/in-javascript-apply-processing-to-array-element-another-array-2/
https://idea-hack.com/courses/arrange-and-remember-how-to-handle-arrays-in-javascript/lessons/in-javascript-apply-processing-to-array-element-another-array-2/

JavaScriptで、配列の要素に処理を適用して、別の配列を作るfilterメソッドの使い方

JavaScriptで配列を扱う際、要素に処理を実行して、特定の条件に合致するかどうかを判断し、その結果に応じた要素だけを含んだ配列を取得したい時があります。そんな時はfilter()メソッドが便利です。

map()メソッドと似ていますが、map()メソッドはコールバック関数の返り値が[要素]であるのに対し、filter()メソッドはコールバック関数の返り値が[真偽値]である点で異なります。

そのため、単純に配列の各要素に対して条件判定をするならfilter()メソッドを利用し、配列の要素に対して特定の処理を行う場合はmap()メソッドを利用するのが一般的です。

構文

メソッド

メソッド意味返り値
配列.filter(コールバック関数)コールバック関数の条件判定に合格した配列を生成する配列
filter()メソッド

コールバック関数

構文意味
([要素(省略可)]),[インデックス (省略可) ],[元配列 (省略可) ]) => 真偽値を返す処理真偽値

サンプルコード

サンプルコードとして、数字が入った配列に対して、一定の値以上のものだけ格納する配列を紹介します。

Output
配列から500以上の値だけ取得
Pug
.container.my-5
	div
		table.table
			tbody
				tr
					th 配列から500以上の値だけ取得
					td#targetText
JavaScript
const targetText = document.getElementById( 'targetText' );


const postDatas = [100,200,300,400,500,600,700,800,900,1000];

/*省略記法*/
//const newPostDatas = postDatas.filter((value) => value >= 500);

/*省略記法*/
/*const newPostDatas = postDatas.filter((value) => {
	return value >= 500;
});*/


const newPostDatas = postDatas.filter((value) => {
	if ( value >= 500) {
		return value;
	}
});
targetText.textContent = newPostDatas;
インストラクター
コメント

コメントを残す