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_对象上重复此操作，尽管对于对象，模式为{ {1}}。

要按值深度复制所有内容，必须对对象/数组的每个子级执行此操作。像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}));

javascript数组似乎改变了我自己

3 个答案: