javascriptでURLクエリーを簡単に取得してみた

• やり方は色々あったが、わかりづらかったので、自分なりに簡単な方法を考えてみた。
• いつも誰かのコピペしてたので、自分で書けるようにしたかった
• for文よりforEachの方が好き派⇦初心者の考え
• forEachが好きとか言ってたら，forEachは最終手段らしい(なるべく，map,filter,reduceなどを使うべし)
  参照: JavaScript で forEach を使うのは最終手段
• とりあえず，foreachで書いてみた

main.js

function getParams(){
    // クエリーparamは?からなので、まず?で分割
    // paramが複数ある場合のため&で分割
    var params = location.search.split('?')[1].split('&');
    // オブジェクトで取れるようにする
    var data = {};
    params.forEach(function(param){
        // =でkeyとvalに分ける
        var key = param.split('=')[0];
        var val = param.split('=')[1];
        data[key] = val;
    });
    return data;
}

コメントにあるようforEachではなく，reduceで書いた方が良いとのこと．

reduceで修正した

reduce.js

function getParams(){
    // クエリーparamは?からなので、まず?で分割
    // paramが複数ある場合のため&で分割
    var params = location.search.split('?')[1].split('&');
    // reduceで生成したオブジェクトを直接返す
    return params.reduce(function(data, param) {
        var key = param.split('=')[0];
        var val = param.split('=')[1];
        data[key] = val;
        return data;
    }, {});
}

reduceを使うことでdataの宣言がいらなくなった.(reduceの第二引数でinitialValueとして{}を入れた)

配列のデータを集計するような場合にはreduceを使います。

なるほど．．配列から何か新しいデータを生成するときはreduceとかmapの方が良いみたいだな
ということで，なるべくforEach使わないようにしよ

以上。ご自由にお使いください。