普通計數器與陣列計數器通過功能

Question

各位資深開發人員大家好，

我正在編寫節點應用程序，遇到了計數器問題，但這可能是純JS問題。

我編寫了此測試代碼（而不是我的復雜問題），以便更清楚地說明問題。

 var func2 = function(i,counter,arrcounter)
{

  counter++;
  console.log('counter is ' + counter);

  arrcounter.push(i);

  console.log('arrcounter ' + arrcounter);


}



var looptest = function(){

var counter = 0;
var arrcounter = [];


for (var i = 0 ; i<10 ; i++)


func2(i,counter,arrcounter);

}();

如您所見，在for循環之前，我還聲明了var counter = 0以及一個名為arrcounter的數組，並將其傳遞給func2 ，每次迭代都調用func2 。

我得到以下輸出：

counter is 1
arrcounter 0
counter is 1
arrcounter 0,1
counter is 1
arrcounter 0,1,2
counter is 1
arrcounter 0,1,2,3
counter is 1
arrcounter 0,1,2,3,4
counter is 1
arrcounter 0,1,2,3,4,5
counter is 1
arrcounter 0,1,2,3,4,5,6
counter is 1
arrcounter 0,1,2,3,4,5,6,7
counter is 1
arrcounter 0,1,2,3,4,5,6,7,8
counter is 1
arrcounter 0,1,2,3,4,5,6,7,8,9

正如您在上面看到的那樣，對arrcounter進行了“遞增”糾正（我不知道array.push的正確術語），但是整數counter似乎在每次func2調用時都傳遞為0。

我的問題是， counter和arrcounter都在for loop之前聲明了，為什么arrcounter正確地“保持跟蹤”而counter沒有呢？ 在這種情況下， counter的正確處理方法是什么？

Answer 1

在Javascript中，原始類型按值傳遞。 在您的情況下，計數器也會通過值傳遞，並且對它所做的更改將不會被反映回來。 您將i推入arrCounter array ，該arrCounter array越來越大，這就是為什么arrCounter數組顯示正確數據的原因。 您的counter變量不是global變量，而是按值傳遞給func2（），因此在func2()對其所做的更改將不會被反映回來，這就是為什么始終僅將其傳遞為0的原因。

如果要增加計數器變量並將其值發送給Func2() ，它將開始顯示正確的結果，請嘗試以下操作：

 var func2 = function(i,counter,arrcounter) { console.log('counter is ' + counter); arrcounter.push(i); console.log('arrcounter ' + arrcounter); } var looptest = function(){ var arrcounter = []; var counter = 0; for (var i = 0 ; i<10 ; i++) func2(i,counter++,arrcounter); }(); 

Answer 2

 var func2 = function(i,counter,arrcounter)
{

  counter++;
  console.log('counter is ' + counter);

  arrcounter.push(i);

  console.log('arrcounter ' + arrcounter);


}

此處計數器參數首先已傳遞0。 在javascript中，原始類型變量是通過value傳遞的，而不是通過引用傳遞的。 在這里，變量計數器是數字類型，並且是原始類型。 因此，當將其傳遞給func2時，將為func2創建一個局部變量計數器。 因此，它將增加func2函數的本地計數器參數，而不是您在looptest函數中聲明的計數器變量

func2的本地計數器參數將增加為1，但是您在looptest函數中聲明的變量計數器將保持不變，因此，每次您要用0喂它時。

您可以嘗試以下方法：

var looptest = function(){

var counter = 0;
var arrcounter = [];


for (var i = 0 ; i<10 ; i++)
{ 
   counter++;
   func2(i,counter,arrcounter);
}
}();

Answer 3

在javascript變量中指向對象。 這就是分配的作用-它們指向左手以引用右手。

當您將變量counter傳遞給func2 ，參數指向對象，在這種情況下為數字。 當func2然后將變量counter重新分配給新對象時，它將使用局部counter變量並將其指向其他數字對象。 這對looptest的變量counter沒有影響。 因此，for循環的每次迭代都會將0傳遞給func2 。

當您傳遞數組時，它將傳遞對該數組的引用，因此func2中的數組與loopiest'. In 'func2' you don't reassign the variable的數組是同一對象loopiest'. In 'func2' you don't reassign the variable loopiest'. In 'func2' you don't reassign the variable arr , but rather alter the original object, so the changes are seen in the循環測試, but rather alter the original object, so the changes are seen in the . So you see the changes reflected in . So you see the changes reflected in循環測試中. So you see the changes reflected in `

在此示例中，您可以清楚地看到這一點：

 function test(number, arr) { // reassign number number = 10; // change arr arr.push(1) /* try reassigning arr instead for a comparison */ // arr = [1] } function start(){ var number = 1 var arr = [] test(number, arr) // only arr has been changed console.log(number) console.log(arr) } start() 

Answer 4

為了更好地了解哪些參數按值傳遞，哪些參數按引用傳遞。

function的參數...

原始類型 按值傳遞。

對象 （和數組）通過引用傳遞。

 var butImGlobal = 1; var integerVar = 1; var stringVar = 'change or not ?'; var array = [0,1]; var obj = {fruit: 'apple'}; function test(byvalInt, byvalTest, byrefArr, byrefObj){ byvalInt = 99999; byvalTest = 'not change'; byrefArr.push('I\\'m new!'); byrefObj.fruit = 'pineapple'; butImGlobal = 'my value is changed, and I can change my type too!'; } document.getElementById('test').innerHTML = '<b>BEFORE</b><br/>integerVar = ' + integerVar + '<br/>stringVar = ' + stringVar + '<br/>array = ' + array.join(', ') + '<br/>obj.fruit = ' + obj.fruit + '</br>butImGlobal = ' + butImGlobal; test(integerVar, stringVar, array, obj); document.getElementById('test').innerHTML = document.getElementById('test').innerHTML +'<br/><br/><b>AFTER</b><br/>integerVar = ' + integerVar + '<br/>stringVar = ' + stringVar + '<br/>array = ' + array.join(', ') + '<br/>obj.fruit = ' + obj.fruit + '</br>butImGlobal = ' + butImGlobal; 

 <div id="test"></div>