javascript - 返回数组时对象数组的对象属性发生变化

Question

我有一个函数可以操作和创建一个对象数组，并为数组中的每个项目添加一个 position 键，但它似乎根本无法正常工作......

我的函数:

var fillQueue = function(choices, currentQueue) {
  var choice, i, positionInQueue, previousTitle, resultQueue;

  resultQueue = [];
  previousTitle = "";

  i = 0;

  while (i < 10) {
    positionInQueue = i + 1;
    console.log('Adding song to position ' + positionInQueue);

    if (currentQueue[i]) {
      previousTitle = currentQueue[i].title;
      currentQueue[i].position = positionInQueue;
      resultQueue.push(currentQueue[i]);
    } else {
      choice = choices[Math.floor(Math.random() * choices.length)];

      if (choice.title !== previousTitle) {
        previousTitle = choice.title;
        choice.position = positionInQueue;
        resultQueue.push(choice);
      } else {
        choice = choices[Math.floor(Math.random() * choices.length)];
        previousTitle = choice.title;
        choice.position = positionInQueue;
        resultQueue.push(choice);
      }
    }

    i++;
  }

  return resultQueue;
};

如果调用正确，代入 choices 和 currentQueue 的值(currentQueue 也可以是空数组)，如下所示，函数返回一个数组，这是预期的，但出于某种原因在其中的每个对象上使用 position 键。

var test = fillQueue([ {title: '1'}, {title: '2'}, {title: '3'}, {title: '4'} ], [ { title: '5', position: 1 } ]);

上面的变量将包含这个:

[ { title: '5', position: 1 },
  { title: '1', position: 9 },
  { title: '3', position: 7 },
  { title: '1', position: 9 },
  { title: '2', position: 10 },
  { title: '2', position: 10 },
  { title: '3', position: 7 },
  { title: '1', position: 9 },
  { title: '1', position: 9 },
  { title: '2', position: 10 } ]

如您所见，它没有将 position 正确地添加到每个对象中。返回数组中的每个对象都应该有一个 position 为 i + 1，但它似乎是从 1 到 10 的某个随机数 - 有些对象甚至有相同的位置。

我试过:

• 将 position 重命名为其他名称，以防它已被 JavaScript 使用
• 确保在 .push 将对象放入数组之前和之后将正确的 position 添加到对象。

这让我很困惑。您的帮助将不胜感激。

fiddle :https://jsfiddle.net/deansheather/jnw8jdf4/

Answer 1

您将引用推送到数组中，因此每次更新 choice.position 时，数组中对同一选项的所有引用都将获得相同的位置值。

要解决这个问题，复制 choice 对象，更新它的位置并将其插入数组，例如

if (choice.title !== previousTitle) {
        previousTitle = choice.title;
        newChoice = objCopyShallow(choice); // see below for copy function
        newChoice.position = positionInQueue;
        resultQueue.push(newChoice);
}

对于这个应用程序，一个简单的复制函数是:

function objCopyShallow(obj) {
  return Object.keys(obj).reduce(function(acc, v) {
      acc[v] = obj[v];
      return acc;
    },{});
}

如果您想了解更深入的内容，这里有一百万个关于“如何复制对象”的问题和答案。