无法在 javascript 的嵌套对象/数组中正确循环答案

【问题标题】：Unable to loop through properly in nested object/array in javascript无法在 javascript 的嵌套对象/数组中正确循环
【发布时间】：2016-11-02 15:06:35
【问题描述】：

我有一个对象（来自 MongoDB），看起来像这样：

var test = [
  {
    "_id": "1",
    "childs": [
      {
        "name": "First child",
        "child_id": 1
      },
      {
        "name": "Second child",
        "child_id": 2
      }
    ]
  },
  {
    "_id": "2",
    "childs": [
      {
        "name": "First child",
        "child_id": 1
      }
    ]
  }
];

我正在尝试遍历此内容并将每个孩子显示为单独的项目。我就是这样做的：

var response_items = [];

//Process relays as individual devices
test.forEach(function(device) {
    var response_item = {};
    response_item._id = device._id;

    //Process relays as individual devices
    device.childs.forEach(function(child) {
        response_item.name = child.name;
        response_item.child_id = child.child_id;
        //Return devices
        response_items.push(response_item);
    });
});

console.log(response_items);

但由于某种原因，这是我得到的结果：

Array (3)
{_id: "1", name: "Second child", child_id: 2}
{_id: "1", name: "Second child", child_id: 2}
{_id: "2", name: "First child", child_id: 1}

第三项是正确的，但是第一项和第二项是重复的，我不知道我做错了什么。

示例：https://jsfiddle.net/om89y661/

【问题讨论】：

当然，您正在对内部forEach() 中的同一个对象进行变异，因此下一次迭代会覆盖您之前设置的属性。然后，您将同一个对象推入数组。相反，在内部.forEach() 中声明您的var response_item = {}。 JS 从不隐式复制对象。
尝试将前两行代码 (var response_item={} ...) 放入 device.childs.forEach() 或查看这个小提琴（分叉）jsfiddle.net/5kyk7pbx
我觉得自己很蠢...谢谢

标签： javascript arrays loops object foreach

【解决方案1】：

var test = [
  {
    "_id": "1",
    "childs": [
      {
        "name": "First child",
        "child_id": 1
      },
      {
        "name": "Second child",
        "child_id": 2
      }
    ]
  },
  {
    "_id": "2",
    "childs": [
      {
        "name": "First child",
        "child_id": 1
      }
    ]
  }
];
    
var response_items = [];

//Process relays as individual devices
test.forEach(function(device) {

//Process relays as individual devices
device.childs.forEach(function(child) {
                var response_item = {};
	response_item._id = device._id;
  
	response_item.name = child.name;
	response_item.child_id = child.child_id;
	//Return devices
	response_items.push(response_item);
});

});

console.log(response_items);

【讨论】：

正如@squint 在上面的评论中所说。内循环正在覆盖您在外循环中创建的对象。这将通过在内部循环中创建一个新对象来防止关闭。

【解决方案2】：

使用Array.reduce() 以纯函数方法将数组展平如下：

var test = [
  {
    "_id": "1",
    "childs": [
      {
        "name": "First child",
        "child_id": 1
      },
      {
        "name": "Second child",
        "child_id": 2
      }
    ]
  },
  {
    "_id": "2",
    "childs": [
      {
        "name": "First child",
        "child_id": 1
      }
    ]
  }
];

var result = test.reduce(function (accumulator, current) {
  var mappedRes = current.childs.map(function (item) {
    item._id = current._id;
    return item;
  });
  return accumulator.concat(mappedRes);
}, []);

console.log(result);

【讨论】：