如何代表 ID 更新键值 [重复]答案

【问题标题】：How to update key values behalf of Id's [duplicate]如何代表 ID 更新键值 [重复]
【发布时间】：2021-10-04 10:50:16
【问题描述】：

我有这些 JavaScript 对象

var oldObject=[{ 
            id:1,
            key:'name', 
            fiendSize:'6', 
            fromPlaceHolder:'', 
            fieldInstruction:'',
            filedType:'input', 
            lable:"Single Line ", 
            type:'text', 
            formValidation: {
                required:false
            }
        }];


var newObject=  { 
            id:1,
            key:'name', 
            fiendSize:'12', 
            fromPlaceHolder:'Enter Your Name', 
            fieldInstruction:'please Enter string only',
            filedType:'input', 
            lable:"Single Line ", 
            type:'text', 
            formValidation: {
                required:true
            }
        };

我需要用具有相同 id 的 newObject 值替换/更新 oldObject 值。

所以这是我想要得到的结果：

var oldObject = [{ 
            id:1,
            key:'name', 
            fiendSize:'12', 
            fromPlaceHolder:'Enter Your Name', 
            fieldInstruction:'please Enter string only',
            filedType:'input', 
            lable:"Single Line ", 
            type:'text', 
            formValidation: {
                required:true
            }]

如何在 react js 中使用 JavaScript 实现它？

【问题讨论】：

请注意，oldObject 是对象数组，newObject 是单个对象。
也不需要反应特定的代码

标签： javascript arrays reactjs object

【解决方案1】：

您可以使用Object.entries() 喜欢：

var oldObject = [{
  id: 1,
  key: 'name',
  fiendSize: '6',
  fromPlaceHolder: '',
  fieldInstruction: '',
  filedType: 'input',
  lable: "Single Line ",
  type: 'text',
  formValidation: {
    required: false
  }
}];


var newObject = {
  id: 1,
  key: 'name',
  fiendSize: '12',
  fromPlaceHolder: 'Enter Your Name',
  fieldInstruction: 'please Enter string only',
  filedType: 'input',
  lable: "Single Line ",
  type: 'text',
  formValidation: {
    required: true
  }
};

let result = [{}];
for (const [key, value] of Object.entries(oldObject[0])) {
  result[0][key] = newObject[key];
}
console.log(result);

参考：

Object.entries()

附：我使用了新对象，但您可以更新旧对象，并且我对数组编号进行了硬编码，因此如果您有超过 1 个，则需要使用 for-loop。

【讨论】：

【解决方案2】：

使用Array.map 并通过{...existItem, ...newObject} 合并2 个对象。

var oldObject = [{
  id: 1,
  key: 'name',
  fiendSize: '6',
  fromPlaceHolder: '',
  fieldInstruction: '',
  filedType: 'input',
  lable: "Single Line ",
  type: 'text',
  formValidation: {
    required: false
  }
}];

var newObject = {
  id: 1,
  key: 'name',
  fiendSize: '12',
  fromPlaceHolder: 'Enter Your Name',
  fieldInstruction: 'please Enter string only',
  filedType: 'input',
  lable: "Single Line ",
  type: 'text',
  formValidation: {
    required: true
  }
};

var result = oldObject.map(item => {
   var existItem = oldObject.find(e => e.id == newObject.id);
   if (existItem) {
      return {...existItem, ...newObject};
   }
   return item;
});

console.log(result);

【讨论】：

【解决方案3】：

var oldObject = [{
  id: 1,
  key: 'name',
  fiendSize: '6',
  fromPlaceHolder: '',
  fieldInstruction: '',
  filedType: 'input',
  lable: "Single Line ",
  type: 'text',
  formValidation: {
    required: false
  }
}];


var newObject = {
  id: 1,
  key: 'name',
  fiendSize: '12',
  fromPlaceHolder: 'Enter Your Name',
  fieldInstruction: 'please Enter string only',
  filedType: 'input',
  lable: "Single Line ",
  type: 'text',
  formValidation: {
    required: true
  }
};


const findByIdWithIndex = oldObject.findIndex(d => d.id === newObject.id)

if (findByIdWithIndex !== -1) {
  // Found the Old object id Matching with new object id
  oldObject[findByIdWithIndex] = { ...newObject
  }
}

console.log("Updated oldObject :", oldObject)

将使用新对象 ID 找到的索引更新为旧对象 ID 的索引并替换它。

【讨论】：

【解决方案4】：

既然这是 React，你应该关注immutable data structures。

filter把id不匹配的对象取出来，然后添加更新的对象。

const arr = [
  { id: 1, name: 1 },
  { id: 2, name: 2 },
  { id: 3, name: 3 }
];

const newArr = [
  ...arr.filter(obj => obj.id !== 2),
  { id: 2, name: 'Billy Joel' }
];

console.log(newArr);

其他文档

Spread syntax

【讨论】：