{...obj1, obj2}의 정확한 기능

{...obj1, obj2}의 정확한 기능

이 질문에는 이미 답변이 있습니다.

점 3개가 있는 Javascript 속성(...) (4개의 답변)

닫힘2년 전에요.

2개의 오브젝트가 있다고 칩시다.

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로 태그를 붙입니다.

이것은 실제로 ECMAScript 2018의 확산 구문과 ECMAScript 2015의 객체 파괴에서 나온 것입니다.

{ ...state, animals }의 얕은 복사본을 만듭니다.state오브젝트, 라고 하는 새로운 속성을 가진animals(그 안에 동물의 가치가 있는 것)

Vuex 사용자이므로 이는 '원래' 상태 개체가 변경되거나 변환되지 않도록 하는 불변의 업데이트 패턴 규칙을 준수합니다.add/update/delete와 같은 일반적인 작업을 처리하는 방법을 불변의 패턴을 사용하여 자세히 읽어보십시오.

즉,Object.assign({}, state, { animals: animals} }.

그게 하는 일은 모든 성질을 퍼트리는 겁니다state새로운 오브젝트로 변환하여 얕은 카피를 만듭니다.원래 객체의 모든 속성(state는, 새로운 오브젝트(전송처의 오브젝트)에 카피됩니다.replaceState간단한 데모를 소개합니다.

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

그animalsbit는 ES6 속성 약자로 기본적으로 다음과 같은 작업을 수행합니다.

animals: animals

더 깔끔한 구문일 뿐이죠

언급URL : https://stackoverflow.com/questions/55685270/what-does-obj1-obj2-do-exactly