将具有“long.property.name”属性的对象转换为树对象答案

【问题标题】：Convert object with 'long.property.name' property to tree object将具有“long.property.name”属性的对象转换为树对象
【发布时间】：2017-04-26 19:00:31
【问题描述】：

我想将这样的对象从：

foo = {
    42: 'foo', 
    'a.b.c[0].42': 'bar',
    'a.b.c[0].43': 'zet',
    'a.d.c[0].42': 'baz'
}

收件人：

bar = {
    42: 'foo',
    'a.b.c[0].42': 'bar',
    'a.b.c[0].43': 'zet',
    'a.d.c[0].42': 'baz',
    a: {
        b: {
            c: [{
                42: 'bar', 43: 'zet'
            }]
        },
        d: {
            c: [{
                42: 'baz'
            }]
        }
    }
}

有人知道如何实现convertToTree 功能吗？我们在我的项目中使用lodash，这样可以帮助进行基本操作。

var object = {
    42: "foo", 
    "a.b.c[0].42": "bar",
    "a.b.c[0].43": "zet",
    "a.d.c[0].42": "baz"
};

function convertToTree() {
  // code here
}
        
convertToTree(object) === {
  "42": "foo",
  "a.b.c[0].42": "bar",
  "a.b.c[0].43": "zet",
  "a.d.c[0].42": "baz",
  "a": {
    "b": {
      "c": [
        {
          "42": "bar",
          "43": "zet"
        }
      ]
    },
    "d": {
      "c": [
        {
          "42": "baz"
        }
      ]
    }
  }
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"&gt;&lt;/script&gt;

更新：

我需要这种转换才能在另一个代码位置进行这样的操作：

_.result(bar, 'a.b.c[0].42') === 'bar'

你可以找到_.result功能描述here。

【问题讨论】：

Fastest way to flatten / un-flatten nested JSON objects 能解决您的问题吗？
您不希望只是在树中转换您的地图。相反，您希望在地图和该地图的树版本中拥有一个对象。
@Bergi 谢谢。这就是我正在寻找的。span>
@MarioSantini 我同意标题不完全正确。

标签： javascript object underscore.js lodash

【解决方案1】：

有一个小型库可以做到这一点：https://github.com/richie5um/flattenjs

console.log(flattened);
// {
//     'a': true,
//     'b.bb[0]': 0,
//     'b.bb[1]': 1,
//     'b.bb[2]': 2,
//     'b.bb[3]': 3,
//     'b.bb[4]': 4
// }

unflattened = FlattenJS.undo(flattened);
console.log(unflattened);
// { a: true, b: { bb: [ 0, 1, 2, 3, 4 ] } }

【讨论】：

非常感谢！ undo 函数正是我要找的。span>

【解决方案2】：

您需要为数字索引使用自定义函数，因为 lodash 将所有数字和数字视为字符串作为数字。它产生稀疏元素，这里不需要。

function setValue(object, path, value) {
    var last = path.pop();
    path.reduce(function (o, k, i, kk) {
        return o[k] = o[k] || (typeof (i + 1 in kk ? kk[i + 1] : last) === 'number' ? [] : {});
    }, object)[last] = value;
}

var foo = { 42: 'foo', 'a.b.c[0].42': 'bar', 'a.b.c[0].43': 'zet', 'a.d.c[0].42': 'baz' },
    bar = {};

Object.keys(foo).forEach(function (k) {
    setValue(bar, k.split(/\.|(?=\[)/).map(function (v) { return v.match(/^\[.+\]$/) ? +v.slice(1, -1) : v; }), foo[k]);
});

console.log(bar);

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

为了和lodash比较

var foo = { 42: 'foo', 'a.b.c[0].42': 'bar', 'a.b.c[0].43': 'zet', 'a.d.c[0].42': 'baz' },
    keys = Object.keys(foo),
    bar = _.zipObjectDeep(keys, keys.map(function (k) { return foo[k]; }));

console.log(bar);

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

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"&gt;&lt;/script&gt;

【讨论】：

您的第一个解决方案可能是最佳解决方案，但难以获得支持。稀疏元素的问题对我来说不是必需的，我会更新我的问题。第二种解决方案看起来不错，但不幸的是，lodash#3.10.1 没有 zipObjectDeep 方法。
好吧，我还是建议更新你的 lodash。 lodash-migrate 和 eslint-plugin-lodash 可以帮助您完成这个过程。
非常实用，谢谢！我今天将与我的团队讨论。

【解决方案3】：

我的解决方案基于@mik01aj 答案。

var rawObject = {
    42: "foo", 
    "a.b.c[0].42": "bar",
    "a.b.c[0].43": "zet",
    "a.d.c[0].42": "baz"
};

function convertToTree(rowObjectData) {
  return _.assign(
      {}, 
      rowObjectData, 
      _.reduce(rowObjectData, function (result, value, key) { 
          return _.set(result, key, value); 
      }, {}))
}

var convertedObject = convertToTree(rawObject);
        
console.log(_.result(convertedObject, "a.b.c[0].42") === "bar");
console.log(convertedObject["a.b.c[0].42"] === "bar");

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"&gt;&lt;/script&gt;

【讨论】：