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

Question

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

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

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

这是我的代码：

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);

1. 使用slice()

object.array = response.slice();

1. 使用spread syntax (...)

object.array = [...response];

4. 使用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()

Answer 2

object.array = 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()

Answer 3

有一个difference between "shallow copies" and "deep copies/clones"。

从上面的链接复制：

浅拷贝

浅拷贝是对象的按位拷贝。创建了一个新对象，该对象具有原始对象中值的精确副本。如果对象的任何字段是对其他对象的引用，则仅复制引用地址，即仅复制内存地址。

深拷贝

深拷贝复制所有字段，并复制字段指向的动态分配内存。当一个对象连同它所引用的对象一起被复制时，就会发生深拷贝。

在这里您可以找到有关如何进行深度克隆的更多信息：What is the most efficient way to deep clone an object in JavaScript?

一个可能的解决方案：

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()

function runThisLoop () {

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


    var object = {}
    object.array = response.map(x => x);

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

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

runThisLoop()