javascript - 连接 .map() 值

Question

我使用 .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]}`)
});

现在我已经操作了每个对象和键，我想将它们全部连接在一起以创建一个查询字符串。

我该怎么做？

Answer 1

您的 .map 现在实际上没有映射任何东西 - 它只是 console.logging 并返回 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);