配列をループして文字列を結合していきたい

Question

お世話になります。

初歩的な質問になりますが、

const fruits = ['いちご', 'りんご', 'バナナ', 'ピーチ'];

という配列をループさせ、最終的に

['/いちご', '/いちご/りんご', '/いちご/りんご/バナナ', '/いちご/りんご/バナナ/ピーチ']

という配列を作るか、もしくは順に

'/いちご'
'/いちご/りんご'
'/いちご/りんご/バナナ'
'/いちご/りんご/バナナ/ピーチ'

のように戻り値を返すためには、どうすればよいのでしょうか。

前回の値を蓄積するため、reduceを使い

  const newArray = fruits.reduce((acc, cur) => {
    console.log(acc);
    return `${acc}/${cur}`;
  }, '');

とすると、コンソールでは

'/いちご'
'/いちご/りんご'
'/いちご/りんご/バナナ'
'/いちご/りんご/バナナ/ピーチ'

と表示されますが、最終的に戻り値は'/いちご/りんご/バナナ/ピーチ'となってしまいます。

以上、よろしくお願いいたします。

Comments

[yuma.inaura]

ぶどうってどこから来たんでしょう

[cryson]

大変失礼いたしました。ミスなので修正いたしました。

Answer 1

mapとsliceを使う手もありますね。

const fruits = ['いちご', 'りんご', 'バナナ', 'ピーチ'];
const newArray = fruits.map((_, i, a) => a.slice(0, i+1).join('/'));
console.log(newArray);

Answer 2

こんなですかね？

fruits = ['いちご', 'りんご', 'バナナ', 'ピーチ'];
tmp = [];

fruits.map(function(value) {  tmp.push(value); return tmp.join("/") }) 

// [ 'いちご', 'いちご/りんご', 'いちご/りんご/バナナ', 'いちご/りんご/バナナ/ピーチ' ]

Comments

[cryson]

まさに欲しかった結果です。
大変迅速なご回答ありがとうございました。助かりました。

Answer 3

BA決定後に恐縮です。二案回答します。

(1) reduceを使う

質問者さんが reduce を使ってやろうとしていたみたいなので、reduce使う案を作ってみました。

fruits.reduce((ary, e) => [...ary, `${(ary.at(-1) || '')}/${e}`], []);

👉 https://codepen.io/su507/pen/RwyxQJg?editors=0012

(2) ジェネレータを使う

このようなジェネレータ関数

function* concatStrings(ary) {
  ary = [...ary]; // 与えられたaryを変更しないためにコピーを作成
  let value = '';  
  while(ary.length) {
    yield (value += `/${ary.shift()}`);
  }
}

を作っておいて、以下で目的の配列を得ます。

[...concatStrings(fruits)]

👉 https://codepen.io/su507/pen/KKRZQxJ?editors=0012

Answer 4

初心者向け

const fruits = ['いちご', 'りんご', 'バナナ', 'ピーチ'];
let x = '';
let a = [];
for (const f of fruits) {
    x += '/' + f;
    a.push(x);
}
console.log(a)