기존 객체로 구조를 분해 할 수 있습니까?

기존 객체로 구조를 분해 할 수 있습니까? (자바 스크립트 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몇 개의 개별 데이터 만 필요한 요청에 이것을 많이 사용 합니다. 그러나 나는 이것을 위해 하나의 라이너가 있어야한다는 데 동의합니다.

---

다른 것보다 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"
}
*/

그러나이 기능을 사용하려면 babel 을 사용 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"}

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

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

---

You can return the destructured object in an arrow function, and use Object.assign() to assign it to a variable.

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

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

---

You can just use restructuring for that like this:

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

Or merge both objects if oof has values:

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

---

DRY

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 }

or

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

---

This works in chrome 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"
}

---

I came up with this method:

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);
};

Which you can use like this:

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

i.e., you can pick which properties you want out and put them into a new object. Unlike _.pick you can also rename them at the same time.

If you want to copy the props onto an existing object, just set the dest arg.

---

This is kind of cheating, but you can do something like this...

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

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

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

In practice, I think you'd rarely want to use that though. The following is MUCH more clear... but not nearly as fun.

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

Another completely different route, which includes mucking with the prototype (careful now...):

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' }

---

This is the most readable and shortest solution I could come up with:

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

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

console.log(newProps);

It will output { isValidDate: 'yes' }

It would be nice to some day be able to say something like let newProps = ({ isValidDate } = props) but unfortunately it is not something ES6 supports.

---

It's not a beautiful way, nor I recommend it, but it's possible this way, just for knowledge.

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"}

---

You can destruct an object assigning directly to another object attribute.

Working example:

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

You can work with destructing using variables with the same name of object attribute you want to catch, this way you don't need to do:

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

Use this way:

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

The same way you can set new values to object structures if they have the same attribute name.

Look this working example:

// 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

참고URL : https://stackoverflow.com/questions/29620686/is-it-possible-to-destructure-onto-an-existing-object-javascript-es6