Javascript对象插入数据而不破坏

Question

所以假设我有四个组件，三个孩子和一个父母。

parentObject = {}

childOneObject = {starTime, endTime}

childTwoObject = {color, theme, junk}

childThreeObject = {starsInSky, wheelsOnCar, shoesOnFeet}

parentObject 应该由所有这些值组成以最终提交。

在第一个组件结束时，用户将提交他们的数据，并将其添加到 parentObject。看起来像这样

parentObject = childOneObject

用户将继续执行第二步并提交与第一步相同的信息，但如果我写 parentObject = childTwoObject

原始数据显然被破坏了。我想知道是否有一种方法可以将数据块插入到对象中，而不会破坏旧数据或不必逐行定位对象，例如

parentObject.startTime = 5:00

我不喜欢这样做，因为这对我来说很麻烦。

Answer 1

只需将它们全部分配在父级之上……let parentObject = {}let childOneObject = {startTime: 0, endTime: 1}let childTwoObject = {color: 'red', theme: 'dark', junk: true}let childThreeObject = {starsInSky: Number.MAX_VALUE, wheelsOnCar: 4, shoesOnFeet: 2}Object.assign(parentObject, childOneObject, childTwoObject, childThreeObject)console.log(parentObject)

Answer 2

您可以使用扩展运算符。该运算符将子对象与父对象合并const parentObject = {};parentObject = { ...parentObject, ...childOneObject };parentObject = { ...parentObject, ...childTwoObject };parentObject = { ...parentObject, ...childThreeObject };你也可以一步完成const parentObject = {};parentObject = { ...parentObject, ...childOneObj, ...childTwoObj, ...childThreeObj };

Answer 3

在展开运算符的帮助下，这非常简单。// Inital  parentObject = {}//Step 1:childOneObject = {starTime, endTime}parentObject = {...childOneObject};// Step 2childTwoObject = {color, theme, junk}parentObject = {...parentObject, ...childTwoObject}// Step 3childThreeObject = {starsInSky, wheelsOnCar, shoesOnFeet}parentObject = {...parentObject, ...childThreeObject}

Answer 4

const parentObject = {}const childOneObject = {starTime: 0, endTime: 1}const childTwoObject = {color:'red', theme:'dark', junk:false}const childThreeObject = {starsInSky:2, wheelsOnCar:4, shoesOnFeet:2}const assignKeyVals = (parent, child) => {   Object.entries(child).forEach(([key,val]) => parent[key] = val)}assignKeyVals(parentObject, childOneObject)assignKeyVals(parentObject, childTwoObject)assignKeyVals(parentObject, childThreeObject)console.log(parentObject)