Javascriptで配列の要素をN個ずつ足して新しい配列を作りたいです。

Question

["sample1", "0.004", "0.003", "-0.0", "-0.004", "0.001", "-0.0", "-0.002", "0.002", "0.002", "0.002", "-0.003", "0.008", "0.011000000000000001",・・・・]
このような配列の値を、最初から順番に10個ずつ足して、結果の値を新しい配列に格納したいです。
一番最初の値はラベルなので、実際は二つ目の0.004から順に１０個ずつ足したいです。

結果として求めているものは、
["sample1", "２個目から１１個目までの和", "１２個目から〜２１個目までの和", "２２個目から〜３１個目までの和",・・・・]
という感じです。

データを10個ずつに分割して各要素の和を新しい配列に格納しようと試みたのですが、演算の際に最初の要素である"sample1"という文字列の扱いでつまずいてしまい、上手く作れませんでした。

const split = (array, n) => array.reduce((a, c, i) => i % n == 0 ? [...a, [c]] : [...a.slice(0, -1), [...a[a.length - 1], c]], []);
    var result = split(data, 10);

どなたかご教示のほど、よろしくお願いいたします。

Comments

[yambejp]

与えられる値が文字列なのでしょうか？

Answer 1

こんにちは

この回答では、１０個ずつ区切るために、lodash の _.chunk を使います。

前提として、ご質問にある

["sample1", "0.004", "0.003", "-0.0", "-0.004", "0.001", "-0.0", "-0.002", "0.002", "0.002", "0.002", "-0.003", "0.008", "0.011000000000000001",・・・・]

という形の配列は、 data という変数で与えられるものとします。

まずはじめに、数値を要素とする配列arrを与えると、要素の合計を返す関数 totalize(arr) を作っておきます。これは以下のようになります。

const totalize = arr => (arr.reduce((sum, e) => sum + e));

次に、 data の２番目以降の要素である文字列を数値に変換した配列 values を、以下によって作ります。

const values = data.slice(1).map(e => +e);

lodash の _.chunk を使って、上記で得られた values の要素を１０個ずつ区切った部分配列を要素とする配列を作り、その配列から、要素である各配列の合計値を要素とする配列totalsを作ります。これは以下のようにすると得られます。

const totals = _.chunk(values, 10).map(totalize);

最後に、以下によって目的の配列 result が得られます。

const result = [ data[0], ...totals ];

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/wvBmbMp?editors=0012

以上、参考になれば幸いです。

Comments

[oikashinoa]

いつもlodashの使い方 参考にさせてもらってます。
lodash の_.chunkを使って の記載のところ、ハイフンになっているように見えます。

[jun68ykt]

@oikashinoaさん
> いつもlodashの使い方 参考にさせてもらってます。
との件と誤字の指摘、ありがとうございます。修正しました。

[hachimitu_remon]

お忙しい中ご回答ありがとうございます。
とても分かりやすく、勉強になりました。
参考にさせていただきます。

[jun68ykt]

@hachimitu_remonsさん
どういたしまして。参考になれば幸いです。

Answer 2

最初のラベルを削った配列を新たに作って、
後は10個毎に処理して最後にラベルを先頭につければシンプルです。

10個単位の処理は以下が参考になりますよ。
https://teratail.com/questions/230247

Comments

[hachimitu_remon]

お忙しい中ご回答ありがとうございます。
そのように考えれば良かったのですね。
参考にさせていただきます。

Answer 3

for文で愚直に繰り返した方がわかりやすい気がします。

const arr = [
  "sample1",
  "0.01",  "0.02",  "0.03",  "0.04",  "0.05",  "0.06",  "0.07",  "0.08",  "0.09",  "0.1",
  "0.11",  "0.12",  "0.13",  "0.14",  "0.15",  "0.16",  "0.17",  "0.18",  "0.19",  "0.2",  
  "0.21",  "0.22",  "0.23",  "0.24",  "0.25",  "0.26",  "0.27",  "0.28",  "0.29",  "0.3",
  "0.31",  "0.32",  "0.33",  "0.34",  "0.35",  "0.36",  "0.37",  "0.38",  "0.39",  "0.4",
  "0.41",  "0.42",  "0.43",  "0.44",  "0.45",  "0.46",  "0.47",  "0.48",  "0.49",  "0.5",
  "0.51",  "0.52"
];
const makeArray = (arr, spliter) => {
  const returnArr = [arr[0]];
  for (let i = 1, tmp = 0; i < arr.length; i++) {
    if (i % spliter == 0) {
      returnArr.push(tmp + (arr[i] - 0));
      tmp = 0;
    } else {
      tmp += arr[i] - 0;
      if (i == arr.length - 1) returnArr.push(tmp);//余りの処理
    }
  }
  return returnArr;
};

console.log(makeArray(arr, 10));

Comments

[hachimitu_remon]

早急なご回答ありがとうございました。
ご回答者様のコードを参考に実行した結果、うまく配列を作る事が出来ました。
本当にありがとうございました。

Answer 4

回答ではないです

小数点以下の桁数が揃っていないので、有意な計算ができないと思われます。
仕様を練り直してみては？

Comments

[hachimitu_remon]

ご指摘ありがとうございます。
今後の課題として受け止めさせて頂きます。

Answer 5

こんな感じでどうでしょう

• CodePen:offset位置、range幅調整可能

Comments

[yambejp]

<div id="view"></div>
<script>
const a=[
"sample1",
"0.01","0.02","0.03","0.04","0.05","0.06","0.07","0.08","0.09","0.1",
"0.11","0.12","0.13","0.14","0.15","0.16","0.17","0.18","0.19","0.2",
"0.21","0.22","0.23","0.24","0.25","0.26","0.27","0.28","0.29","0.3",
"0.31","0.32","0.33","0.34","0.35","0.36","0.37","0.38","0.39","0.4",
"0.41","0.42","0.43","0.44","0.45","0.46","0.47","0.48","0.49","0.5",
"0.51","0.52"
];
const offset=1;
const range=10;
const b=Array(parseInt((a.length-1-offset)/range)+offset+1)
.fill(null)
.map((x,y)=>y<offset?a[y]:a.filter((i,j)=>j>=(y-offset)*range+offset&&j<(y-offset+1)*range+offset).reduce((x,y)=>x+parseFloat(y),0));
document.querySelector('#view').textContent=b.join(',');
</script>

[yambejp]

残念ながら小数点の計算だと誤差が結構出ます

[hachimitu_remon]

コメントへの返事が遅くなってしまい申し訳ございませんでした。。
ご回答者様が提示してくださったコードで勉強させていただいております。
いろいろ調べながら、しっかり理解する事ができたら、実行してみようと思います。
お忙しい中ご回答ありがとうございました。

[yambejp]

codepenの方のサンプルでoffset位置やrangeを手動で切り替えて
試してくださいねー

Answer 6

const data = [
  "sample1",
  "0.01",  "0.02",  "0.03",  "0.04",  "0.05",  "0.06",  "0.07",  "0.08",  "0.09",  "0.1",
  "0.11",  "0.12",  "0.13",  "0.14",  "0.15",  "0.16",  "0.17",  "0.18",  "0.19",  "0.2",
  "0.21",  "0.22",  "0.23",  "0.24",  "0.25",  "0.26",  "0.27",  "0.28",  "0.29",  "0.3",
  "0.31",  "0.32",  "0.33",  "0.34",  "0.35",  "0.36",  "0.37",  "0.38",  "0.39",  "0.4",
  "0.41",  "0.42",  "0.43",  "0.44",  "0.45",  "0.46",  "0.47",  "0.48",  "0.49",  "0.5",
  "0.51",  "0.52"
];
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] + +c)], []);
const result = split(data, 10);
console.log(result)

実行結果

[
  'sample1', '0.55',
  '1.55',    '2.55',
  '3.55',    '4.55',
  '1.03'
]

Comments

[hachimitu_remon]

お忙しい中ご回答ありがとうございます。
参考にさせていただきます。

Answer 7

これでどうでしょう。

let data = ["sample1", "0.004", "0.003", "-0.0", "-0.004", "0.001", "-0.0", "-0.002", "0.002", "0.002", "0.002", "-0.003", "0.008", "0.011000000000000001", "0.004", "0.003", "-0.0", "-0.004", "0.001", "-0.0", "-0.002"];
let func = (array) => {
  let cnt = 1, max = array.length, result = [];
  while(cnt < max) {
    let split = array.slice(cnt, cnt+10);
    result.push(split.reduce((a,c) => a+(+c), 0));
    cnt = cnt + 10;
  }
  return result;
}
var result = split(data);

Comments

[hachimitu_remon]

お忙しい中ご回答ありがとうございます。
参考にさせていただきます。