JavaScriptでとある配列データを折れ線グラフ用データに加工する
のふのふ🀄JavaScriptでとある配列データを折れ線グラフ用データに加工する
const dataset = [1, 2, 3, 4, 5];
という配列を以下のように折れ線グラフとかで使えるデータに加工したい
[0,1,3,6,10,15]
reduceとかmapとかで実装する方法は何パターンか思いついてるのだが、全部微妙な感じなのでシュっとした実装方法を考え中
シュっとする実装方法を知っている方、コメントお願いします！！
のふのふ🀄reduce使う①
なんかシュっとしない
const result1 = [];
const temp = dataset.reduce((acc, cur, idx, src) => {
result1.push(acc);
return acc + cur;
}, 0);
result1.push(temp);
console.log(result1);
reduce使う②
なんかシュっとしない
const result2 = [];
dataset.reduce((acc, cur, idx, src) => {
result2.push(acc);
if (idx === src.length - 1) {
result2.push(acc + cur);
}
return acc + cur;
}, 0);
console.log(result2);
map使う
なんかシュっとしない
const result3 = dataset.map((data, index, arr) => {
return arr.slice(0, index).reduce((acc, cur) => {
return acc + cur;
}, 0);
});
result3.push(result3[result3.length - 1] + dataset[dataset.length - 1]);
console.log(result3);
forEach使う
意外とシュっとしてる
const result4 = [0];
let temp2 = 0;
dataset.forEach((data) => {
result4.push((temp2 += data));
});
console.log(result4);
spdbearはじめまして。タグ検索からお邪魔します。
let変数を新たに使うのを許容するならば、mapとスプレッド演算子「...」を以下のように使うとシンプルにできそうです！
let temp3 = 0;
const result5 = [0, ...dataset.map((data) => temp3 += data)]
console.log(result5) // -> [0, 1, 3, 6, 10, 15]
ロジック自体は「forEach使う」で記載されたものと同様になります。
mapをそのまま使うと加工後の配列先頭にある0が抜けてしまうので、スプレッド演算子で0を追加しています。
ちなみに、このような配列加工は累積和 (Cumulative sum) と呼ばれているようです。
ググってみたところ、以下のStackOverflowにオシャレな解がありました。（表題の結果に揃えるように、少し改変しています）
const result6 = [0, ...dataset.map((sum => value => sum += value)(0))]
console.log(result6) // -> [0, 1, 3, 6, 10, 15]
関数型言語で用いられる「カリー化」を用いた高度な手法となるようです。
可読性は怪しく感じますが（実は私も自信を持って説明できません🙇）「シュッとする」書き方を突き詰めた方法として興味深かったので、勝手ながら紹介させて頂きました。
参考になれば幸いです！
のふのふ🀄spdbearさん、コメントありがとうございます！！
スプレッド構文の存在を完全に忘れておりました😢
1個目の書き方がシュっとしてて可読性もあって一番いい書き方かなと思いました！！
2個目の書き方はめっちゃシュっとしているけど理解できる人が少ない（自分もよくわからない・・・）かもしれないので知識だけ入れておくのが良さそうですね😃
StackOverflowの記事もめちゃくちゃ参考になりました！！
ありがとうございました！！