【言語チャレンジ14】パラメータの値をオブジェクトへ変換/URLSearchParams

現在もりけん塾にてJavaScriptを学んでいます。その記録。

普段やっている課題とは別に、「言語チャレンジ」という課題に挑戦しています。
言語チャレンジとはinputの値、outputで出したい値を与えられ、その答え通りになるようなコードを書く課題です。

GitHub

フロントエンドエンジニアを目指す方へのハンズオン資料

https://github.com/kenmori/handsonFrontend/blob/master/work/basic/Work.md

github

言語チャレンジにおける塾のマインド

言語チャレンジはあくまでinputとoutputがあっているかに主眼を置いている
「input」「output」の型が合っていれば、答えとしては問題ない
もっといい方法や改善を全ての人にレビューしていくのは大変であり、先生にとってのベストの解答が塾外の誰かが見た時にそうではない
自分なりのベストを調べ尽くしてほしい
サクサク進めることで言語を学ぶ楽しさを味わってほしい

言語チャレンジ課題14について

問題下記。

input : 
'type=listing&page=2&rowCount=10'

output :
{type: "listing", page: "2", rowCount: "10"}

inputを見てパラメータだと判断しました。実務でありそう。
前職ではPHPでパラメータ値を取得してプログラムを組んだことがあったけど、JavaScriptではやったことない。

URLSearchParams

今回 URLSearchParams というURL のクエリー文字列の操作ができるものを見つけたのでそれを使用してみる。

回答

結論、回答は下記とし、approveしてもらえました。

/* 
input : 'type=listing&page=2&rowCount=10'

output :  {type: "listing", page: "2", rowCount: "10"}

*/

function f(input){
  const param = new URLSearchParams(input);
  return Object.fromEntries(param);
}


const input = 'type=listing&page=2&rowCount=10';
const output = f(input);
console.log(output)

URLSearchParams の使用方法①【値の確認、追加や削除】

const query = "?a=1&b=2&c=3";
const params = new URLSearchParams(query);

console.log(params.has('a')); //true
//has : キーがあるかどうか、booleanを返す

console.log(params.get('a')); //1
//get : 値の取得

params.append('d',4);
console.log(params.toString()); //a=1&b=2&c=3&d=4
//append : 追加

params.set('d',5);
console.log(params.toString()); //a=1&b=2&c=3&d=5
//set : 同じキーが存在する場合は削除される

params.delete('d');
console.log(params.toString()); //a=1&b=2&c=3
//delete : 削除

URLSearchParams の使用方法②【key、value取得】

const params = new URLSearchParams("a=3&b=0&a=1&c=2");
const keys = [...params.keys()]
console.log(keys);
// ["a", "b", "a", "c"]

const values = [...params.values()];
console.log(values);
// ["3", "0", "1", "2"]

const arr = [...params.entries()];
console.log(arr);
// [ ["a", "3"], ["b", "0"], ["a", "1"], ["c", "2"] ]

const arr02 = [...params];
console.log(arr02);
// [ ["a", "3"], ["b", "0"], ["a", "1"], ["c", "2"] ]
//.entries()を省略しても同じ結果

何かの記事で読んだのですが（どこかいってしまった…）entries()は省略できるそう。

URLSearchParams の使用方法③【sort】

const params = new URLSearchParams("c=3&b=2&a=1")
const sort = params.sort();
const sortResult = params.toString();
console.log(sortResult);
// "a=1&b=2&c=3"

ソートはキーの値をソートしていますね。

これがすべてではないですがざっくりと、備忘録。

c.sakyou