配列内のオブジェクトの値である配列の、値のみを取り出した配列を作成したい

Question

以下のような配列があり、

const array1 = [
 {"members": [{name: "名前1", age: 12}, {name: "名前2", age: 22}]},
 {"members": [{name: "名前3", age: 32}]},
 {"members": [{name: "名前4", age: 42}, {name: "名前5", age: 52}, {name: "名前6", age: 62}]}
]

以下のような配列に加工する関数を作りたいです。

[
  {name: "名前1", age: 12}, 
  {name: "名前2", age: 22}, 
  {name: "名前3", age: 32},
  {name: "名前4", age: 42}, 
  {name: "名前5", age: 52}, 
  {name: "名前6", age: 62}
]

次のように書いたところ、

function(){
  array1.map(function(val){
    return val.members
  })
}

得られたのは次の配列でした。なんとか、二重になっている配列をフラットにしたいのですが、どうすればよいでしょうか？

 [
  [{name: "名前1", age: 12}, {name: "名前2", age: 22}],  
  [{name: "名前3", age: 32}], 
  [{name: "名前4", age: 42}, {name: "名前5", age: 52}, {name: "名前6", age: 62}]
]

Comments

[miyabi-sun]

過去の質問を何故閉じないのですか？
そのまんまな回答とかもあるのに

[lg_rino]

前回の多次元配列の質問については、いただいた回答が難しく、少しずつ読んでいるのですが、未だにきちんと理解できないままで…理解できてからお返事及びcloseしようと思っており現状に至ります。申し訳ありません。
そのまんまな回答がある、と教えていただいたものの、読み返しても同じ問題が出ていることがわかりません。お恥ずかしい限りです…。

Answer 1

flatMapを使えばフラットな配列が得られます。

array1.flatMap(function(val){
    return val.members
});

Comments

[lg_rino]

ありがとうございます。知りませんでした。
IEとEdge未対応とのことですが、これらのブラウザに対応する方法はないでしょうか…？

Answer 2

const array1 = [
 {"members": [{name: "名前1", age: 12}, {name: "名前2", age: 22}]},
 {"members": [{name: "名前3", age: 32}]},
 {"members": [{name: "名前4", age: 42}, {name: "名前5", age: 52}, {name: "名前6", age: 62}]}
]

const array2 = array1.map(x=>x.members).reduce((acc, x) => acc.concat(x), []);

console.log(array2);

[ { name: '名前1', age: 12 },
  { name: '名前2', age: 22 },
  { name: '名前3', age: 32 },
  { name: '名前4', age: 42 },
  { name: '名前5', age: 52 },
  { name: '名前6', age: 62 } ]

Answer 3

IE / Edge で flatMap を使いたい場合。

Array​.prototype​.flatMap() Polyfill
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap#Polyfill

This polyfill needs Array.prototype.flat polyfill

Array.prototype.flat polyfill が必要だというので先にそちらも読み込んでおく

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat#Polyfill

Answer 4

const a = [
 {"members": [{name: "名前1", age: 12}, {name: "名前2", age: 22}]},
 {"members": [{name: "名前3", age: 32}]},
 {"members": [{name: "名前4", age: 42}, {name: "名前5", age: 52}, {name: "名前6", age: 62}]}
];

const b=[].concat.call([],...a.map(x=>x.members));
console.log(b);

Comments

[yambejp]

IE対応したいならozwkさんの提示しているreduceのコールバックを
古い書き方にもどせば動きますね

Answer 5

IE系では未実装ですが、Array​.prototype​.flat()というものがあります。

Comments

[lg_rino]

ありがとうございます。IE系が使えると助かります。書いておらずにすみません。

[alphase]

なるほど！でしたら、上記リファレンス内にも記載がありますが、以下コードのように書き換えられます。
===
var arr1 = [1, 2, [3, 4]];

arr1.flat();
// この処理は下記のコードと同等です
arr1.reduce((acc, val) => acc.concat(val), []);
// [1, 2, 3, 4]
===