Javascriptで二次元配列の要素をN個ずつ縦に足していきたいです。

Question

[ 
  [NaN, NaN, NaN, NaN],
  [a1, b1, c1, d1],
  [a2, b2, c2, d2],
  [a3, b3, c3, d3],
  [a4, b4, c4, d4],
  ・・・
  ・・・
  [a300, b300, c300, d300],
  [NaN, NaN, NaN, NaN]
];

このような二次元配列の要素を10個ずつ足していき、新しい二次元配列を作りたいのですが、
縦に足していくやり方が分かりません。
言葉でうまく説明できないのですが、結果として得たい形は以下の通りです。

[ 
  [NaN, NaN, NaN, NaN],
  [a1+a2+・・・+a9+a10, b1+b2+・・・+b9+b10, c1+c2+・・・+c9+c10, d1+d2+・・・+d9+d10],
  [a11+a12+・・・+a19+a20, b11+b12+・・・+b19+b20, c11+c12+・・・+c19+c20, d11+d12+・・・+d19+d20],
  [a21+a22+・・・+a29+a30, b21+b22+・・・+b29+b30, c21+c22+・・・+c29+c30, d21+d22+・・・+d29+d30],
  ・・・
  ・・・
  [a291+a292+・・・+a299+a300, b291+b292+・・・+b299+b300, c291+c292+・・・+c299+c300, d291+d292+・・・+d299+d300]
  [NaN, NaN, NaN, NaN]
];

イメージとしては、

という感じで縦に足していき、二次元配列としてまとめたいです。

具体的には私が持っている配列は下のように、最初と最後がNaNの要素になってしまっているため、
中の300行に対して和演算を行いたいです。

[ 
  [NaN, NaN, NaN, NaN],
  [a1, b1, c1, d1],
  [a2, b2, c2, d2],
  [a3, b3, c3, d3],
  [a4, b4, c4, d4],
  ・・・
  ・・・
  [a300, b300, c300, d300],
  [NaN, NaN, NaN, NaN]
];

for文を作ってみようとしたのですが、二次元配列になるとアルゴリズムを頭でイメージする事ができず、
混乱してしまいました。
また昨日似たような質問をして、たくさんの方々にお答えを頂いたので、
それを応用して考えようと努力はしたのですが、勉強不足で分かりませんでした。。。

分かりづらい文章で申し訳ありませんが、
どなたかご教示のほど、よろしくお願いいたします。

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[hachimitu_remon]

ご指摘ありがとうございます。
自分でも今試行錯誤していて、少しでも進められたらこちらに追記しようと思います。

Answer 1

これと同じ？
https://teratail.com/questions/234337

こんな感じ？

const data = [
  [NaN, NaN, NaN, NaN],
  [1, 2, 3, 4],
  [1, 2, 3, 4],
  [1, 2, 3, 4],
  [5, 6, 7, 8],
  [5, 6, 7, 8],
  [5, 6, 7, 8],
  [9, 10, 11, 12],
  [9, 10, 11, 12],
  [9, 10, 11, 12],
];
const split = (array, n) => array.reduce(
    (a, c, i) => i == 0 ? [c]
               : i % n == 1 ? [...a, [...c]]
               : [...a.slice(0, -1), a[a.length - 1].map((v, i) => v + c[i])],
    []);
const result = split(data, 3);
console.log(result)

実行結果

[
  [ NaN, NaN, NaN, NaN ],
  [ 3, 6, 9, 12 ],
  [ 15, 18, 21, 24 ],
  [ 27, 30, 33, 36 ]
]

Comments

[hachimitu_remon]

はい、その質問の内容を二次元配列に応用して配列を作ろうとしたのですが、
縦にどう足していくのかが分からなくて。。

[shiracamus]

コードを書いてみました。
前回同様に、for文に書き直すといいと思います。

[hachimitu_remon]

ありがとうございます。
繰り返し処理は難しく、いつも苦戦しています。
もっと勉強していこうと思います。