javascript - for 循环中的条件行为不当

Question

这个问题已经有答案了:

What is the most efficient way to deep clone an object in JavaScript? (67 个回答)

已关闭 7 年前。

我认为它应该很简单，但不知何故，我不明白我做错了什么。

我有这个代码:

var currentPosition = {
    x:10000,
    y:10000
};

var directions = "v>v<";
var housesVisited = [{x:10000, y:10000}];

function createHouseCoordinates(data){
    for(var x = 0; x<4; x++){
        if(data[x]=="^"){
           currentPosition.x += 1;  
        } else if(data[x]=="v"){
           currentPosition.x -= 1;
        } else if(data[x]==">"){
           currentPosition.y += 1;
        } else if(data[x]=="<"){
           currentPosition.y -= 1;  
        }
    housesVisited.push(currentPosition);
    }
}

createHouseCoordinates(directions);
console.log(housesVisited);

它应该以符号的形式获取指示，修改当前位置，并创建一个列出所有访问过的位置的对象数组。当我运行它时，上面的结果给了我这个(基本上是结束位置):

[ { x: 10000, y: 10000 },
{ x: 9998, y: 10000 },
{ x: 9998, y: 10000 },
{ x: 9998, y: 10000 },
{ x: 9998, y: 10000 } ]

我期待的是:

[ { x: 10000, y: 10000 },
{ x: 9999, y: 10000 },
{ x: 9999, y: 10001 },
{ x: 9998, y: 10001 },
{ x: 9998, y: 10000 } ]

我做错了什么？我应该读什么才能更好地理解这一点......？提前致谢!

Answer 1

currentPosition 是一个对象。当您对其进行更改时(例如 currentPosition.x += 1)，您始终会更改同一个对象。

然后将其插入数组，但实际上插入的是对该对象的引用，因此数组的所有元素都指向同一个底层对象.

要修复代码，您需要在将对象信息插入数组时将其克隆到新对象中:

housesVisited.push({x: currentPosition.x, y: currentPosition.y});