Edited at

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

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