Распространение синтаксиса для сложных объектов - PullRequest
Новая
       29

Распространение синтаксиса для сложных объектов

3 голосов
/ 04 апреля 2019

Предположим, у меня есть такой объект 

let store = {
  "articles": [{...}, {...}, ...],
  "errors": { "p1": { "myNewObject":0 }, "p2": {...}, ...}
}

Я хочу использовать Синтаксис для возврата клона этого объекта, где store.errors.p1 - новый объект. Является ли следующий простой способ? 

let newStore = { ...store, ...{ errors: { ...store.errors, p1: { "myNewObject":1 } } } }

Ответы [ 3 ]

4 голосов
/ 04 апреля 2019

Нет, это не самый простой синтаксис для клонирования вашего магазина и создания глубокой копии p1, но он очень близок: 

let newStore = { ...store, ...{ errors: { ...store.errors, p1: { myNewObject: 1 } } } }
//                         ^^^^                                                     ^
//                           |_______ not necessary ________________________________|

Вы можете удалить дополнительный спред и скобки вокруг errors. 

const store = { articles: [{ a: 1 }], errors: { p1: { myNewObject: 0 }, p2: { a: 1 } } }

const newStore = { ...store, errors: { ...store.errors, p1: { myNewObject: 1 } } }

console.log(JSON.stringify(store))
console.log(JSON.stringify(newStore))
0 голосов
/ 04 апреля 2019

Если вы чувствуете, что это не доступно для чтения, вы можете использовать reduce для перебора объекта errors и сначала обновить объект, а затем использовать синтаксис расширения.Это может быть немного больше строк кода, но будет смещено для удобочитаемости. 

const updatedkey = "p1";
const updatedData = {
  "myNewObject": 1
};
const store = {
  "articles": [{
    ...
  }, {
    ...
  }],
  "errors": {
    "p1": {
      "myNewObject": 0
    },
    "p2": {
      ...
    },
  }
};
const updatedErrors = Object.keys(store.errors).reduce((acc, key) => {
  const acc[key] = store.errors[key];

  if (key === updatedkey) {
    acc[key] = {
      ...acc[key],
      ...updatedData
    }
  }

  return acc;
}, {});

const newStore = {
  ...store,
  errors: updatedErrors
};
0 голосов
/ 04 апреля 2019

Вы также можете использовать что-то как lodash.clonedeep , а затем просто изменить это свойство с помощью store.errors.p1 = { "myNewObject": 1}.

Или, если хотите, вы можете создать функцию assocIn (вдохновленную clojue), которая делает это более идиоматическим образом: 

const assocIn = (obj, [key, ...rest], value) => 
    ({...obj, [key]: rest.length == 0 ? value : assocIn(obj[key], rest, value)});
store = assocIn(store, ['errors', 'p1'], { "myNewObject": 1})
...