Javascript对象插入数据而不破坏[重复]答案

【问题标题】：Javascript Object inserting data without destroying [duplicate]Javascript对象插入数据而不破坏[重复]
【发布时间】：2020-10-06 09:06:21
【问题描述】：

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

parentObject = {}
childOneObject = {starTime, endTime}
childTwoObject = {color, theme, junk}
childThreeObject = {starsInSky, wheelsOnCar, shoesOnFeet}

parentObject应该由所有这些值组成，最后提交。

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

parentObject = childOneObject

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

原始数据明显被破坏。 我想知道是否有一种方法可以将数据块插入到对象中，而不会破坏旧数据或不必像

那样逐行定位目标

parentObject.startTime = 5:00

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

【问题讨论】：

标签： javascript object

【解决方案1】：

只需assign 他们都在父级之上……

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)

【讨论】：

赞成将Number.MAX_VALUE 用于starsInSky

【解决方案2】：

您可以使用spread 运算符。该运算符会将子对象与父对象合并

const parentObject = {};
parentObject = { ...parentObject, ...childOneObject };
parentObject = { ...parentObject, ...childTwoObject };
parentObject = { ...parentObject, ...childThreeObject };

你也可以一步完成

const parentObject = {};
parentObject = { ...parentObject, ...childOneObj, ...childTwoObj, ...childThreeObj };

【讨论】：

【解决方案3】：

在spread operator 的帮助下非常简单。

// Inital  
parentObject = {}

//Step 1:
childOneObject = {starTime, endTime}
parentObject = {...childOneObject};

// Step 2
childTwoObject = {color, theme, junk}
parentObject = {...parentObject, ...childTwoObject}

// Step 3
childThreeObject = {starsInSky, wheelsOnCar, shoesOnFeet}
parentObject = {...parentObject, ...childThreeObject}

【讨论】：

【解决方案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)

【讨论】：