如何通过一个字符串路径来访问修改对象属性?

Question

我有一个多层级的对象结构大概是这样的：

var data=[
    {
        "title": "节点1",
        "key": "0-1",
        "children": [{
            "title": "子节点1",
            "key": "0-1-1"
        }]
     },
     {
        "title": "节点2",
        "key": "0-2",
        "children": [{
            "key": "0-2-1",
            "title": "未命名"
        }]
      }];

我要修改某个元素的属性，常规操作不应该是这样嘛:

data['1']['children']['0']['title']="小明";

为了得到这一连串方括号访问路径，我通过扁平化来搜索匹配元素，这样我就得到了这样的数据格式:

  var flatData={
    "['0']['title']": "节点1",
    "['0']['key']": "0-1",
    "['0']['children']['0']['title']": "子节点1",
    "['0']['children']['0']['key']": "0-1-1"
    "['1']['title']": "节点2",
    "['1']['key']": "0-2",
    "['1']['children']['0']['key']": "0-2-1",
    "['1']['children']['0']['title']": "未命名"
};

扁平化后，左边的key值都是字符串，现在我就卡在这一步，怎么把这个字符串拼到data后面，来达到访问修改元素的目的？

data和"['1']['children']['0']['title']"

这个对象和字符串怎么结合起来？

Answer 1

给个思路，设对象为data

1. 将"['0']['title']"拆分为['0', 'title']，结果设为keys
2. 判断keys长度是否<2，满足则直接以data[keys[0]]取值并退出，否则继续
3. 在0 - data.length - 2的范围内依次对data进行data[keys[i]]取值
4. 最后一次取值的结果设为r，即结果为r[keys[keys.length - 1]]

Answer 2

直接用lodash里的get就可以，get

Answer 3

键值访问吗？可以尝试处理下字符串

var keys = [1, "children", 0, "title"];
var ans = keys.reduce((acc, cur) => acc[cur], data);//"未命名"