【もりけん塾】言語チャレンジ5 -配列をオブジェクトに変換する-【JavaScript】

JavaScript

今日は、もりけん塾の新しい課題”言語チャレンジ5”に挑戦したので、学習ノートを書いていきます!

こんにちは。Webコーダーのはるです。

もりけん塾の新課題、言語チャレンジに挑戦しました。

この課題における、もりけん先生(@terrace_tec)のスタンスを補足します⏬

✅ inputとoutputの型が合っていれば、答えに問題はない
✅ 
もっといい方法や書き方、改善まで全ての人にレビューするのは大変
✅ 先生のベストの解答が塾外の誰かが見た時にそうではない
✅ 
自分なりのベストを調べ尽くしてほしい
✅ サクサク進めることで言語を学ぶ楽しさを味わってほしい

【もりけん塾】言語チャレンジ5 -配列をオブジェクトに変換する-

今回、取り組んだ課題はこちらです。

【課題5】
input: [“a”, “b”, “c”]
output: {0: “a”, 1: “b”, 2: “c”}

inputの値をoutputの値として出力すること

・関数の引数に入力を渡し、実行した結果(出力)をconsole.logで示してください

(もりけん先生の言語チャレンジより)

配列をオブジェクトに変換する

与えられた配列[“a”, “b”, “c”]をオブジェクト{0: “a”, 1: “b”, 2: “c”}に変換するために、スプレッド構文を使用しました。

スプレッド構文 (...) を使うと、配列式や文字列などの反復可能オブジェクトを、0 個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、オブジェクト式を、0 個以上のキーと値の組 (オブジェクトリテラルの場合) を期待された場所で展開したりすることができます。

構文

オブジェクトリテラルの場合
let objClone = { ...obj }; // オブジェクトのすべてのキーと値の組を渡す

 

スプレッド構文は、課題1にチャレンジした後にもなかさん(@ruby443n@ruby443n)の実装を拝見させていただき知りました。

その時に勉強したことをまとめています。

(自分でスプレッド構文を使うべき時が来ました・・・!笑)

 

引数に渡された配列の中身を、オブジェクトの中で展開する関数を考えました。

function convertToObject(input) {
  return {...input};
}

PRコード

//input: ["a", "b", "c"]
//output: {0: "a", 1: "b", 2: "c"}


function convertToObject(input) {
 return {...input};
}

const input = ["a", "b", "c"];
const output = convertToObject(input);
console.log(output);

今回はこれでApproveいただきました。

IE対応

2022.03現在、スプレッド構文はIE対応していなかったので、他の方法も考えてみることにしました。

塾ではIEを考慮していませんが、Web制作ではまだIEを考慮えざるを得ない場合があるからです。

今回の配列をオブジェクトに変換する方法を調べた時に、3種類の方法を見つけました。

  • スプレッド構文
  • assign()メソッド
  • reduce()メソッド

スプレッド構文とassign()メソッドはIE対応していなかったので、reduce()メソッドを使って考えてみます。

reduce() とは…

reduce() メソッドは、配列のそれぞれの要素に対して、順番通りに、ユーザーが提供した「縮小」コールバック関数を呼び出します。その際、直前の要素における計算結果の返値を渡します。配列のすべての要素に対して縮小関数を実行した結果が単一の値が最終結果になります。

縮小関数は配列を要素ごとに走査し、それぞれの段階で、前の段階の結果に現在の配列の値を加えていきます (この結果は、それ以前のすべての段階を合算したものです)。

配列内の各要素に指定した関数を適用できるのですね・・!

以下、考えたコードです。

const convertToObject = (input) => {
  input.reduce((target, key, index) => {
    target[index] = key;
    return target;
  }, {});
}

const input = ["a", "b", "c"];
const output = convertToObject(input);
console.log(output);
冗長・・・?
一応、動作はしたけど、reduce()まだまだ難しい・・・。
でもreduce()はフルブラウザサポートだと知ることができた。
また触ってみます!

//

学習に使用している本は、もりけん先生推奨の”JavaScript本格入門”です。

あとがき

お忙しい時間を割いて課題を確認してくださったもりけん先生(@terrace_tec)ありがとうございました!!

コードを試し書きできるツール”stackbiltz”を新たに使用しているので、貼ってみます↓

今日は以上です。

//

【もりけん塾で勉強しています】

もりけん先生(@terrace_tec)のHPはこちら