在深层javascript数组中设置对象的属性值答案

【问题标题】：Setting property value of object in a deep javascript Array在深层javascript数组中设置对象的属性值
【发布时间】：2017-08-23 16:46:48
【问题描述】：

我想知道是否有人可以帮助弄清楚我如何设置可以在深层数组中找到的对象中的属性值。

下面是Tree数组的一个例子

我想知道如何插入

var newObjectToInsert = {id: 999, name: 'new name'};

在 id === 3901 的对象的“节点”数组中

var tree = [
  {
    id: 1,
    name: 'Level 1 - A',
    nodes: [
      {
        id: 33,
        name: 'Level 2 = A',
        nodes: []
      },
      
      {
        id: 21,
        name: 'Level 2 = B',
        nodes: []
      }
    ]
  },
  
  {
    id: 2,
    name: 'Level 1 - B',
    nodes: []
  },
  
  {
    id: 3,
    name: 'Level 1 - B',
    nodes: [
      {
        id: 65,
        name: 'Level 2 = A',
        nodes: []
      },

      {
        id: 124,
        name: 'Level 2 = A',
        nodes: [
          {
            id: 3901,
            name: 'Level 3 - A'
          },
          
          {
            id: 29182,
            name: 'Level 3 - B',
            nodes: [
              {
                id: 32423413,
                name: 'Level 4 - A'
              }
            ]
          }
        ]
      },
  
      {
        id: 534,
        name: 'Level 2 = A',
        nodes: []
      }
    ]
  },
];

【问题讨论】：

标签： javascript arrays typescript find lodash

【解决方案1】：

您可以使用原生的Array#some 来实现递归遍历。使用这种方法的一个优点是它已经提供了一种机制，一旦找到我们要插入新对象的节点，就可以停止遍历。

var inserted = tree.some(function cb(v) {
  var nodes = v.nodes || [];
  return v.id === nodeId?
    (v.nodes = nodes).push(newObjectToInsert):
    nodes.some(cb);
});

var tree = [{
    id: 1,
    name: 'Level 1 - A',
    nodes: [{
        id: 33,
        name: 'Level 2 = A',
        nodes: []
      },

      {
        id: 21,
        name: 'Level 2 = B',
        nodes: []
      }
    ]
  },

  {
    id: 2,
    name: 'Level 1 - B',
    nodes: []
  },

  {
    id: 3,
    name: 'Level 1 - B',
    nodes: [{
        id: 65,
        name: 'Level 2 = A',
        nodes: []
      },

      {
        id: 124,
        name: 'Level 2 = A',
        nodes: [{
            id: 3901,
            name: 'Level 3 - A'
          },

          {
            id: 29182,
            name: 'Level 3 - B',
            nodes: [{
              id: 32423413,
              name: 'Level 4 - A'
            }]
          }
        ]
      },

      {
        id: 534,
        name: 'Level 2 = A',
        nodes: []
      }
    ]
  },
];

var newObjectToInsert = {id: 999, name: 'new name'};
var nodeId = 3901;

var inserted = tree.some(function cb(v) {
  var nodes = v.nodes || [];
  return v.id === nodeId?
    (v.nodes = nodes).push(newObjectToInsert):
    nodes.some(cb);
});

console.log(tree);

body &gt; div { min-height: 100%; top: 0; }

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

【讨论】：

非常感谢您分享您的知识。这是一种享受，最重要的是，我学到了一些新东西！我知道我需要一个递归函数，但不确定最好的方法是什么。我已经实现了这种方法，并且效果很好@ryeballar
@MolikMiah，请注意，如果您担心旧的浏览器版本无法实现 Array#some，您也可以使用 _.some 作为替代方案。

【解决方案2】：

你有一个递归结构。因此，您访问所有需要访问者的项目。

伪代码：

function visit(visitor, tree) {
  visitor(tree);
  items.nodes.forEach(subTree => visit(visitor, subTree));
}

并使用

visit(node => {
  if (node.id === 'whatever'){
    node.push({yournode});
  }
}, tree);

【讨论】：

非常感谢 Basarat，这是一种享受，而且很容易理解 :)