Javascript - 返回语句未按预期工作答案

【问题标题】：Javascript - return statement not working as expectedJavascript - 返回语句未按预期工作
【发布时间】：2018-06-16 05:46:19
【问题描述】：

我的功能有问题。我知道返回我想要的变量的行已经到达，但由于某种原因它没有返回。这是我的功能：

console.log(getLabel(mySelectElementNode)); // this is undefined

function getLabel(element) {
    // This function tries to find the label associated with the select element
    // select.labels is the usual property, but not all browsers support it

    //get the sibling nodes of the label we need
    var siblings = element.parentNode.parentNode.childNodes;
    siblings.forEach(function (elem,ind) {
        if (elem.nodeName=='LABEL') {
            console.log(elem); //I can see this in my browser and it is the label I am looking for
            return elem; // but this return statement does nothing
        };
    });
    console.log('label not found');
}

我不明白为什么我的退货声明不起作用。我也试过把 return null;在 console.log 语句之后的函数末尾，但即使这样也没有用。

【问题讨论】：

你是从匿名函数内部返回的，而不是外部函数。
你想要什么回报？结束迭代还是返回一个值以进一步使用它？

标签： javascript html return

【解决方案1】：

您是从 forEach 回调返回的，而不是您的 getLabel 函数。不只是你，很多人在某些时候都会犯这个错误。 :-) 相反，请确保return 位于任何嵌套函数的getLabel 外部。

在你的情况下，你不想要forEach，你想要find：

function getLabel(element) {
    // This function tries to find the label associated with the select element
    // select.labels is the usual property, but not all browsers support it

    //get the sibling nodes of the label we need
    var siblings = element.parentNode.parentNode.childNodes;
    return Array.prototype.find.call(siblings, function(elem) {
        return elem.nodeName == "LABEL";
    });
}

find 是在 ES2015 中添加的，但可以填充；上面的链接有一个 polyfill。

请注意，childNodes 不是数组，这就是我们在上面使用Function#call 的原因。

如果你想在没有 polyfill 的情况下这样做，你可以使用 ES5 (2009) 中添加的 some：

function getLabel(element) {
    // This function tries to find the label associated with the select element
    // select.labels is the usual property, but not all browsers support it

    //get the sibling nodes of the label we need
    var siblings = element.parentNode.parentNode.childNodes;
    var result = undefined; // The default is `undefined`, of course; this is just for clarity
    Array.prototype.some.call(siblings, function(elem) {
        if (elem.nodeName == "LABEL") {
            result = elem;
            return true;
        }
    });
    return result;
}

some 调用回调，直到它返回一个真实值。

或者当然是一个简单的for循环：

function getLabel(element) {
    // This function tries to find the label associated with the select element
    // select.labels is the usual property, but not all browsers support it

    //get the sibling nodes of the label we need
    var sibling;
    for (sibling = element.parentNode.parentNode.firstElementChild; sibling; sibling = sibling.nextElementSibling) {
        if (sibling.nodeName == "LABEL") {
            return sibling;
        }
    }
    return undefined; // Again, just for emphasis/clarity
}

【讨论】：

【解决方案2】：

因为您是从 forEach 的回调函数返回的，所以它不能正常工作。由于您正在调用 getLable，因此您必须在 getLable 函数的范围内编写 return 语句。但是您的 return 语句在内部回调函数的范围内。正确的代码如下。

console.log(getLabel(mySelectElementNode)); 
// this is undefined
 function getLabel(element) { 
// This function tries to find the label associated with the select element
 // select.labels is the usual property, but not all browsers support it
 //get the sibling nodes of the label we need
var newElem;
 var siblings = element.parentNode.parentNode.childNodes;
 siblings.forEach(function (elem,ind) {
 if (elem.nodeName=='LABEL') {
     newElem = elem;
console.log(elem); //I can see this in my browser and it is the label I am looking for 
return elem; // but this return statement does nothing
 }; }); console.log('label not found'); 
return newElem;
}

【讨论】：