javascript : . 过滤器更新原始数组中的对象？

Question

我正在为学校创建一个小游戏，我正在创建一个由 100 个图 block 组成的棋盘，它们是 JS 对象。其中一些图 block 被随机阻挡(这是它们的属性之一)。玩家无法进入其中。

我也需要在这些图 block 上随机放置 4 个武器。

所以我创建了一系列未被阻挡的图 block ，然后我将我的武器一个接一个地放在这些空闲图 block 上。为了确保其中一个图 block 上还没有武器，我使用 .filter() 创建一个新的未阻塞且空的图 block 数组(没有武器)。

问题是，当我更新新数组中的图 block 属性时(由 .filter 发出，以确保同一位置上不会有两个武器)，它会更新以下图 block 的属性:父数组，我不明白。我读过 .filter() 方法不会更新父数组，但在这里它会更新？也许是因为它是一个 JS 对象？

感谢您的澄清!

let tilesUnblocked = []
//here function creating tiles and pushing unblocked tiles in the array above
for (i = 0; i < weapons.length; i++) {
    let tilesUnblockedAndEmpty = tilesUnblocked.filter(tile => tile.weapon === false) 
    let randomInt = Math.round(tilesUnblockedAndEmpty.length * Math.random())
    let weaponElt = weapons[i].HTMLElement
    weaponElt.css({ //some css })
    tilesUnblockedAndEmpty[randomInt].HTMLElement.append(weaponElt)
    tilesUnblockedAndEmpty[randomInt].weapon = true //updating array created from filter
    tilesUnblockedAndEmpty[randomInt].weaponType = weapons[i].name //updating array created from filter
}
console.log(tilesUnblocked) //I will find in this array the objects updated at the end of the foor loop, on the array issued of .filter method !

Answer 1

Maybe it's because it's a JS object ?

是的。如果你有这个:

const original = [
    {example: 42},
    {example: 21}
];

你的内存中有这样的东西:

               +−−−−−−−−−+original−−−−−−>| (array) |               +−−−−−−−−−+          +−−−−−−−−−−−−−+               | 0       |−−−−−−−−−>|  (object)   |               | 1       |−−+       +−−−−−−−−−−−−−+               +−−−−−−−−−+  |       | example: 42 |                            |       +−−−−−−−−−−−−−+                            |       +−−−−−−−−−−−−−+                            +−−−−−−>|  (object)   |                                    +−−−−−−−−−−−−−+                                    | example: 21 |                                    +−−−−−−−−−−−−−+

If you then do this:

const filtered = original.filter(entry => entry.example !== 42);

你有:

               +−−−−−−−−−+original−−−−−−>| (array) |               +−−−−−−−−−+          +−−−−−−−−−−−−−+               | 0       |−−−−−−−−−>|  (object)   |               | 1       |−−+       +−−−−−−−−−−−−−+               +−−−−−−−−−+  |       | example: 42 |                            |       +−−−−−−−−−−−−−+                            |       +−−−−−−−−−−−−−+                            +−−−−−−>|  (object)   |                            |       +−−−−−−−−−−−−−+                            |       | example: 21 |                            |       +−−−−−−−−−−−−−+               +−−−−−−−−−+  |filtered−−−−−−>| (array) |  |               +−−−−−−−−−+  |               | 0       |−−+               +−−−−−−−−−+

As you can see, both arrays are pointing to the same object. If you change that object's state (by adding or changing a property, for instance), that change is visible through both arrays.

If you want the filtered array to have copies, you have to do that explicitly:

const filtered = original
    .filter(entry => entry.example !== 42)
    .map(entry => ({...entry});

这只是复制对象的一种方法，this question 的答案中还涵盖了其他几种方法。 .