[javascript] 기존 객체로 구조를 변경할 수 있습니까? (자바 스크립트 ES6)

예를 들어 두 개의 객체가있는 경우 :

var foo = {
  x: "bar",
  y: "baz"
}

var oof = {}

x와 y 값을 foo에서 oof로 옮기고 싶었습니다. es6 파괴 구문을 사용하여 그렇게 할 수 있습니까?

아마도 다음과 같은 것 :

oof{x,y} = foo



답변

추악하고 약간 반복적이지만

({x: oof.x, y: oof.y} = foo);

foo객체 의 두 값을 읽고 객체의 해당 위치에 씁니다 oof.

개인적으로 나는 아직도 오히려 읽고

oof.x = foo.x;
oof.y = foo.y;

또는

['x', 'y'].forEach(prop => oof[prop] = foo[prop]);

그러나.


답변

아니요, 구조 해제는 속기의 멤버 표현식을 지원하지 않지만 현재는 일반 속성 이름 만 지원합니다. 그곳에 회담왔다 esdiscuss에 같은 약,하지만 제안 ES6으로하지 않습니다 것입니다.

Object.assign그러나 당신은 사용할 수 있습니다 -당신이 모든 자신의 속성이 필요하지 않은 경우에도 여전히 할 수 있습니다

var foo = …,
    oof = {};
{
    let {x, y} = foo;
    Object.assign(oof, {x, y})
}


답변

IMO 이것은 당신이 찾고있는 것을 성취하는 가장 쉬운 방법입니다.

let { prop1, prop2, prop3 } = someObject;
let data = { prop1, prop2, prop3 };

  // data === { prop1: someObject.prop1, ... }

기본적으로 변수로 구조를 변경 한 다음 이니셜 라이저 속기를 사용하여 새 객체를 만듭니다. 필요 없음Object.assign

어쨌든 이것이 가장 읽기 쉬운 방법이라고 생각합니다. 원하는 정확한 소품을 선택할 수 있습니다 someObject. 기존 객체가있는 경우 소품을 병합하려는 경우 다음과 같이하십시오.

let { prop1, prop2, prop3 } = someObject;
let data = Object.assign(otherObject, { prop1, prop2, prop3 });
    // Makes a new copy, or...
Object.assign(otherObject, { prop1, prop2, prop3 });
    // Merges into otherObject

또 다른 확실한 방법은 다음과 같습니다.

let { prop1, prop2, prop3 } = someObject;
let newObject = { prop1, prop2, prop3 };

// Merges your selected props into otherObject
Object.assign(otherObject, newObject);

나는 POST몇 개의 이산 데이터가 필요한 많은 요청에 이것을 사용 합니다. 그러나 나는 이것을하기위한 하나의 라이너가 있어야한다는 것에 동의합니다.

편집 : 추신-
최근에 첫 번째 단계에서 울트라 디스트 럭처링을 사용하여 복잡한 객체에서 중첩 된 값을 가져올 수 있다는 것을 배웠습니다! 예를 들어 …

let { prop1,
      prop2: { somethingDeeper },
      prop3: {
         nested1: {
            nested2
         }
      } = someObject;
let data = { prop1, somethingDeeper, nested2 };

또한 새 객체를 만들 때 Object.assign 대신 spread 연산자를 사용할 수 있습니다.

const { prop1, prop2, prop3 } = someObject;
let finalObject = {...otherObject, prop1, prop2, prop3 };

또는…

const { prop1, prop2, prop3 } = someObject;
const intermediateObject = { prop1, prop2, prop3 };
const finalObject = {...otherObject, ...intermediateObject };


답변

다른 것보다 Object.assign객체의 확산 구문 ECMAScript를위한 2 단계 제안입니다.

var foo = {
  x: "bar",
  y: "baz"
}

var oof = { z: "z" }

oof =  {...oof, ...foo }

console.log(oof)

/* result
{
  "x": "bar",
  "y": "baz",
  "z": "z"
}
*/

그러나이 기능을 사용하려면 사용을 필요로 stage-2하거나 transform-object-rest-spread바벨을위한 플러그인. 여기 에 바벨에 대한 데모가 있습니다.stage-2


답변

BabelJS 플러그인

BabelJS 를 사용하는 경우 이제 플러그인을 활성화 할 수 있습니다 babel-plugin-transform-object-from-destructuring( 설치 및 사용법은 npm 패키지 참조) ).

이 스레드에서 설명한 것과 동일한 문제가 있었으며 파괴 식에서 객체를 만들 때, 특히 속성의 이름을 바꾸거나 추가하거나 제거해야 할 때 매우 소진되었습니다. 이 플러그인을 사용하면 이러한 시나리오를 유지하는 것이 훨씬 쉬워집니다.

객체 예

let myObject = {
  test1: "stringTest1",
  test2: "stringTest2",
  test3: "stringTest3"
};
let { test1, test3 } = myObject,
  myTest = { test1, test3 };

다음과 같이 쓸 수 있습니다 :

let myTest = { test1, test3 } = myObject;

배열 예

let myArray = ["stringTest1", "stringTest2", "stringTest3"];
let [ test1, , test3 ] = myArray,
  myTest = [ test1, test3 ];

다음과 같이 쓸 수 있습니다 :

let myTest = [ test1, , test3 ] = myArray;


답변

완전히 가능합니다. 한 말로만하지 마십시오.

var foo = {
    x: "bar",
    y: "baz"
};
var oof = {};
({x: oof.x, y: oof.y} = foo); // {x: "bar", y: "baz"}

(문장 주위의 괄호에주의하십시오.) 그러나 코드 골프보다 가독성이 더 중요합니다.

출처 : http://exploringjs.com/es6/ch_destructuring.html#sec_assignment-targets


답변

다음과 같이 구조 조정을 사용할 수 있습니다.

const foo = {x:"a", y:"b"};
const {...oof} = foo; // {x:"a", y:"b"} 

또는 oof에 값이 있으면 두 객체를 병합하십시오.

const foo = {x:"a", y:"b"};
let oof = {z:"c"}
oof = Object.assign({}, oof, foo)