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

Question

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

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

为什么会发生这种情况，如何创建不影响原始变量的重复变量？我需要保持上述变量不变。所以 object 需要是一个对象，我需要创建一个数组，在该数组中设置为响应，并且它需要在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()

标签： javascriptarraysloopsobjectjavascript-objects

Answer 1

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

1. 使用Array.from()

object.array = Array.from(response);

2. 使用slice()

object.array = response.slice();

3. 使用展开语法 ( ...)

object.array = [...response];

4. 使用JSON.parse/JSON.strigify

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

但是在您的特定情况下，只有最后一个选项会按预期工作，因为您有一个嵌套数组，您需要一个深层副本 element。

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

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