ES6 / 7/8 2020 dan tentang pendekatan
Mulai ES6 dan seterusnya, Javascript menawarkan beberapa konstruksi untuk membuat solusi yang tepat untuk masalah ini.
Ini termasuk menggunakan URLSearchParams dan iterator
let params = new URLSearchParams('abc=foo&def=%5Basf%5D&xyz=5');
params.get("abc"); // "foo"
Jika use case Anda mengharuskan Anda untuk benar-benar mengubahnya menjadi objek, Anda dapat mengimplementasikan fungsi berikut:
function paramsToObject(entries) {
let result = {}
for(let entry of entries) { // each 'entry' is a [key, value] tupple
const [key, value] = entry;
result[key] = value;
}
return result;
}
Demo Dasar
const urlParams = new URLSearchParams('abc=foo&def=%5Basf%5D&xyz=5');
const entries = urlParams.entries(); //returns an iterator of decoded [key,value] tuples
const params = paramsToObject(entries); //{abc:"foo",def:"[asf]",xyz:"5"}
Menggunakan Object.fromEntries dan menyebar
Kita bisa menggunakan Object.fromEntries (yang saat ini dalam tahap 4), ganti paramsToObjectdengan Object.fromEntries(entries).
Pasangan nilai yang akan diulangi adalah pasangan daftar nama-nilai dengan kuncinya adalah nama dan nilainya sebagai nilainya.
Karena URLParams, mengembalikan objek yang dapat diulang , menggunakan operator spread alih-alih memanggil .entriesjuga akan menghasilkan entri per specnya:
const urlParams = new URLSearchParams('abc=foo&def=%5Basf%5D&xyz=5');
const params = Object.fromEntries(urlParams); // {abc: "foo", def: "[asf]", xyz: "5"}
Catatan: Semua nilai adalah string secara otomatis sesuai dengan spesifikasi URLSearchParams
Beberapa kunci yang sama
Sebagai @siipe ditunjukkan , string yang berisi beberapa nilai kunci yang sama akan dipaksa ke nilai terakhir yang tersedia: foo=first_value&foo=second_valuepada dasarnya akan menjadi:{foo: "second_value"} .
Sesuai jawaban ini: https://stackoverflow.com/a/1746566/1194694 tidak ada spesifikasi untuk memutuskan apa yang harus dilakukan dengannya dan setiap kerangka kerja dapat berperilaku berbeda.
Kasus penggunaan umum adalah menggabungkan dua nilai yang sama ke dalam array, membuat objek output menjadi:
{foo: ["first_value", "second_value"]}
Ini dapat dicapai dengan kode berikut:
const groupParamsByKey = (params) => [...params.entries()].reduce((acc, tuple) => {
// getting the key and value from each tuple
const [key, val] = tuple;
if(acc.hasOwnProperty(key)) {
// if the current key is already an array, we'll add the value to it
if(Array.isArray(acc[key])) {
acc[key] = [...acc[key], val]
} else {
// if it's not an array, but contains a value, we'll convert it into an array
// and add the current value to it
acc[key] = [acc[key], val];
}
} else {
// plain assignment if no special case is present
acc[key] = val;
}
return acc;
}, {});
const params = new URLSearchParams('abc=foo&def=%5Basf%5D&xyz=5&def=dude');
const output = groupParamsByKey(params) // {abc: "foo", def: ["[asf]", "dude"], xyz: 5}