我使用 .map() 从表单中的值对象创建查询参数。
let object = {
"selectedPriority": "9",
"selectedShipOption": "Private Label",
"selectedCustomerStatus": "No",
"selectedColdOptions": [],
"selectedDistributionOptions": ["Retail"],
"selectedPackagingOption": "Lid",
"selectedPrepOption": "Hot Water",
"productParams": ["Kosher\n"],
"productAppearance": "Grill Marks",
"storage": "CAP",
"preservatives": "Only natural preservatives"
}
Object.keys(object).map((key, index) => {
console.log(`?${key}=${object[key]}`)
});
现在我已经操作了每个对象和键,我想将它们全部连接在一起以创建一个查询字符串。
我该怎么做?
最佳答案
您的 .map
现在实际上没有映射任何东西 - 它只是 console.log
ging 并返回 undefined
。
如果您想要一个查询字符串,您应该只在第一个 之前添加一个?
,并在所有参数之间添加一个&
。因此,您可以通过&
加入
并在开头添加?
。
您还可以考虑使用 Object.entries
一次获取键和值,而不必引用 object[key]
。
您可能还应该使用 encodeURIComponent
将对 URL 不安全的字符(如纯空格)转换为正确的转义序列(如 %20
):
const object = {
"selectedPriority": "9",
"selectedShipOption": "Private Label",
"selectedCustomerStatus": "No",
"selectedColdOptions": [],
"selectedDistributionOptions": ["Retail"],
"selectedPackagingOption": "Lid",
"selectedPrepOption": "Hot Water",
"productParams": ["Kosher\n"],
"productAppearance": "Grill Marks",
"storage": "CAP",
"preservatives": "Only natural preservatives"
}
const result = '?' + Object.entries(object).map(([key, value]) => {
return `${key}=${encodeURIComponent(value)}`
}).join('&');
console.log(result);
另一个不需要创建中间数组的选项是使用 reduce
,传递初始值 ?
:
const object = {
"selectedPriority": "9",
"selectedShipOption": "Private Label",
"selectedCustomerStatus": "No",
"selectedColdOptions": [],
"selectedDistributionOptions": ["Retail"],
"selectedPackagingOption": "Lid",
"selectedPrepOption": "Hot Water",
"productParams": ["Kosher\n"],
"productAppearance": "Grill Marks",
"storage": "CAP",
"preservatives": "Only natural preservatives"
};
const result = Object.entries(object).reduce((a, [key, value], i) => (
a + (i !== 0 ? '&' : '' ) + `${key}=${encodeURIComponent(value)}`
), '?');
console.log(result);
关于javascript - 连接 .map() 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51958687/