プログラミングBlog

アプリ開発サークル勉強会② 開催日時 2021年1月9日(土) 7:00-9:00

JavaScript問題集

今日もこちらの問題集をすすめていきました。Q9-11
https://gist.github.com/kenmori/1961ce0140dc3307a0e641c8dde6701d

Q9.配列の中身を結合して表示する問題 について

Join

a,b,cの要素持った配列があります。

const array = ['a', 'b', 'c'];

arrayに対してjoin ※引数に関して後で検証

array.join("");
結果
abc

joinの引数に関しての検証を行いました。

array.join();
array.join("");
array.join(" ");
結果
a,b,c
abc
a b c

引数なしの場合はカンマ区切りで表示。 空の文字列を入れるとすべての要素が結合されます。 文字列を入れるとそれらの文字列で区切られます。

split

こちらはJoinの逆で文字列を配列にします。

var str = "abc";
str.split();
str.split("");
結果
[ 'abc' ]
[ 'a', 'b', 'c' ]

引数なしの場合は文字列を配列に入れます。
引数ありの場合は文字列を引数区切りで分割して配列に入れていきます。

var str = "a b c";
split.(a b c);
結果
[ 'a', 'b', 'c' ]

スペース区切りで配列になりました。

Q11.配列の中身を結合して表示する問題 について

sort

let arry = [{ id: 1, name: 'morita' }, { id: 2, name: 'kenji' }, { id: 4, name: 'uro' }, { id: 3, name: 'ken' }];

sort()を使いますが、function(a,b)で要素の一つ目と二つ目を比較することができます。

 var sortByArry = arry.sort(function (a, b) {
     return a.id - b.id;
 });

降順の場合はb.id-a.idのように順番を入れ替えるだけで実装可能。

var sortByArry = arry.sort(function (a, b) {
    if (a.id < b.id) {
        return -1;
    }
    if (a.id > b.id) {
        return 1;
    }
    return 0;
});

aとbを比較して0未満か0以上かで返却した結果、要素を並べ替えることができます。
0の場合は変更なし。
ただしブラウザによっては動かないため返却値が0未満か0以上かで要素を並び替えていきます。

結果
[
  { id: 1, name: 'morita' },
  { id: 2, name: 'kenji' },
  { id: 3, name: 'ken' },
  { id: 4, name: 'uro' }
]

JavaScript初学者向け問題集

今回は初めての人もおられたのでオリジナルの問題を作って解いてもらいました。
意外と楽しんでもらえたので満足。
問題を作ったりしていると、プログラミングの理解にもつながるので良いですね! github.com