为每个循环嵌套重构答案

【问题标题】：Refactoring nested for each loop为每个循环嵌套重构
【发布时间】：2016-10-12 10:50:51
【问题描述】：

我有下面的代码来迭代对象的贴纸信息。为此，我为每个使用了两个嵌套。 lodash 中是否有更好的方法来重构下面的代码而不使用嵌套的 forEach 或任何更好的建议。

var stickers = [];
_.forEach(data.families.categories, function (category) {
    _.forEach(category.stickers, function (sticker) {
        stickers.push(sticker);
    });
});

以下是对象示例

var data = {
  "families": {
    "id": "my_family",
    "categories": [
      {
        "label": "sample-1",
        "id": "family-0",
        "stickers": [
          "aa",
          "bb",
          "cc"
        ]
      },
      {
        "label": "US",
        "id": "family-1",
        "stickers": [
          "DD",
          "EE"
        ]
      },
      {
        "label": "sample-2",
        "id": "family-2",
        "stickers": [

        ]
      },
      {
        "label": "sample-3",
        "id": "family-3",
        "stickers": [
          "FF",
          "GG",
          "HH",
          "II",
          "JJ"
        ]
      }
    ]
  }
}

【问题讨论】：

为什么要投反对票...请提出反对票
我会在 reduce 中使用映射和数组连接来做到这一点。
但为什么要投反对票？....这是我的问题，我们如何改进上述代码。你能给我一些sn-p和例子吗

标签： javascript json refactoring lodash

【解决方案1】：

Lodash 提供了flatMap 函数，它会做你想做的事：

var stickers =_.flatMap(data.families.categories, 'stickers');

	var data = {
  "families": {
    "id": "my_family",
    "categories": [
      {
        "label": "sample-1",
        "id": "family-0",
        "stickers": [
          "aa",
          "bb",
          "cc"
        ]
      },
      {
        "label": "US",
        "id": "family-1",
        "stickers": [
          "DD",
          "EE"
        ]
      },
      {
        "label": "sample-2",
        "id": "family-2",
        "stickers": [

        ]
      },
      {
        "label": "sample-3",
        "id": "family-3",
        "stickers": [
          "FF",
          "GG",
          "HH",
          "II",
          "JJ"
        ]
      }
    ]
  }
}
    
    var stickers =_.flatMap( data.families.categories, 'stickers');

document.getElementById('result').textContent = JSON.stringify(stickers);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>

<p>
  <pre id="result"></pre>
</p>

【讨论】：

【解决方案2】：

您可以将Array#reduce 与Array#concat 结合使用。

var data = { "families": { "id": "my_family", "categories": [{ "label": "sample-1", "id": "family-0", "stickers": ["aa", "bb", "cc"] }, { "label": "US", "id": "family-1", "stickers": ["DD", "EE"] }, { "label": "sample-2", "id": "family-2", "stickers": [] }, { "label": "sample-3", "id": "family-3", "stickers": ["FF", "GG", "HH", "II", "JJ"] }] } },
    stickers = data.families.categories.reduce(function (r, category) {
        return r.concat(category.stickers);
    }, []);

console.log(stickers);

【讨论】：