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

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)

화살표 함수에서 비 구조화 된 객체를 반환하고 Object.assign ()을 사용하여 변수에 할당 할 수 있습니다.

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

const oof = Object.assign({}, () => ({ x, y } = foo));

마른

var a = {a1:1, a2: 2, a3: 3};
var b = {b1:1, b2: 2, b3: 3};

const newVar = (() => ({a1, a2, b1, b2})).bind({...a, ...b});
const val = newVar();
console.log({...val});
// print: Object { a1: 1, a2: 2, b1: 1, b2: 2 }

또는

console.log({...(() => ({a1, a2, b1, b2})).bind({...a, ...b})()});

다른 객체 속성에 직접 할당 된 객체를 파괴 할 수 있습니다.

작업 예 :

let user = {};
[user.name, user.username] = "Stack Overflow".split(' ');
document.write(`
1st attr: ${user.name} <br /> 
2nd attr: ${user.username}`);

캐치하려는 것과 동일한 이름의 오브젝트 속성을 사용하여 변수를 사용하여 파기 작업을 수행 할 수 있습니다.

let user = { name: 'Mike' }
let { name: name } = user;

이 방법을 사용하십시오 :

let user = { name: 'Mike' }
let { name } = user;

동일한 속성 이름을 갖는 경우 새 값을 객체 구조에 설정할 수있는 것과 같은 방법입니다.

이 작동 예를보십시오.

// The object to be destructed
let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// Destructing
let {width: w, height: h, title} = options;

// Feedback
document.write(title + "<br />");  // Menu
document.write(w + "<br />");      // 100
document.write(h);                 // 200

이것은 크롬 53.0.2785.89에서 작동합니다

let foo = {
  x: "bar",
  y: "baz"
};

let oof = {x, y} = foo;

console.log(`oof: ${JSON.stringify(oof)});

//prints
oof: {
  "x": "bar",
  "y": "baz"
}

이 방법을 생각해 냈습니다.

exports.pick = function pick(src, props, dest={}) {
    return Object.keys(props).reduce((d,p) => {
        if(typeof props[p] === 'string') {
            d[props[p]] = src[p];
        } else if(props[p]) {
            d[p] = src[p];
        }
        return d;
    },dest);
};

다음과 같이 사용할 수 있습니다.

let cbEvents = util.pick(this.props.events, {onFocus:1,onBlur:1,onCheck:'onChange'});
let wrapEvents = util.pick(this.props.events, {onMouseEnter:1,onMouseLeave:1});

즉, 원하는 속성을 선택하여 새 객체에 넣을 수 있습니다. 달리 _.pick이름을 동시에 바꿀 수도 있습니다.

소품을 기존 객체에 복사하려면 destarg를 설정하십시오 .

이것은 일종의 부정 행위이지만, 이런 식으로 할 수 있습니다 ...

const originalObject = {
  hello: 'nurse',
  meaningOfLife: 42,
  your: 'mom',
};

const partialObject = (({ hello, your }) => {
  return { hello, your };
})(originalObject);

console.log(partialObject); // ​​​​​{ hello: 'nurse', your: 'mom' }​​​​​

실제로, 나는 당신이 그것을 거의 사용하고 싶지 않다고 생각합니다. 다음은 훨씬 더 명확하지만 거의 재미는 없습니다.

const partialObject = {
  hello: originalObject.hello,
  your: originalObject.your,
};

또 다른 완전히 다른 경로는 프로토 타입을 사용한 뭉킹을 포함합니다 (지금 조심하세요).

if (!Object.prototype.pluck) {
  Object.prototype.pluck = function(...props) {
    return props.reduce((destObj, prop) => {
      destObj[prop] = this[prop];

      return destObj;
    }, {});
  }
}

const originalObject = {
  hello: 'nurse',
  meaningOfLife: 42,
  your: 'mom',
};

const partialObject2 = originalObject.pluck('hello', 'your');

console.log(partialObject2); // { hello: 'nurse', your: 'mom' }

이것은 내가 얻을 수있는 가장 읽기 쉽고 가장 짧은 솔루션입니다.

let props = { 
  isValidDate: 'yes',
  badProp: 'no!',
};

let { isValidDate } = props;
let newProps = { isValidDate };

console.log(newProps);

출력됩니다 { isValidDate: 'yes' }

언젠가 let newProps = ({ isValidDate } = props)ES6가 지원하지 않는 것은 아니지만 불행히도 말할 수 있으면 좋을 것 입니다.

그것은 아름다운 방법이 아니며 권장하지는 않지만 지식을 위해서만 가능합니다.

const myObject = {
  name: 'foo',
  surname: 'bar',
  year: 2018
};

const newObject = ['name', 'surname'].reduce(
  (prev, curr) => (prev[curr] = myObject[curr], prev),
  {},
);

console.log(JSON.stringify(newObject)); // {"name":"foo","surname":"bar"}

JSON 클래스 메소드를 사용하여 다음과 같이 달성 할 수 있습니다.

const foo = {
   x: "bar",
   y: "baz"
};

const oof = JSON.parse(JSON.stringify(foo, ['x','y']));
// output -> {x: "bar", y: "baz"}

결과 객체에 추가해야하는 속성을 stringify배열 형식으로 작동하기위한 두 번째 인수로 전달 합니다.

JSON 용 MDN Doc.stringify