javascript for循环更改原始列表变量

Question

我有一个名为响应的对象集合，我正在创建另一个名为 object 的变量，它是一个空对象，并创建 object.array 并将其设置为响应变量。

我认为我正在创建一个新的范围。但是，如果我将 object.array 内的年龄设置为 null，则会将响应数组中的年龄设置为 null。

为什么会发生这种情况？如何创建一个不影响原始变量的重复变量？我需要保持上述变量不变。因此，对象需要是一个对象，我需要创建一个数组，在其中设置响应，并且它需要位于 for 循环 内。

这是我的代码:

function runThisLoop () {

    var response = [{
        name: 'Name A',
        age: 2
    },
    {
        name: 'Name B',
        age: 7
    }]


    var object = {}
    object.array = response

    for (var val of object.array) {
        val.age = null
    }

    console.log("response", response)
    console.log("object.array", object.array)
}

runThisLoop()

Answer 1

您只是通过引用复制它们，这意味着它们位于内存中的同一位置，因此无论您尝试修改其中一个，另一个都会被修改，为了防止这种情况发生，您应该通过您通过以下任一方式:

1. 使用Array.from()

object.array = Array.from(response);

使用slice()

object.array = response.slice();

使用spread syntax (...)

object.array = [...response];

使用JSON.parse/JSON.strigify

object.array = JSON.parse(JSON.stringify(response));

但在您的特定情况下，只有最后一个选项可以按预期工作因为您有一个嵌套数组，所以您需要元素的深拷贝。

所以最终的结果应该是这样的:

function runThisLoop() {

  var response = [{
      name: 'Name A',
      age: 2
    },
    {
      name: 'Name B',
      age: 7
    }
  ]


  var object = {}
  object.array = JSON.parse(JSON.stringify(response));

  for (var val of object.array) {
    val.age = null
  }

  console.log("response", response)
  console.log("object.array", object.array)
}

runThisLoop()