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

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; 
} 

此功能停止执行。随着记者的变量”

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

即使名称是蒂姆，继续执行和值错误地报告为蒂姆变量也占用unneccesary内存。

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();