Javascript 数组推送替换同一数组中的前一个元素

Question

我面临这个问题，我的randomPoints 数组元素被推送方法替换。 这是我的控制台的输出

我不知道为什么会发生这种情况，但如果我不使用randomPoint.add，它就不会替换并且工作正常。

randomPoint.add返回与没有它时返回的相同 Vector 对象。

var hw
var center
var randomPoints = []
var pointWidth = 20
var points = 300
centerCircleWidth = 300;
pointsOffset = 10

function setup(){
    hw = createVector(600,500)
    createCanvas(hw.x,hw.y)
    center = createVector(hw.x/2,hw.y/2)
    var randomPoint = createVector(0,0)
    randomPoints.push(randomPoint)
    randomPoint = p5.Vector.fromAngle(-radians(120), random(centerCircleWidth/2-pointWidth,centerCircleWidth/2-pointsOffset))
    randomPoints.push(randomPoint)
    console.log(randomPoint)
    randomPoint = randomPoint.add(p5.Vector.fromAngle(radians(60), random(pointsOffset,2*pointsOffset)))
    // this here replaces the last element of array by itself and add another element of same type.
    randomPoints.push(randomPoint)
    console.log(randomPoint)
    console.log(randomPoints)

}

function draw(){
    translate(center.x, center.y)
    background(51);
    strokeWeight(0)
    fill(255)
    ellipse(0,0, centerCircleWidth, centerCircleWidth)
    for(i=0;i<randomPoints.length;i++){
        fill(10)
        ellipse(randomPoints[i].x,randomPoints[i].y,pointWidth,pointWidth)
    }
}

Answer 1

您的问题看起来是对象引用问题。第三个push不是替换数组中的前一个元素，而是要更新数组所保存的引用，因此数组中的元素正在被更新。

如果删除第三个push，您将看到数组中的第二项仍会更新。

您需要做的是创建一个副本randomPoint然后对其进行更改，或者创建一个新变量。

看看这个SOF 答案应该会更清楚。