[TypeScript] for文とpushで実装している配列の入れ替え、加工作業を短縮したい

Question

前提・実現したいこと

初心者です。どなたかご教授お願いいたします。

TypeScript(Angular)で配列に格納されているJSONを加工したものを新たな配列に入れ直したいのですが、その際にfor文を用いずに実装させたいです。

発生している問題・エラーメッセージ

アロー関数やforEachを用いて実装できるのでは、と思っているのですが具体的な実装方法が思いついていない状態です。

該当のソースコード

let arrayBefore = []; //JSON
/*
arrayBefore には以下のJSONが格納されています
body: JSON.stringify({
          dataSizw: 5,
          data: [
            {
              userId: '001',
              userName: '一郎',
              language: 'ja',
              Date: '2021-08-16T12:29:59',
            },
            {
              userId: '002',
              userName: '二郎',
              language: 'en',
              Date: '2021-08-17T12:29:58',
            },
            {
              userId: '003',
              userName: '三郎',
              language: 'ja',
              Date: '2021-08-18T12:29:57',
            },
            {
              userId: '004',
              userName: '四郎',
              language: 'fr',
              Date: '2021-08-19T12:29:56',
            },
            {
              userId: '005',
              userName: '五郎',
              language: 'ja',
              Date: '2021-08-16T12:29:59',
            },
*/
let arrayAfter = []; //Beforeの中身を加工したものをここに入れたい

//ここからのfor文をアロー関数やforEachなどで置き換えたい
for (let i in arrayBefore.data) {
      const actionDay: Date = new Date(arrayBefore.data[i].Date);

      arrayAfter.push({
        actionDay: //Dateを分割する
          actionDay.getFullYear() +
          '/' +
          actionDay.getMonth() + 1 +
          '/' +
          actionDay.getDate(),
        actionTime: //Dateを分割する
          actionDay.getHours() +
          ':' +
          actionDay.getMinutes(),
        userName: arrayBefore.data[i].userName,
        language: arrayBefore.data[i].language,
      });
    }

console.log(arrayAfter);
/*
arrayAfetrには以下のように要素の固まりが5個pushされています。
[
{
actionDay: '2021/8/16',
actionTime: '12:29'
userName: '一郎',
language: 'ja',
},
{
要素2つ目（中身省略）
},
{
要素3つ目（中身省略）
},
{
要素4つ目（中身省略）
},
{
要素5つ目（中身省略）
}
]
*/

試したこと

Stack Overflowを覗いてみると似たような質問はあるのですが、配列の一部（今回でいうactionDay, actionTime）のみに特定の操作をするときにどうすればいいのかが解決しませんでした。
https://stackoverflow.com/questions/63489109/from-arrow-function-push-object-to-array

すみませんがどなたかご教授お願いいたします。

Comments

[maisumakun]

> その際にfor文を用いずに実装させたいです。

どのような背景があって、そのような実装をしたいのでしょうか？

[kei0005]

記述量の省略と構文の理解を目的としたものです。

[kei0005]

正確には、記述量を省略できるのではないか？という予想からです

Answer 1

「配列の中身を変換して別な配列を作る」という用事なら、それ専用のmapメソッドがあります（MDN）。

Comments

[kei0005]

以下で実装できました。
ありがとうございました
https://www.digitalocean.com/community/tutorials/4-uses-of-javascripts-arraymap-you-should-know-ja
https://paiza.io/projects/2e8K2Wfmnkt4K_9r7eXIHw?language=javascript

const dataAfter = data.map(item => {
const container = {};
const actionDay = new Date(item.Date);

container.ActionDay = actionDay.getFullYear() +
'/' +
(actionDay.getMonth() + 1) +
'/' +
actionDay.getDate();

container.ActionTime = actionDay.getHours() +
':' +
actionDay.getMinutes();

container.userName = item.userName;

container.language = item.language;

return container;
})

console.log(dataAfter);

----------------------------------
[
{
ActionDay: '2021/8/16',
ActionTime: '12:29',
userName: '一郎',
language: 'ja'
},
{
ActionDay: '2021/8/17',
ActionTime: '12:29',
userName: '二郎',
language: 'en'
},
{
ActionDay: '2021/8/18',
ActionTime: '12:29',
userName: '三郎',
language: 'ja'
},
{
ActionDay: '2021/8/19',
ActionTime: '12:29',
userName: '四郎',
language: 'fr'
},
{
ActionDay: '2021/8/16',
ActionTime: '12:29',
userName: '五郎',
language: 'ja'
}
]