return停止一个函数并返回一个值。 但为什么要在变量上使用呢？

Question

return停止一个函数并返回一个值。 例如，这个简单的函数返回2个单词。

function returnValue(name) {
    return "Hello " + name;
}

document.getElementById("box-1").innerHTML = returnValue("Freddy");

但是我可以用变量完成同样的事情。 例如，此函数创建相同的输出而不return 。

var testVar;

function returnValue(name) {
    testVar = "Hello " + name;
}

returnValue("Freddy");  
document.getElementById("box-1").innerHTML = testVar;

作为一个菜鸟，至少在表面上，与变量相比，我没有看到return的显着好处。 我错过了一些关于return独特好处吗？ 或者交替做大多数人只是使用变量？

Answer 1

返回语句告诉处理器返回调用该函数的代码。 它还具有报告值的能力。 使用报告变量不会导致该功能停止。

往下看：

function returnValue(name) {
    if (name == "Tim") return "Bye " + name;
    return "Hello " + name;
}

如果名称为Tim，则此函数将停止执行。 记者变量“

function returnValue(name) {
        if (name == "Tim") testVar = "Bye " + name;
        testVar = "Hello " + name;
}

即使名称是Tim，执行仍在继续，并且值被错误地报告为Tim。 该变量还占用了不必要的内存。

Answer 2

return语句可用于完成许多不同的事情，这里有几个例子......

例1：
在这个例子中，我们有一个带有条件的非常大的循环，如果我们在我们的条件中不使用return语句，它将继续遍历每个其他数字，最终减慢我们的代码。

function aLargeLoop() {
  for (i = 0; i < 600; i++) {
    alert(i)
    if (i == 10) {
      return i;
    }
  }
}

aLargeLoop()

例2：

而不是这样做浪费了不必要的时间来输入......

var testVar;

function returnValue(name) {
  testVar = "Hello " + name;
}
returnValue("Freddy")
alert(testVar)

只做...我们可以完成同样的事情

function sayhello(name) {
  return "Hello " + name;
}

var greeting = sayhello("John")
alert(greeting)

例3：

如果我们尝试原型化这样的方法......

var x;
Array.prototype.methodExample = function() {
    x = this;
  }
  [1, 2, 3, 4].methodExample()
alert(x)

它不会起作用，我们需要像这样返回...

Array.prototype.methodExample = function() {
    return this;
}

alert([1,2,3,4].methodExample())

我希望这可以帮助其他有类似查询的人。

Answer 3

您的变量是一个全局变量，因此可以从代码中的任何位置访问或设置它。 在Web浏览器中，有许多全局变量，它们是具有函数的对象。 这些主要用于存储数据。

另一方面，函数可用于执行代码块或返回对象。

例如，您可以定义一个从字符串中提取文本的函数。 此函数将从表示十六进制，RGB或RGBA格式的颜色的字符串中解析R（红色）G（绿色）B（蓝色）部分。

function getRGB(color) {
                var Rhex, Ghex, Bhex;
                var R8bit = null;
                var G8bit = null;
                var B8bit = null;
                var IsHex = false;
                if (color.match(/rgba?\((\d{1,3}),\s(\d{1,3}),\s(\d{1,3})/)) {
                    Rhex = RegExp.$1;
                    Ghex = RegExp.$2;
                    Bhex = RegExp.$3;
                }
                else if (color.match(/^\s*#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})\s*$/i)) {
                    Rhex = RegExp.$1;
                    Ghex = RegExp.$2;
                    Bhex = RegExp.$3;
                    IsHex = true;
                }
                else if (color.match(/^\s*#?([0-9a-f])([0-9a-f])([0-9a-f])\s*$/i)) {
                    Rhex = RegExp.$1 + RegExp.$1;
                    Ghex = RegExp.$2 + RegExp.$2;
                    Bhex = RegExp.$3 + RegExp.$3;
                    IsHex = true;
                }
                else {
                    return (NaN);
                }
                if (IsHex) {
                    R8bit = parseInt(Rhex, 16);
                    G8bit = parseInt(Ghex, 16);
                    B8bit = parseInt(Bhex, 16);
                } else {
                    R8bit = parseInt(Rhex);
                    G8bit = parseInt(Ghex);
                    B8bit = parseInt(Bhex);
                }
                return [R8bit, G8bit, B8bit];
            }

现在我可以从另一个函数中使用该函数，例如通过增加或减少颜色的RGB分量来使颜色变暗或变亮：

function darken(color)  {
    var rgb = getRGB(Color);
    return [Math.Max(rgb[0]-1,0), Math.Max(rgb[1]-1,0), Math.Max(rgb[2]-1,0)];
}

或者减轻颜色：

function lighten(color)  {
    var rgb = getRGB(Color);
    return [Math.Min(rgb[0]+1,255), Math.Min(rgb[1]+1,255), Math.Min(rgb[2]+255,0)];
}

我还可以在函数内声明变量和函数：

function myColorHelper(e)
{
    var el = $(e);
    var myColor= function() { return el.css("color"); };
    var myrgb = function() { return getRGB(mycolor);};
    var makeDarker = function() {
       var darker = darken(myrgb());
       el.css("color", "rgb(" + darker[0] + ", " + darker[1] + ", " + darker[2]);
      };
    var makeLighter = function() {
       var lighter = lighten(myrgb());
       el.css("color", "rgb(" + lighten[0] + ", " + lighten[1] + ", " + lighten[2]);
      };

}

插件和框架充满了各种功能，允许我们在代码中使用功能。 例如，我可以使用jQuery和这些函数来使网页上元素的颜色变暗或变亮。

var helper = myColorHelper($('#myElement'));
helper.makeLighter();
helper.makeDarker();