2020 ES6 / 7/8 і на підході
Починаючи з ES6 і далі, Javascript пропонує кілька конструкцій для створення ефективного рішення цієї проблеми.
Це включає використання URLSearchParams та ітераторів
let params = new URLSearchParams('abc=foo&def=%5Basf%5D&xyz=5');
params.get("abc"); // "foo"
Якщо ваш випадок використання вимагає від вас фактичного перетворення його в об'єкт, ви можете реалізувати таку функцію:
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;
}
Основна демонстрація
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"}
Використання Object.fromEntries та розповсюдження
Ми можемо використовувати Object.fromEntries (який зараз знаходиться на етапі 4), замінивши paramsToObjectна Object.fromEntries(entries).
Пари значень, які слід повторити, - це пари списку імен-значень списку, ключовим словом є ім'я, а значенням є значення.
Оскільки URLParams, повертаючи ітерабельний об'єкт, використання оператора розширення замість виклику .entriesтакож дає записи за його специфікацією:
const urlParams = new URLSearchParams('abc=foo&def=%5Basf%5D&xyz=5');
const params = Object.fromEntries(urlParams); // {abc: "foo", def: "[asf]", xyz: "5"}
Примітка: Усі значення автоматично є рядками відповідно до специфікації URLSearchParams
Кілька однакових клавіш
Як @siipe зазначив, рядки , що містять кілька ж, ключові значення будуть змушені до останньої доступної вартості: foo=first_value&foo=second_valueбуде по суті стати: {foo: "second_value"}.
Відповідно до цієї відповіді: https://stackoverflow.com/a/1746566/1194694 немає специфіки для того, щоб вирішити, що з цим робити, і кожен фреймворк може вести себе по-різному.
Загальним випадком використання буде об'єднання двох однакових значень у масив, що робить вихідний об'єкт у:
{foo: ["first_value", "second_value"]}
Це можна досягти за допомогою наступного коду:
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}