坚持使用 reduce function 将 application/x-www-form-urlencoded 转换为 JSON

Question

我正在尝试使用reduce将application/x-www-form-urlencoded值转换为 JSON 。

const params = 'key1=value1&key2=value2&key3=value3&key4=value4'

const json = params.split('&').reduce((result, item) => {
   const parts = item.split('=')
   result = result || {}
   result[parts[0]] = parts[1]
   return result
   
});

但它不起作用。

我做错了什么？

Answer 1

当您省略 reduce 的第二个参数时，它默认为第一项，而不是您认为的未定义。 所以

 const params = 'key1=value1&key2=value2&key3=value3&key4=value4' const json = params.split('&').reduce((result, item) => { const parts = item.split('=') result[parts[0]] = parts[1] return result }, {}); // <--- here console.log(json)

另请注意，有一种更简单的方法可以做到这一点：

result = Object.fromEntries(
    params.split('&').map(p => p.split('='))
)

Answer 2

您必须添加初始值{}

 const params = 'key1=value1&key2=value2&key3=value3&key4=value4' const json = params.split('&').reduce((result, item) => { const parts = item.split('=') result = result || {} result[parts[0]] = parts[1] return result }, {}); console.log(json)

旁注：您正在创建一个 object，而不是 json。

Answer 3

Array.reduce()需要两个 arguments ：回调 function 和初始值。

当未提供初始值时，它将使用数组的第一项作为回调的第一次调用的初始值。 这与您在第一次调用时获得undefined results的预期不符。

解决办法是正确调用，用两个arguments：

 const params = 'key1=value1&key2=value2&key3=value3&key4=value4' const object = params.split('&').reduce( (result, item) => { const parts = item.split('=') result[parts[0]] = parts[1] return result }, {} ); console.log(object);

顺便说一句， JSON是一个字符串，是某种数据结构的文本表示。 JSON 与本题没有任何关系。 该代码构建了一个 JavaScript plain object。您可以将此 object 传递给JSON.stringify()以将其编码为 JSON，但这是另一回事，与此问题无关。