当我从数组中删除一个元素时，为什么它会同时删除该数组和行代码中未提及的另一个数组？

Question

我在从某个数组中删除元素时遇到了问题，但是它从该数组和另一个无关紧要的数组中删除了元素。有人发现问题吗，因为对我来说，它看起来正确并且应该删除元素，"啤酒"来自"附近"阵列，而不是" locations_dictionary [0] .Items" .Items" Array。

var nearby = {
    "looted": false,
    "items": ["Apple","Rusted Sword","Beer","Bronze Sword","Wooden Sword","Excalibur","Bronze Coin"]
};
const locations_dictionary = [
    {
        "name": "City",
        "items": ["Apple","Rusted Sword","Beer","Bronze Sword","Wooden Sword","Excalibur","Bronze Coin"]
    },
    {
        "name": "Forest",
        "items": ["Apple","Stick","Rusted Sword","Corpse","Rusted Dagger"]
    }
];
function Remove_Item_From_Array(a,v) { //a = array, v = value
    for(i = 0; i < a.length; i++) {
        if(a[i] === v) {
            a.splice(i,1);
        }
    }
}
nearby.items.forEach(function(value,index) {
    if("Beer" == value) {
        Remove_Item_From_Array(nearby.items,"Beer");
        return;
    }
})
console.log('nearby array ---> ' , nearby, 'n locations ---> ', locations_dictionary)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

如果我从评论中正确理解，您正在尝试修改nearby.items数组以删除"啤酒"。您遇到的问题是locations_dictionary[0].items也正在修改，因为您使用以下代码分配了nearby.items：

nearby.items = locations_dictionary[0].items

解决方案是复制数组而不是分配。

nearby.items = locations_dictionary[0].items.slice(0)
// or if you're using es6
nearby.items = [...locations_dictionary[0].items]

另一个选项（甚至除此之外）是使用Array#Filter过滤"啤酒"字符串。实际上，这返回了数组的新副本，而无需修改原件。因此，您可以将其分配给nearby.items或将其用作单独的变量。

let items0 = ["Apple","Rusted Sword","Beer","Bronze Sword","Wooden Sword","Excalibur","Bronze Coin"]
var nearby = {
    "looted": false,
    "items": items0
};
const locations_dictionary = [
    {
        "name": "City",
        "items": items0
    },
    {
        "name": "Forest",
        "items": ["Apple","Stick","Rusted Sword","Corpse","Rusted Dagger"]
    }
];
nearby.items = nearby.items.filter(function(value,index) {
    return value !== "Beer"
})
console.log('nearby array ---> ' , nearby, 'n locations ---> ', locations_dictionary)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

您的代码看起来不错。我在JSBIN上运行了您的确切代码，并在附近和位置登录了：

[object Object] {
  items: ["Apple", "Rusted Sword", "Bronze Sword", "Wooden Sword", "Excalibur", "Bronze Coin"],
  looted: false
}
[[object Object] {
  items: ["Apple", "Rusted Sword", "Beer", "Bronze Sword", "Wooden Sword", "Excalibur", "Bronze Coin"],
  name: "City"
}, [object Object] {
  items: ["Apple", "Stick", "Rusted Sword", "Corpse", "Rusted Dagger"],
  name: "Forest"
}]

看起来附近的物品中没有啤酒，但是位置的第一批物品是dictionary Array。也许问题不是代码。

Answer 3

如评论部分所讨论的，您的问题似乎是nearby.items指向内存中与location_dictionary[0].items相同的数组。

这意味着，如果您更改nearby.items指向内存中指向的数组，则location_dictionary[0].items数组也将更改（因为它们共享相同的数组）和反之亦然。

因此，解决此问题的解决方案是为nearby.items创建一个唯一的数组，以便当您更改nearby.items时，它不会修改相同的数组。

您可以使用差异语法来做到这一点：

nearby.items = [...location_dictionary[0]]

这将使它成为nearby.items在内存中引用其自己独特的数组，并且与location_dictionary[0].items数组没有连接/联系

这里有一些示例，可以帮助您了解发生了什么：

let a = [1, 2, 3]; // create array [1, 2, 3] and store it in memory, make "a" point to this array
let b = a; // make "b" point to the same array in memory that a is pointing to
b[0] = 4; // change index 0 of the array in memory
console.log(a); // change because a and b share the same array
console.log(b); // expected change

使用差异语法，您可以创建自己的唯一数组：

let a = [1, 2, 3]; // create array [1, 2, 3] and store it in memory, make "a" point to this array
let b = [...a]; // create a new array which has the same contents as "a" in memory
b[0] = 4; // change index 0 of b
console.log(a); // didn't change bcause it has its own unqieu reference
console.log(b); // expected change