Объект не заменяется с помощью оператора распространения

Question

Я хочу заменить существующий объект новыми обновленными полями, используя оператор распространения. Но я не получаю правильный результат.

Ниже приведены мои два объекта.

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

Answer 1

Использование 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)

Использование .find () для получения цели obj

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 targetObj = obj1.find(obj => obj.id === newObj.id)

Object.assign(targetObj, newObj);

console.log(obj1)

Answer 2

Синтаксис распространения не заменяет объект в массиве, как вы его использовали.Использование карты - самый простой и понятный способ.Однако, если вы хотите использовать spread syntax, вам сначала нужно найти индекс, который нужно заменить, а затем использовать слайс в массиве

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);

Answer 3

Вы не можете использовать синтаксис распространения таким образом. Одним из решений было бы найти индекс объекта, который вы хотите заменить на свойство 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)

Answer 4

вы должны нормализовать ваши данные по id следующим образом:

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 }

для нормализации вы можете использовать функцию уменьшения следующим образом:

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

Answer 5

Оператор 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)