【JavaScript】flatMapで配列の配列を平坦化して各要素に親配列のインデックスを付けちゃう

経緯

• ページングしろ！一覧なんだから当たり前だろ！
• でもページ数は教えないし、1 ページあたりの件数も合計件数も教えないぞ！

解決策

• ページの目次を 0 から順にインクリメントする
• 要素数が 0 件の配列を引くまで繰り返す
• ↑ を非同期で実行し、取得結果をローカルに保持
• 取得結果は以下のような配列の配列となる様にする
• flatMap を使って平坦化していろいろする

取得結果

[
  [
    { value: '0 番目の要素です。' },
    { value: '1 番目の要素です。' }
  ],
  [
    { value: '0 番目の要素です。' },
    { value: '1 番目の要素です。' }
  ]
]

flatMapで配列の配列を平坦化するやつ

pages.flatMap((page, index) => {
  return page.map(list => {
    return ({ pageNo: `${index} ページ`, ...list });
  });
});

// こう書いてもいい
pages.flatMap((page, index) => page.map(list => ({ pageNo: `${index} ページ`, ...list })));

実行してみる

データを用意

const pages = [];
for (let i = 0; i < 2; i++) {
  const page = [];
  for (let j = 0; j < 2; j++) {
    page.push({ value: `${j} 番目の要素です。` });
  }
  pages.push(page);
}

実行結果

console.log(pages.flatMap((page, index) => {
  return page.map(list => {
    return ({ pageNo: `${index} ページ`, ...list });
  });
}));

[
  { pageNo: "0 ページ", value: '0 番目の要素です。' },
  { pageNo: "0 ページ", value: '1 番目の要素です。' },
  { pageNo: "1 ページ", value: '0 番目の要素です。' },
  { pageNo: "1 ページ", value: '1 番目の要素です。' }
]

Array.prototype.flatMap() - JavaScript | MDN