すでにある配列から新しい配列を作る

すでにある配列をもとに新しい配列を作る

配列にmapメソッドを使うと、各要素に対して一定の処理を実行した上で、新しい配列を戻り値として取得することができます。

以下の例では、変数animalsに入っている配列の要素を1つずつ取り出して末尾に「2」を追加し、変数animals2に新しい配列を代入します。

JS コード例

let animals = [ 'lion', 'rhinos', 'cat', 'dog', 'dolphin'];
let animals2 = animals.map(function(a){
  return a + "2";
});

console.log(animals);
// (5) ["lion", "rhinos", "cat", "dog", "dolphin"]

console.log(animals2);
// (5) ["lion2", "rhinos2", "cat2", "dog2", "dolphin2"]

mapメソッドは元の配列は編集しません。
そのため、必ず新しい配列を入れる変数を用意する必要があります。

要素の値が数値の場合は、各要素に対して計算を実行した上で新しい配列を作成することができます。
以下の例では、各要素の数字に1.1を掛けて新しい配列を作成します。

JS コード例

let items = [ 1000, 289, 413, 500, 69, 297];
let tax_items = items.map(function(a){
  return Math.floor(a * 1.1);
});

console.log(items);
// (6) [1000, 289, 413, 500, 69, 297]

console.log(tax_items);
// (6) [1100, 317, 454, 550, 75, 326]

変数tax_itemsには計算後の数値を持った配列が入ります。

条件を満たす要素だけで新しい配列を作る

すでにある配列の要素を1つずつ調べて、特定の条件を満たす要素だけを抜き出して新しい配列を作ることも可能です。
この条件設定と抽出にはfilterメソッドを使います。

以下の例では先ほどの1.1を掛けて得た配列から、値が500未満のものだけを抽出して新しい配列を作成します。

JS コード例

let items = [ 1000, 289, 413, 500, 69, 297];

// 1.1を掛けた値を計算
let tax_items = items.map(function(a){
	return Math.floor(a * 1.1);
});
console.log(tax_items);
// (6) [1100, 317, 454, 550, 75, 326]


// 500以下の要素を削除
let tax_items2 = tax_items.filter(function(value){
	if( value < 500) {
		return true;
	} else {
		return false;
	}
});
console.log(tax_items2);
// (4) [317, 454, 75, 326]

filterメソッドに指定している処理では「return true;」の要素を残して、「return false;」になった要素は取り除きます。
今回はif文の条件式で「value < 500」で判定し、値が500未満の要素だけ残るようにしています。

filterメソッドでは配列から要素を1つずつ取り出してループ処理を行うため、イメージとしてはforEachメソッドに近いです。
要素の値も引数として受け取ることができ、今回は変数valueに受け取って上記の値の判定を行っています。

また、filterメソッドもmapメソッドと同様に元の配列は編集しません。
そのため、上記のtax_items2のように変数を用意し、新しく作成した配列を受け取る必要があります。

もう1つfilterメソッドの使用例として、オブジェクトの値を持つ配列を使ったケースについて解説します。
この例ではregist_datetimeプロパティに日時の情報を持っており、この値が「2020年8月2日以降」のデータのみ取り出して新しい配列を作成し、変数new_usersに入れていきます。

JS コード例

let users = [
	{
		name: "Mike",
		id: 150001,
		regist_datetime: "2020/08/01 23:59:58"
	},
	{
		name: "John",
		id: 150002,
		regist_datetime: "2020/08/01 23:59:59"
	},
	{
		name: "Taro",
		id: 150003,
		regist_datetime: "2020/08/02 00:00:00"
	},
	{
		name: "Camila",
		id: 150004,
		regist_datetime: "2020/08/02 00:00:01"
	},
	{
		name: "Emilia",
		id: 150005,
		regist_datetime: "2020/08/02 00:00:02"
	}
];

let new_users = users.filter(function(data){

	let regist_timestamp = new Date(data.regist_datetime);
	let filter_timestamp = new Date("2020/08/02 00:00:00");

	if( filter_timestamp.getTime() <= regist_timestamp.getTime() ) {
		return true;
	} else {
		return false;
	}
});

console.log(new_users);
// 0: {name: "Taro", id: 150003, regist_datetime: "2020/08/02 00:00:00"}
// 1: {name: "Camila", id: 150004, regist_datetime: "2020/08/02 00:00:01"}
// 2: {name: "Emilia", id: 150005, regist_datetime: "2020/08/02 00:00:02"}

filterメソッドに指定した要素の抽出処理について解説します。

配列の要素に入っているオブジェクトは引数dataに入れて渡します。
まず、抽出処理の中ではこのオブジェクトのregist_datetimeプロパティでDateオブジェクトを1つ作成します。
このオブジェクトはプロパティの日時にセットされます。

続いてもう1つ、「2020年8月2日」のDateオブジェクトを作成して変数filter_timestampに用意します。
こちらは比較用の日時として使用します。

別々の日時に設定された2つのDateオブジェクトは、if文の条件式でタイムスタンプを取得するgetTimeメソッドを呼び出します。
タイムスタンプは数値（Number）として取得できるため、この2つの値を比較することで「2020年8月2日以降か」を判断することができます。

もしregist_datetimeプロパティの日時が2020年8月2日以降であれば、タイムスタンプはfilter_timestamp.getTime()よりも大きい値になるため、戻り値をtrueにして配列に残します。
反対に2020年8月2日より前の日時であれば小さい値になるので、戻り値はelse文のfalseになり、配列からは取り除きます。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。