JavaScript 文字列操作に関しての質問

Question

以下の文字列を作りたいです。

{a:"a0",b:"b1"}

ただし条件あり。
❶reduceを用いること
❷["a","b"]のデータを用いること

const ary = ["a", "b"];
var result = ary.reduce(function (accu, current, index) {
  return `${accu}${current}:"${current}${index}",`;
}, "");
console.log("{" + result + "}");

不明点
私のソースコードで配列を出力すると、
**{a:"a0",b:"b1",} **
このように表示されてしまいます。何がいけないのでしょうか？

Answer 1

皆様の意見を元にして、以下のコードに仕上がりました。

const ary = ["a", "b"];
var result = ary.reduce(function (accu, current, index) {
accu[current] = current + index;
return accu;
}, {});

Answer 2

原因と対策

{a:"a0",b:"b1",}
このように表示されてしまいます。何がいけないのでしょうか？

下記コードで常にカンマを末尾に付け足しているからです。

return `${accu}${current}:"${current}${index}",`;

そこまでヒントがあれば、このコードを書けたあなたなら自力で解決可能だと思います。

• index値が最後なら、カンマを出力しない
• 配列にpushしてjoinで結合
• 最後に末尾のカンマを取り除く
• カンマを最初に持ってきて、index=0ならカンマを出力しない

いろいろと方法はあるでしょう。

Array.prototype.reduce

Array.prototype.reduce を使うべき場面を探すのが私も難しいと思いました。
reduceの外に処理を持ってきてもいいなら、いくつか方法はありますが、

const array = ["a", "b"];
var result = array.reduce(function (result, current, index) {
  return result[1].push(`${current}:"${current}${index}"`), result;
}, ['{',[],'}']).join('');
console.log(result);

reduce内で完結させるなら、難易度が大幅にUPします。

const array = ["a", "b"];
var result = array.reduce(function (result, current, index) {
  return index ? result.replace(/(?=}$)/, `,${current}:"${current}${index}"`) : `{${current}:"${current}${index}"}`;
}, '');
console.log(result);

reduceを使うために多少強引なつくりになっている間は否めません。
最も、本質問は課題コードで実用性は度外視なのだと思いますが、課題でもある程度の実用性あるコードを書かせて欲しいもので余り良い課題とは思いませんでした。
map,joinを使うことを条件に入れるほうが自然な気がしますね。

可読性

私の書いたコードなんですが、読みにくいでしょうか？

気になったのはコードではなく、条件「reduceを用いること」の方です。
質問文のコードなら、文字列が対象なのでmapは使えず、reduceを使いますが、

1. reduce後に最後のカンマを取り除く
2. indexが最後なら、カンマを出力しない (毎回、indexを検査するのでパフォーマンス低下)
3. array#shift()で最初の要素だけ別途処理してから、reduceする

の対策が必要となりますので、どれを採用するかを踏まえて吟味する必要があります。
個人的には可読性は使ったコードにどれだけ熟知しているか次第だと思うので、言及しません。

ただ、「一つの文字列を結合して増やしていく方法」は「配列からmap->joinする方法」と比較して、パフォーマンスに優れるメリットがあります。
パフォーマンスを優先させるポリシーでコードを書くなら、私は while or for を使いたくなります。

function sample (array) {
  if (!array.length) return '{}';
  const value = array[0];
  let body = '{' + value + ':' + value + '0';

  for (let i = 1, len = array.length; i < len; ++i) {
    const value = array[i];
    body += ',' + value + ':""' + value + '0"';
  }

  return body + '}';
}

const array = ["a", "b"];
console.log(sample(array));

結局、コードの良し悪しは「自分がコードに何を求めるか」次第です。
言い換えるなら、何を目的として「reduceを用いること」を条件に指定したのかです。
そこが読み取れませんでした。
背景もなしに条件が明示されたので、条件に意味はない「課題のコード」のように思いました。

Re: ah6BD2gZo5GnjnT さん

Comments

[think49]

解決済でしたが、既に回答文を書いてしまったので、投稿します。

[ah6BD2gZo5GnjnT]

私の書いたコードなんですが、読みにくいでしょうか？

[think49]

親記事に追記しました

Answer 3

reduceより、mapしてjoinがストレートですが、reduceでやるなら、カンマは前に付けて、

案1：accuが空の場合にカンマを付けない
案2：最後に先頭のカンマを取り除く

くらいですかね。

var result = ary.reduce(function (accu, current, index) {
  return accu=="" ? `${current}:"${current}${index}"`
                  : `${accu},${current}:"${current}${index}"`;
}, "");
console.log("{" + result + "}");

var result = ary.reduce(function (accu, current, index) {
  return `${accu},${current}:"${current}${index}"`;
}, "");
console.log("{" + result.substring(1) + "}");