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 และ Spread
เราสามารถใช้Object.fromEntries (ซึ่งขณะนี้อยู่ในขั้นตอนที่ 4) แทนที่ด้วยparamsToObjectObject.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}