从 Javascript 中的查询字符串创建嵌套对象答案

【问题标题】：Create nested object from query string in Javascript从 Javascript 中的查询字符串创建嵌套对象
【发布时间】：2019-10-12 15:37:41
【问题描述】：

我有以下查询字符串：

student.name.firstname=Foo&student.name.lastname=Bar&student.address=My%20Street

如何转换成这样的嵌套对象：

{
  student:{
    name:{
      firstname: "Foo",
      lastname: "Bar"
    },
    address: "My Street"
  }
}

我已经尝试了以下代码，但有问题：

function convertQueryToMap(query) {
    var params = {};
    var vars = query.split('&');
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split('=');
        var subpairs;
        if (pair[0].includes('.')) {
            subpairs = pair[0].split('.');
            var object = {};
            subpairs.reduce(function(o, s, i) {
                if (i === subpairs.length-1) {
                    return o[s] = decodeURIComponent(pair[1]);
                } else {
                    return o[s] = {};
                }
            }, object);
        }
    }
    return params;
}

你知道解决办法吗？

【问题讨论】：

我认为address 不应该是name 对象的一部分？
您需要将reduce 放到params 上，而不是您为每个键值对再次创建的object 上。然后只在新的子对象o[s] = {}不存在时创建它。
同时删除if (pair[0].includes('.'))。您还想为非嵌套键创建值吗？
@Bergi：这是一个错字，我编辑了我的问题。谢谢。

标签： javascript javascript-objects query-string

【解决方案1】：

您可以使用reduce 方法创建嵌套结构，并使用split 方法首先根据& 在部分上拆分查询，并从每个部分中获取键和值。

const query = 'student.name.firstname=Foo&student.name.lastname=Bar&student.address=My%20Street'

const toObject = string => {
  return string.split('&').reduce((r, s) => {
    const [key, val] = s.split('=');

    key.split('.').reduce((a, e, i, ar) => {
      return a[e] || (a[e] = (ar[i + 1] ? {} : val.replace(/%20/g, ' ')))
    }, r);

    return r;
  }, {})
}

const result = toObject(query);
console.log(result)

【讨论】：

如何处理空查询字符串？

【解决方案2】：

您可以解码字符串，拆分部分，然后拆分键和值并将值分配给嵌套对象。

function setValue(object, keys, value) {
    var last = keys.pop();
        
    keys.reduce((o, k) => o[k] = o[k] || {}, object)[last] = value;
}

var string = 'student.name.firstname=Foo&student.name.lastname=Bar&user.address=My%20Street',
    result = {};
    
decodeURI(string).split('&').forEach(s => {
    var [key, value] = s.split('=');
    setValue(result, key.split('.'), value);
});

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

【讨论】：