2020 ES6 / 7/8 và tiếp cận
Bắt đầu ES6 trở đi, Javascript cung cấp một số cấu trúc để tạo ra giải pháp hiệu quả cho vấn đề này.
Điều này bao gồm sử dụng URLSearchParams và iterators
let params = new URLSearchParams('abc=foo&def=%5Basf%5D&xyz=5');
params.get("abc"); // "foo"
Nếu trường hợp sử dụng của bạn yêu cầu bạn thực sự chuyển đổi nó thành đối tượng, bạn có thể thực hiện chức năng sau:
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 cơ bản
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"}
Sử dụng Object.fromEntries và lây lan
Chúng ta có thể sử dụng Object.fromEntries (hiện đang ở giai đoạn 4), thay thế paramsToObjectbằng Object.fromEntries(entries).
Các cặp giá trị được lặp lại là các cặp tên-giá trị danh sách với khóa là tên và giá trị là giá trị.
Vì URLParams, trả về một đối tượng có thể lặp lại , sử dụng toán tử trải rộng thay vì gọi .entriescũng sẽ mang lại các mục nhập theo thông số kỹ thuật của nó:
const urlParams = new URLSearchParams('abc=foo&def=%5Basf%5D&xyz=5');
const params = Object.fromEntries(urlParams); // {abc: "foo", def: "[asf]", xyz: "5"}
Lưu ý: Tất cả các giá trị được tự động chuỗi theo thông số URLSearchParams
Nhiều khóa giống nhau
Như @siipe đã chỉ ra, các chuỗi chứa nhiều giá trị khóa giống nhau sẽ được ép buộc vào giá trị khả dụng cuối cùng: foo=first_value&foo=second_valuevề bản chất sẽ trở thành : {foo: "second_value"}.
Theo câu trả lời này: https://stackoverflow.com/a/1746566/1194694 không có thông số nào để quyết định làm gì với nó và mỗi khung có thể hành xử khác nhau.
Một trường hợp sử dụng phổ biến sẽ là nối hai giá trị giống nhau thành một mảng, biến đối tượng đầu ra thành:
{foo: ["first_value", "second_value"]}
Điều này có thể đạt được với mã sau đây:
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}