javascript数组似乎改变了我自己

Question

我正在使用P5.js，尝试将一些值保存在数组中，而不是创建该数组的副本进行操作。 不幸的是，当我操纵第二个数组时，原始数组也发生了变化，我不知道为什么。

var particels = []
var particelsCopy = []

function calcInitialPositions(){

  for (var i = 0; i < pixels.length; i+=4) {
    if (pixels[i] == 0){
      var x_ = i  % width
      var y_ = i / width / 2
      var coords_ = {x : x_ , y : y_}
      particels.push(coords_)
    }
  };
}

function setup() {  
  loadPixels()
  calcInitialPositions();
  particelsCopy = particels
}

function draw() {
  for (var i = 0; i < particelsCopy.length; i++) {
    particelsCopy[0].x = 99
  };
  console.log(particel[0].x)
}

控制台打印99

Answer 1

Javascript中的=运算符通过引用而不是按值分配对象（包括数组）。 所以这行：

particelsCopy = particels

重新定义particelsCopy是一个别名particels ....这点之后它们是相同的阵列。 您需要按以下值复制数组：

particelsCopy = particels.slice();

请注意，这只是一个浅表副本，如果数组包含对象或要通过引用复制的数组，则必须在子项上重复此操作（例如coords_ object，尽管对于对象，模式为copy = Object.assign({},original); ）。

要按值深度复制所有内容，必须对对象/数组的每个子级执行此操作。 像jQuery这样的许多库都有现成的函数来帮助实现这一点。

Answer 2

该行：

particelsCopy = particels

复制数组引用，而不是数组元素。

您需要分配一个新的数组对象，然后复制元素。 如果元素是对象，则还必须对其进行浅（或深）复制。 此解决方案使用Object.assign（）进行浅表复制。

particelsCopy = [] // already done previously
for (var i=0; i<particels.length; i++){
   particelsCopy[i] = Object.assign({}, particels[i]};
}

Answer 3

您可以使用解构来复制数组中的对象

particelsCopy = particels.map(obj => ({...obj}));