Почему это для цикла добавления большего количества вложенных объектов, чем ожидалось?

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

Это необходимо сделать

Объект назначается по ссылке, а не по значению. Поэтому для присвоения значения необходимо создать его копию, а затем назначить его.

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

Таким образом, здесь Object.assign создаст копию arrayOfObjects.so, теперь, когда вы назначаете его, он будет назначен по значению.

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)