JavaScript 中 forEach() 循环内返回语句的意外行为

Question

我的问题与我写的 JavaScript function 有关，这似乎表现得很奇怪。 总之，function 执行似乎 go 即使在遇到return语句之后 - 就好像forEach循环中的return语句被忽略了。 这很难理解，而且在我以前见过的任何语言中都不是这样。

在下面展示一个代码片段 - 我试图使代码、日志记录和评论尽可能集中和描述性，以便读者可以轻松识别问题。 但是，如果您不想直接跳转到代码，我也会分享问题的详细描述。

在我分享的代码中， function substituteWithMainColor()将一个名为color的字符串值作为参数。 它将它与 object 文字的数组（称为substitutionArray ）的每个元素进行匹配，其中每个这样的variations都包含一个名为mainColor的成员字符串和一个名为 variables 的成员数组。 如果 function 在任何variations arrays 中找到color参数，则它返回找到匹配项的 object 的相应mainColor 。 如果在任何对象中都找不到匹配项，则 function 返回作为参数传递的原始值。

在我的示例中，参数“Cyan”被传递给 function substituteWithMainColor() 。 由于数组substitutionArray数组包含“青色”作为其第三项的variations数组中的字符串之一，因此找到了匹配项（并且日志显示了它）。 然而，此时，function 并没有按预期返回匹配的mainColor值“Blue” ，而是忽略了forEach()循环中的return语句，并继续执行forEach循环的进一步迭代（日志也显示了这一点） . 最终它执行forEach()循环之后的最后一个return语句，并返回错误的原始color值。

有人可以帮我理解可能发生的事情吗？

 const substitutionArray = [ { mainColor: "Red", variations: ["Magenta", "Orange", "Crimson", "Coral", "Maroon"] }, { mainColor: "Blue", variations: ["Purple", "Violet", "Cyan"] }, { mainColor: "Green", variations: ["Teal", "Lime", "Aquamarine", "Olive"] } ] function substituteWithMainColor(color) { logToPage(`In substituteWithMainColor() function. Input: ${color}`); substitutionArray.forEach(item => { logToPage(`Testing input ${color} against variations of ${item.mainColor}`) if (item.variations.includes(color)) { logToPage(`FOUND MATCH for ${color} - Main color: ${item.mainColor}. Returning ${item.mainColor}`); return item.mainColor; //Function should return from here if match is found. } }); logToPage(`No matches found for ${color}. Returning ${color}`) return color; //No matches found } function writeToPage(text) { document.body.innerHTML += `<div class = "content"> ${text} </div>`; } function logToPage(text) { document.body.innerHTML += `<div class = "log"> ${text} </div >`; } const colorName = "Cyan"; writeToPage(`Original Color: ${colorName}`) writeToPage(`Returned Value: ${substituteWithMainColor(colorName)}`); // "Blue should be returned"

 .content { outline: 1px solid rgb(161, 189, 135); padding: 5px; margin: 5px; color: rgb(255, 127, 80); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 16px; font-weight: bold; }.log { outline: 1px solid #ccc; padding: 5px; margin: 5px; color: rgb(85, 91, 122); font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 12px; }

Answer 1

forEach与普通for循环不同。 您实际上是在传递 function 以在每个循环中执行，因此您的return在 function的 scope 中起作用，而不是在循环中。

有点像这样：

for(let i = 0; i < 5; i++) {
    foo();
}

function foo() {
    // do something
    return true;
}

您可能正在寻找类似find()的东西（ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find ）

substitutionArray.find(item => item.variations.includes(color)).mainColor;

请注意， find它的返回是substitutionArray中的item ，因此您必须在之后提取mainColor 。 如果有可能找不到它，请添加 null 检查