为什么 return 没有在递归函数中完成函数

Question

我在codepe中有这支笔，我有一个递归函数叫做'getRandomPos'，该函数填充一个名为'的数组randomPos' 通过从另一个数组中随机选择的值作为名为 'dimensionArray[=45= 的参数传递]'

如果新数组的长度大于参数'数量'，它应该return新数组。

单击 canvas 时函数运行。

如果您打开了 devtools，因为第 17 行有一个调试器，您可以使用 devtools 中的“step over next function call”按钮完成函数的步骤chrome 你会看到 'randomPos' 数组的长度大于 'amount'参数，应该return randomPos.

但事实并非如此。

从第30行到第31行循环三次。

我不明白这个，不应该return停止功能和return randomPos吗？

这是代码，这是 codepen 上的笔：pen

let getRandomFromArray = (items) => {
  let item = items[Math.floor(Math.random()*items.length)]
  return item
}

let rows = 20,
    cols = 50,
    randomXUnits = [],
    randomYUnits = [],
    canvasWidth = 500,
    canvasHeight = 200,
    gridXDiv = (canvasWidth/cols),
    gridYDiv = (canvasHeight/rows),
    randomPos = []


let getRandomPos = (amount, dimensionArray) => {
  debugger;
  let randomUnit = getRandomFromArray(dimensionArray)

    if(randomPos.length < amount){
      if(randomPos.includes(randomUnit)){
        getRandomPos(amount, dimensionArray) 
      }else{
        randomPos.push(randomUnit)
        getRandomPos(amount, dimensionArray) 
      }
    } 
  return randomPos  
}

let drawDivisions = (randomPosArray, dimension) => {
    randomPosArray.forEach( p => {
    fill(255)
    noStroke() 
    if(dimension === canvasWidth){
       rect(p,0,gridXDiv, canvasHeight)    
    }else{
       rect(0,p,canvasWidth, gridXDiv)   
     } 
  })
}

function setup(){
  createCanvas(canvasWidth,canvasHeight)
  background(0)
  for (let i = gridXDiv; i < width-(gridXDiv-1); i+= gridXDiv) {
      randomXUnits.push(i)
    for (let j = gridYDiv; j < height-(gridYDiv-1); j+= gridYDiv) {
      if (randomYUnits.length < 20) {
        randomYUnits.push(j)
      }
    stroke(255)
    point(i,j)
    }
  }
}

function draw(){

}

function mouseClicked() {
  background(0)

  randomPos = []
  let usedPositionsInX = getRandomPos(3, randomXUnits)
  drawDivisions(usedPositionsInX,canvasHeight)


  let usedPositionsInY = getRandomPos(3, randomYUnits)
  drawDivisions(usedPositionsInY,canvasWidth)

}

Answer 1

这是因为您正在使用递归并且 getRandomPos 没有完成递归调用，调用堆栈是这样的：

• 从鼠标点击开始，使用参数 3 和 randomXUnits 调用 getRandomPos
  • 0 getRandomPos 测试 randomPos 是否小于 amount, false then
    • 1 getRandomPos 测试 randomPos 是否小于 amount, false then
      • 2 getRandomPos 测试 randomPos 是否小于 amount, false then
        • 3 getRandomPos 测试 randomPos 是否小于 amount, true then
        • return 3
      • return 2
    • return 1
  • return 0