Javascript forEach 返回值插入字符串答案

【问题标题】：Javascript forEach return value interpolated into stringJavascript forEach 返回值插入字符串
【发布时间】：2016-01-21 23:41:23
【问题描述】：

stack_html += "<div class='co-stack-layer-title'>Application and Data" +
                        "<div class='row'>" +
                          response['Application and Data'].forEach(generateStackItem) + 
                        "</div>" +
                      "</div>";
stack_html += "<div class='co-stack-layer-title'>Business Tools" +
                        "<div class='row'>" +
                          response['Business Tools'].forEach(generateStackItem) + 
                        "</div>" +
                      "</div>";
stack_html += "<div class='co-stack-layer-title'>DevOps" +
                        "<div class='row'>" +
                          response['DevOps'].forEach(generateStackItem) + 
                        "</div>" +
                      "</div>";
stack_html += "<div class='co-stack-layer-title'>Utilities" +
                        "<div class='row'>" +
                          response['Utilities'].forEach(generateStackItem) + 
                        "</div>" +
                      "</div>";

function generateStackItem(element, index, array) {
    var stack_item_html = "";
    stack_item_html += "<div class='co-service'>" +
                     "<a href='" + element['canonical_url'] + "' class='each-service hint hint--top' data-hint='" + element['name'] + "' data-align='left'>" +
                       "<img src='" + element['image_url'] + "'>" +
                     "</a>" +
                   "</div>";

    console.log(stack_item_html);
    return stack_item_html;                       
}

我正在尝试在 javascript 对象上使用 forEach 迭代，但似乎我无法将返回值插入到字符串加法中。

<div class='co-stack-layer-title'>Application and Data<div class='row'>undefined</div></div><div class='co-stack-layer-title'>Business Tools<div class='row'>undefined</div></div><div class='co-stack-layer-title'>DevOps<div class='row'>undefined</div></div><div class='co-stack-layer-title'>Utilities<div class='row'>undefined</div></div>

【问题讨论】：

您使用的响应如何？你想用 generateStackItem 做什么？

标签： javascript json object foreach

【解决方案1】：

forEach 返回undefined。使用map+join。

"abc" + response['Utilities'].map(generateStackItem).join("") + "def";

【讨论】：

map + join = reduce，对回调稍作调整。
地图+加入！=减少。在连接的情况下，您可以将您的零件正确地粘合在一起，而减少则更难做到。不过，这并不重要。

【解决方案2】：

当您的数组为空时，forEach 函数将返回undefined，例如，当您像这样[].forEach(generateStackItem) 调用forEach 时，您将得到一个undefined，因此请检查您的response['Application and Data'] 是否为空数组。

【讨论】：

【解决方案3】：

来自mozilla

forEach() 对每个数组元素执行一次回调函数；不像 map() 或 reduce() 它总是返回值 undefined 并且是不可链接。典型的用例是在链的末端。

以这种方式在 forEach 中使用 return 是常见的错误，但它不起作用。你可能想看看map

【讨论】：