返回停止一個函數並返回一個值。但爲什麼使用它在一個變量？

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