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

JavaScriptで配列を扱う際、要素に処理を実行して新しい配列として再取得したい時があります。そんな時はmap()メソッドが便利です。

このメソッドはforEach()メソッドと非常に似ていますが、forEach()メソッドは返り値がなく実行するだけのメソッドなのに対し、map()メソッドは実行後の結果を配列として返す点で異なっています。

構文

メソッド

メソッド意味返り値
配列.map(コールバック関数)コールバック関数によって新しい配列を生成する配列
map()メソッド

コールバック関数の形式

構文意味
([要素(省略可)]),[インデックス (省略可) ],[元配列 (省略可) ]) =>変更後の要素
要素を受けとって、変更後の要素を返します。

サンプルコード

サンプルコードとして、post_idとpost_statusというキーを持つオブジェクト配列からpost_idの部分だけを取得して配列を作成して、それを文字列として出力するサンプルを紹介します。

Output
オブジェクト配列からpost_idの部分だけを取得
Pug
.container.my-5
	div
		table.table
			tbody
				tr
					th オブジェクト配列からpost_idの部分だけを取得
					td#targetText
JavaScript
const targetText = document.getElementById( 'targetText' );


const postDatas = [
  { post_id: 123, post_status: 'draft' },
  { post_id: 1021, post_status: 'publish' },
  { post_id: 6021, post_status: 'future' },
];

const newPostDatas = postDatas.map((value) => value.post_id);
targetText.textContent = newPostDatas;
インストラクター
コメント

コメントを残す