配列の要素数を数えて連想配列にするやりかた

テキストボックスに入力された値を、種類ごとにわけて連想配列にしたいというもの。

大まかな流れとしては

1. 入力値を配列にする
2. 空の連想配列を用意
3. forループで仕分けして行く

という3ステップ。

自分はまだes6と呼ばれる次世代バージョンのJavaScriptは学んでいないのでまだforループです。

ネットに情報は溢れているものの、結構このes6をつかったものが多かったです。

入力値 

taro
taro
hiroko
taro
hiroko
akira
taro

得たかった結果

{
taro : 4 ,
hiroko : 2 ,
akira : 1 , 
}

みたいなかんじ。

 

JavaScriptコード

function nameCounter(){
    var loadedList = document.getElementById('list').value;
    var nameArray = loadedList.split('\n');
    var dic_count = {};
    for(var i=0 ; i < nameArray.length; i++){
        if(dic_count[nameArray[i]] === undefined){
            dic_count[nameArray[i]] = 1;
        }else{
        dic_count[nameArray[i]] +=1;
        }
        }
        return dic_count;
    }

振り返り

入力値を改行でsplitして、配列にするところまでのアイディアはあったものの、
そこから先、

連想配列をどうやってつくるんだー！というのが一番の謎でした。

自分がやりたかったことは、
配列の各要素を数えて連想配列にしたい、

ということ。

連想配列というのはkeyとvalueの組み合わせのストック。
つまり、key名はわかっていて、その個数をvalueとしたかったわけなのです。

連想配列は以下のような形をしている。

{
key1名：value1名,
key2名：value2名,
key3名：value3名,
key4名：value4名,
key5名：value5名,
}

今回入力値はkey名にあたり、重複する個数がvalue名にあたる。
つまり、forループをつかって、配列を頭から（もしくはお尻から）みていけば、
key名はarray[i]で表すことができる。

そしてさらに、

連想配列名[key名]

でvalue名も表すことができる！
今回自分の中ではこの表現が突破口となりました。

コードに少し追記すると以下のようになります。

function nameCounter(){
//入力値を取得
    var loadedList = document.getElementById('list').value;
//入力値の配列を作成
    var nameArray = loadedList.split('\n');
//空の連想配列を用意
    var dic_count = {};
//forループで配列の頭から順番に一つずつ要素をみていく
    for(var i=0 ; i < nameArray.length; i++){
//例）i=0の時。もし、連想配列のkeyが入力値の配列の1番目の値だった時のvalueがundefinedだったら
        if(dic_count[nameArray[i]] === undefined){
//value値がundefinedということは新しい種類のkey名である。なのでvalueに1をセットする。　
            dic_count[nameArray[i]] = 1;
//それ以外。つまりvalueに何かしらの値がすでにセットされている場合はそれに1をたす。
        }else{
        dic_count[nameArray[i]] +=1;
        }
        }
//連想配列を戻り値として返す
        return dic_count;
    }

  参考になった動画 

このおじさんテンポよくてわかりやすくて楽しくて本当に好き。

 Wikipediaからrainbowの説明をとってきてword数をカウントするという動画。
built-in functionを使っている場面が結構あるのですがその辺りは無視して使えそうな考え方の大枠を取り込む感じで視聴しました。

開始50秒くらいから10分30秒くらいまでが関連性が高い。

時間がない人は4分13秒くらいからみたらいいかなと思います。