javascript - javascript - 不使用扩展运算符替换对象

使用扩展运算符将现有对象替换为新的更新字段, 但我没有得到正确的结果。

下面是我的两个对象,


let obj1 = [


 {


 "id": 1,


 "name":"Michel",


 "age": 34,


 "email":"michel@gmail.com"


 },


 {


 "id": 2,


 "name":"Abby",


 "age": 40,


 "email":"abby@gmail.com"


 },


 {


 "id": 3,


 "name":"Gary",


 "age": 40,


 "email":"abby@gmail.com"


 }


]



let newObj = {


 "id": 3,


 "name":"Gary",


 "age": 23,


 "email":"gary@gmail.com"


}



我可以用.map实现, 下面是我的代码,


let result = obj1.map(item => {


 if (item.id === newObj.id) {


 return {...item,. ..newObj};


 }


 return item;


});



但是,我不想运行循环,只希望通过扩展运算符来实现,

这是行不通的。它不是在替换对象, 而是变成了创建一个。


[...obj1, newObj];



有人能帮一下忙吗?

JSBIN代码段

时间:

使用 Object.assign

Object.assign()方法用于将所有可枚举自身属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。


let obj1 = [


 {


 "id": 1,


 "name":"Michel",


 "age": 34,


 "email":"michel@gmail.com"


 },


 {


 "id": 2,


 "name":"Abby",


 "age": 40,


 "email":"abby@gmail.com"


 },


 {


 "id": 3,


 "name":"Gary",


 "age": 40,


 "email":"abby@gmail.com"


 }


]



let newObj = {


 "id": 3,


 "name":"Gary",


 "age": 23,


 "email":"gary@gmail.com"


}



Object.assign(obj1[2], newObj);



console.log(obj1)

Spread语法不会像使用数组那样替换数组中的对象, 使用映射是最简单和可理解的方法。 但是,如果你想使用 spread syntax,首先需要找到要替换的索引,然后在数组中使用 slice,


let obj1 = [


 {


 "id": 1,


 "name":"Michel",


 "age": 34,


 "email":"michel@gmail.com"


 },


 {


 "id": 2,


 "name":"Abby",


 "age": 40,


 "email":"abby@gmail.com"


 },


 {


 "id": 3,


 "name":"Gary",


 "age": 40,


 "email":"abby@gmail.com"


 }


]



let newObj = {


 "id": 3,


 "name":"Gary",


 "age": 23,


 "email":"gary@gmail.com"


}



const idx = obj1.findIndex(item => item.id === newObj.id);



obj1 = [...obj1.slice(0, idx), newObj,. ..obj1.slice(idx + 1)];



console.log(obj1);

Spread操作符是魔术,但是,它不会做任何你想要的,你必须循环,并且替换对象, 而不是做map(),我宁愿find()。使用 Object.assign() 实现你想要的功能。


let obj1 = [


 {


 "id": 1,


 "name":"Michel",


 "age": 34,


 "email":"michel@gmail.com"


 },


 {


 "id": 2,


 "name":"Abby",


 "age": 40,


 "email":"abby@gmail.com"


 },


 {


 "id": 3,


 "name":"Gary",


 "age": 40,


 "email":"abby@gmail.com"


 }


]



let newObj = {


 "id": 3,


 "name":"Gary",


 "age": 23,


 "email":"gary@gmail.com"


}



let foundOb = obj1.find(e => e.id === newObj.id);



Object.assign(foundOb, newObj)


console.log(obj1)

你应该按以下方式对数据进行规范化:


obj1 = {


 1: {


 "id": 1,


 "name":"Michel",


 "age": 34,


 "email":"michel@gmail.com"


 },


 2: {


 "id": 2,


 "name":"Abby",


 "age": 40,


 "email":"abby@gmail.com"


 },


 3: {


 "id": 3,


 "name":"Gary",


 "age": 40,


 "email":"abby@gmail.com"


 }


}



newObj = {


 3: {


 "id": 3,


 "name":"Gary",


 "age": 23,


 "email":"gary@gmail.com"


 }


}



通过这种方式,你可以使用扩展运算符:


 {. ..obj1,. ..newObj }



为了规范化,可以使用以下方法来使用reduce函数:


const normalized = obj1.reduce((result, obj) => ({. ..result, [obj.id]: obj }), {})



你不能以这种方式使用扩展语法, 一个解决方案是查找要用id属性替换的对象的索引,然后用slice方法使用方法创建新的数组。


let obj1 = [{"id":1,"name":"Michel","age":34,"email":"michel@gmail.com"},{"id":2,"name":"Abby","age":40,"email":"abby@gmail.com"},{"id":3,"name":"Gary","age":40,"email":"abby@gmail.com"}]


let newObj = {"id":3,"name":"Gary","age":23,"email":"gary@gmail.com"}



const index = obj1.findIndex(({id}) => id == newObj.id)


const result = [...obj1.slice(0, index), newObj,. ..obj1.slice(index + 1)]



console.log(result)
...