Что { ...obj1, obj2 } делает именно

Question

Допустим, у нас есть два объекта:

const state = {
  fishes: { /* some obj data */ },
  animals: { /* some obj data  */ }

const animals = { /* some NEW data */ }

В Vuex есть метод replaceState(), который согласно документации принимает один аргумент и заменяет состояние этим объектом.

Что будет результатом следующего:

replaceState({ ...state, animals })

Более конкретно, что делает { ...state, animals } делать точно?

Чтобы привести некоторый контекст, я взял этот пример из ответа на этот вопрос. В этом вопросе пользователь хотел заменить animals собственность государства с новым объектом animals,

Я не уверен, относится ли это к Vuex / Vue.js, или это чистый вопрос JS, но я все равно помечу его как vue.js.

Answer 1

Это на самом деле из синтаксиса распространения ECMAScript 2018 и деструктуризации объектов ECMAScript 2015.

{ ...state, animals } создает неглубокую копию state объект с новым свойством под названием animals (с ценностью животного объекта в нем).

Поскольку вы являетесь пользователем Vuex, это соответствует правилу шаблонов неизменяемого обновления s, которое предотвращает изменение или изменение "исходного" объекта состояния. Вы должны прочитать о способах обработки общих операций, таких как добавление / обновление / удаление, используя неизменный шаблон.

Answer 2

Это значит Object.assign({}, state, { animals: animals} },

Answer 3

Что делает, это распространяет все свойства state в новый объект - создание мелкой копии. Все свойства в исходном объекте (state) будет скопирован в новый объект (тот, в который вы передаете replaceState). Вот простая демонстрация:

let obj1 = { obj: "1" };
let obj2 = { ...obj1, obj2: true };
console.log(obj1);
console.log(obj2);

animals bit является сокращением свойства ES6 и по существу будет делать это:

animals: animals

Это просто более чистый синтаксис.