javascript - 为什么这个 for 循环添加的嵌套对象比预期更多？

Question

我在这里回答了一个问题，我想出了如何使用 map() 和展开 (...) 运算符来做到这一点，但我想以更命令式的方式写它。我将向您展示 (1) 我所写的内容，(2) 我期望的结果，然后 (3) 实际结果。

(1) 我写的内容:

    const arrayOfObjects = [
        { var1: 1, var2: 2 },
        { var1: 3, var2: 4 },
        { var1: 5, var2: 6 },
        { var1: 7, var2: 8 }
    ]
    
    const newArray = []
    
    const length = arrayOfObjects.length
    
    for (let i = 0; i < length; i++) {
        if (i < (length - 1)) {
            newArray.push(arrayOfObjects[i])
            newArray[i].child = arrayOfObjects[i+1]
        } else {
            newArray.push(arrayOfObjects[i])
        }
    }
    
    console.log(newArray)

(2) 所以预期结果是这样的:

[ { var1: 1,
    var2: 2,
    child: { var1: 3, var2: 4 } },
  { var1: 3,
    var2: 4,
    child: { var1: 5, var2: 6 } },
  { var1: 5, var2: 6, child: { var1: 7, var2: 8 } },
  { var1: 7, var2: 8 } ]

(3)但是实际结果是这样的:

[ { var1: 1,
    var2: 2,
    child: { var1: 3, var2: 4, child: [Object] } },
  { var1: 3,
    var2: 4,
    child: { var1: 5, var2: 6, child: [Object] } },
  { var1: 5, var2: 6, child: { var1: 7, var2: 8 } },
  { var1: 7, var2: 8 } ]

如果您要检查新数组的第一个索引，console.log(newArray[0])您会看到它一直向下添加了一个子对象:

{ var1: 1,
  var2: 2,
  child: 
   { var1: 3,
     var2: 4,
     child: { var1: 5, var2: 6, child: [Object] } } }

我觉得我错过了一些非常明显的东西，但我一生都无法弄清楚!预先感谢:)

Answer 1

你需要这样做

Object are assigned by reference not by value.so in order to assign value you need to create a copy of it and than assign it.

 newArray[i].child = Object.assign({},arrayOfObjects[i+1])

所以这里Object.assign将创建一个arrayOfObjects.的副本，所以现在当你分配时它将按值分配。

const arrayOfObjects = [
    { var1: 1, var2: 2 },
    { var1: 3, var2: 4 },
    { var1: 5, var2: 6 },
    { var1: 7, var2: 8 }
]

const newArray = []

const length = arrayOfObjects.length

for (let i = 0; i < length; i++) {
    if (i < (length - 1)) {
        newArray.push(arrayOfObjects[i])
        newArray[i].child = Object.assign({},arrayOfObjects[i+1])
    } else {
        newArray.push(arrayOfObjects[i])
    }
}

console.log(newArray)

还有另一种方法可以使用 ... 运算符来完成此操作。

const arrayOfObjects = [
    { var1: 1, var2: 2 },
    { var1: 3, var2: 4 },
    { var1: 5, var2: 6 },
    { var1: 7, var2: 8 }
]

const newArray = []

const length = arrayOfObjects.length

for (let i = 0; i < length; i++) {
    if (i < (length - 1)) {
        newArray.push(arrayOfObjects[i])
        newArray[i].child = {...arrayOfObjects[i]};
    } else {
        newArray.push(arrayOfObjects[i])
    }
}

console.log(newArray)