現在もりけん塾にてJavaScriptを学んでいます。その記録。
普段やっている課題とは別に、「言語チャレンジ」という課題に挑戦しています。
言語チャレンジとはinputの値、outputで出したい値を与えられ、その答え通りになるようなコードを書く課題です。
言語チャレンジにおける塾のマインド
- 言語チャレンジはあくまでinputとoutputがあっているかに主眼を置いている
- 「input」「output」の型が合っていれば、答えとしては問題ない
- もっといい方法や改善を全ての人にレビューしていくのは大変であり、先生にとってのベストの解答が塾外の誰かが見た時にそうではない
- 自分なりのベストを調べ尽くしてほしい
- サクサク進めることで言語を学ぶ楽しさを味わってほしい
言語チャレンジ課題8について
問題下記。
input
["a", "b", "c"]
output
[{0: "a"}, {1: "b"}, {2: "c"}]
オブジェクトになってからなお配列に入っている。新しい配列を返すからmap()か?と調べました。
map()とは
MDN Web Docs
map()
メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。
配列データの各要素に対し、何らかの処理をし、新しい配列を結果として返すメソッド。
3つの引数(value(配列の値), index(インデックス), array(呼び出されている配列そのもの))をとることができ、新しい配列の要素を生成する。
mapメソッドについて慣れるためにいくつか練習してみました。(すみません、完全に初心者用です。)
例1 要素を二倍にする
const array = [1, 2, 3]
const result = array.map((value) => {
return value * 2;
})
console.log(result) // [ 2, 4, 6]
例2 それぞれの要素の長さを配列に格納する
const array = ['Japan', 'Korean', 'Pari'];
const result = array.map((value) => {
return value.length;
});
console.log(result);//[5, 6, 4]
例3 文字列を大文字に変換する
const array = ['Japan', 'Korean', 'Pari'];
const result = array.map((value) => {
return value.toUpperCase();
});
console.log(result);//[JAPAN, KOREAN, PARI]
例4 インデックスを取り出す
const array = [1, 2, 3]
const result = array.map((value,i) => {
return i;
});
console.log(result);//[0, 1, 2]
例5 配列をオブジェクトにする(今回の課題これか?と気付く)
const array = [1, 2, 3];
const result = array.map((value, i) => ({[i]: value}));
console.log(result);//[{0: 1}, {1: 2}, {2: 3}]
例6 オブジェクトの配列から配列へ
const array = [{id: 'a'}, {id: 'b'}, {id: 'c'}];
const result = array.map((value) => {
return value.id;
})
console.log(result);//['a', 'b', 'c']
回答
結論、回答は例5を使用し下記とし、approveしてもらえました。
/*
input :
["a", "b", "c"]
output :
[{0: "a"}, {1: "b"}, {2: "c"}]
*/
function f(input){
const objects = input.map((key,i) => ({ [i] : key }))
return objects;
}
const input = ["a", "b", "c"];
const output = f(input);
console.log(output);
何をするメソッドなのかのざっくりした理解はあるものの、具体的な使用方法はすぐ忘れてしまうので、手を動かして慣れるってのは大事だなあと思いました。なんとなくmap()を理解できた。
c.sakyou