时间戳

首页 > 解决方案 > JavaScript 中 forEach() 循环中返回语句的意外行为

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

问题描述

我的问题与我编写的一个 JavaScript 函数有关，该函数的行为似乎很奇怪。总而言之，即使在return遇到语句之后，函数的执行似乎仍在继续——就好像循环return内的语句被忽略了一样。forEach这很难理解，而且在我以前见过的任何语言中都不是这样。

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

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

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

标签： javascriptarraysforeachreturnjavascript-objects

解决方案

AforEach与普通for循环不同。您实际上是在传递一个要在每个循环中执行的函数，因此您的return行为是在该函数的范围内，而不是循环。

有点像这样：

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它item里面的返回substitutionArray，所以你必须在mainColor事后提取。如果您有可能找不到它，请添加一个空检查

推荐阅读