array.map()で配列を再構築する方法

Question

以下のような複数のオブジェクトを含む配列について、それぞれのオブジェジェクトの特定の条件を満たすものだけを抽出して、配列を再構築したいと考えております。

var ary =[
{"name":"abe","age":20},
{"name":"suzuki","age":10},
{"name":"tanaka","age":20},
]

例えばage20だけを抽出して再構築したくて、forEachであれば

re_ary = [];
ary.forEach(function(obj){
obj.age ===20 ? re_ary.push(obj);
})

といった具体の方法が想像できるのですが、破壊的メソッドであるArray.map()を使って、同じように条件を抽出して配列を再構築することはできるのでしょうか？

※末尾がなぜか表示上で文字化けするので、修正してみました。
本現象は運営に報告しています。

Answer 1

特定の条件に合う要素だけを抽出して新しい配列を生成するので張ればArray.filter()が適当だと思います。
Array.prototype.filter() - JavaScript | MDN

なお、Array.map()は新しい配列を生成するので破壊的ではありません。
Array.prototype.map() - JavaScript | MDN

Comments

[SugiuraY]

ありがとうございます。ご指摘通りでした。
因みにfilter()の使い方が初めて分かりました。抽出自体はできるのですが、抽出かつプロパティを与えたい場合、filter()では実装不可能でforEachを素直に使うべきでしょうか。例えば
re_ary = ary.filter(value=>
return value['age']===20
//value.age > 30 ? value.categ = "年配":0;
)
のように該当するオブジェクトに新たにプロパティを追加したいということを意図しております。

[SugiuraY]

リファレンスを見る限り、文字通り条件に合う要素を抽出するだけのメソッドにも見えるのですが、もしこれも含めて使うべきがforEachであればその旨ご指摘いただければ幸いです。

[maisumakun]

> 抽出かつプロパティを与えたい場合、filter()では実装不可能でforEachを素直に使うべきでしょうか。

filter().map()とすればいいのではないでしょうか？

[surface_0]

filter() は要素の変更には向きません。
抽出かつプロパティを追加するのならば、`filter().map()`とするのが良いと思います。

ちなみに直接連続して繋げなくても、このように↓一旦変数に入れて見た目を整えても問題ありません。
```
const tmp_ary = ary.filter(value => value.age === 20);
const re_ary = tmp_ary.map(value => {
value.categ = value.age > 30 ? "年配" : "0";
return value;
});
```

[SugiuraY]

お二方とも、コメントありがとうございます。
プロパティの追加ではないのですが、同じように要素を変化させようとして
var res = ary.filter(obj=> obj.age===20).map(obj => {return obj.age = String(obj.age)})
とすると ['20', '20']というよくわからない結果を返してくるのですが、期待している結果は

[
{"name":"abe","age":"20"},
{"name":"suzuki","age":"10"},
{"name":"tanaka","age":"20"},
]
なのですが、map()の使い方を誤っているのでしょうか？
※プロパティの追加も同じ要領であると想像しております。

[maisumakun]

> map()の使い方を誤っているのでしょうか？

はい、returnの値（String(obj.age)）を入れた配列を作ります。

[SugiuraY]

すみません、正直に申し上げてわからないです・・・
var res = ary.filter(obj=> obj.age===20).map(obj => //obj.push()
のようなことでしょうか？

[maisumakun]

> ※プロパティの追加も同じ要領であると想像しております。

mapの返り値は追加ではなくて、要素にしたいものを返してください。

[maisumakun]

こちらのようなドキュメントは確認しましたか？

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map

[SugiuraY]

はい、その考えに基づき
var res = ary.filter(obj=> obj.age===20).map(obj => {return String(obj.age)})
console.log(res);
で要素にしたいもの（String(obj.age)）をreturnさせたのですが、、、うまくいかないという状況です。

[maisumakun]

> 要素にしたいもの（String(obj.age)）をreturnさせたのですが

それだと、書いての通り文字列「だけ」を要素とした配列が得られます。ほしいオブジェクトをreturnさせてください。

[SugiuraY]

ドキュメンとの該当箇所を見つけることができました。見落とし、大変失礼しました。

res = [];
var res = ary.filter(obj=> obj.age===20).map(obj => {
reObj = {}
reObj.name = obj.name;
reObj.age = String(obj.age);
return reObj;
})
で実装することができました。
一方で、オブジェクトを含む配列でこれをやるとキーが多くなるほど、上記のようにreturnすべき配列でそのまま残したいものを改めて格納する（ reObj.name = obj.name;のような操作）は無駄が多いので、この操作に関してはあまりmap()が向いていないような気がしてきました。素人の発想であれば申し訳ございません。

[maisumakun]

> キーが多くなるほど、上記のようにreturnすべき配列でそのまま残したいものを改めて格納する（ reObj.name = obj.name;のような操作）は無駄が多い

Object spread（{...obj}）やObject.assignで対応できます。

[SugiuraY]

ありがとうございます。とても不格好ではあるのですが、理屈がわかったので、以下のようにString()も.categoryプロパティの追加もしつつ、代わらない要素はもとのまま埋めることができました。

res = [];
var res = ary.filter(obj=> obj.age===20).map(obj => {
addObj = {};
reObj = {};
obj.age > 30 ? addObj.category = "年配": addObj.category = "若輩者";
reObj = Object.assign(obj,addObj)
chgObj = {}
chgObj.age = String(obj.age);
reObj = Object.assign(reObj,chgObj)
return reObj;
})

本当に初心者故、こんなこともできるんだと少しだけ感動してしまいました。ドキュメントは申し少し見落とさないように根気よく眺める癖をつけようと思います。

Answer 2

まずmapは破壊的メソッドではありません。
つまり ary.mapはaryを変化させません。（コールバック関数内で明示的に変化させればそれは別ですが）
mapは、与えられた関数を配列のすべての要素に対して呼び出し、その結果から新しい配列を生成するものです。
生成される新しい配列の要素の数は元の配列と同じになります。
要素の抽出には使えないのではないでしょうか。

Comments

[SugiuraY]

ご指摘ありがとうございます。完全に誤認しておりました。