JavaScript

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使わないようにしよ

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