2020 ES6 / 7/8 und auf Annäherung
Ab ES6 bietet Javascript mehrere Konstrukte an, um eine performante Lösung für dieses Problem zu erstellen.
Dies umfasst die Verwendung von URLSearchParams und Iteratoren
let params = new URLSearchParams('abc=foo&def=%5Basf%5D&xyz=5');
params.get("abc"); // "foo"
Sollte Ihr Anwendungsfall erfordern, dass Sie es tatsächlich in ein Objekt konvertieren, können Sie die folgende Funktion implementieren:
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;
}
Grundlegende Demo
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"}
Verwenden von Object.fromEntries und verbreiten
Wir verwenden Object.fromEntries (die derzeit in der Stufe 4), ersetzt paramsToObjectmit Object.fromEntries(entries).
Die zu wiederholenden Wertepaare sind die Listennamen-Wert-Paare, wobei der Schlüssel der Name und der Wert der Wert ist.
Da URLParamsein iterierbares Objekt zurückgegeben wird, führt die Verwendung des Spread-Operators anstelle des Aufrufs .entriesauch zu Einträgen gemäß seiner Spezifikation:
const urlParams = new URLSearchParams('abc=foo&def=%5Basf%5D&xyz=5');
const params = Object.fromEntries(urlParams); // {abc: "foo", def: "[asf]", xyz: "5"}
Hinweis: Alle Werte sind automatisch Zeichenfolgen gemäß der URLSearchParams-Spezifikation
Mehrere gleiche Schlüssel
Wie @siipe hervorhob , werden Zeichenfolgen, die mehrere Werte mit demselben Schlüssel enthalten, zum letzten verfügbaren Wert gezwungen: foo=first_value&foo=second_valuewird im Wesentlichen zu : {foo: "second_value"}.
Gemäß dieser Antwort: https://stackoverflow.com/a/1746566/1194694 gibt es keine Spezifikation für die Entscheidung, was damit zu tun ist, und jedes Framework kann sich anders verhalten.
Ein häufiger Anwendungsfall besteht darin, die beiden gleichen Werte zu einem Array zusammenzufügen und das Ausgabeobjekt in Folgendes umzuwandeln:
{foo: ["first_value", "second_value"]}
Dies kann mit folgendem Code erreicht werden:
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}