为什么返回不是在递归函数中完成函数

Question

我在笔记本中有这支笔，而且我有一个名为' getRandomPos '的递归函数，该函数填充了一个名为' randomPos <的数组/ em> '通过另一个数组中随机选择的值作为参数传递，称为“ dimensionArray ”

如果新数组的长度大于参数'金额'，则应返回新数组。

单击画布时，该功能会运行。

如果你打开了devtools，因为第17行有一个调试器，你可以通过chrome中的devtools中的'跳过下一个函数调用'按钮完成该功能的步骤，你会看到在“ randomPos ”数组的长度大于“ 金额 ”参数之后，它应该返回 randomPos 。

但它没有。

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

我不明白这一点，不应该只返回停止功能并返回 randomPos ？

这是代码，这是代码笔上的笔：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是否小于金额， false 然后
    • 1 getRandomPos测试randomPos是否小于金额， false 然后
      • 2 getRandomPos测试randomPos是否小于金额， false 然后
        • 3 getRandomPos测试randomPos是否小于金额， true 然后
        • 返回 3
      • 返回 2
    • 返回 1
  • 返回 0