기존 객체 위에 구조화하는 것이 가능합니까?(Javascript ES6)

기존 객체 위에 구조화하는 것이 가능합니까?(Javascript ES6)

예를 들어 개체가 두 개인 경우:

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

그리고.

var oof = {}

그리고 저는 풋풋에서 x와 y값을 옮기고 싶었습니다.es6 destructuring 구문을 사용하여 그것을 할 수 있는 방법이 있습니까?

아마도 다음과 같은 것이 있을 것입니다.

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

그래도.

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 대신 스프레드 연산자를 사용할 수도 있습니다.

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

아니요, 파괴하는 것은 축약식의 멤버 표현식을 지원하지 않고 현재 시점의 일반 속성 이름만 지원합니다.그러한 논의에 대한 논의가 있었지만 ES6에 들어갈 제안은 없습니다.

그러나 모든 속성이 필요하지 않은 경우에도 사용할 수 있습니다.

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

.Object.assignECMA스크립트의 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바벨을 위한 플러그인.여기 바벨에 대한 데모가 있습니다.

바벨JS 플러그인

바벨을 사용하는 경우JS 이제 내 플러그인을 활성화할 수 있습니다.babel-plugin-transform-object-from-destructuring(설치 및 사용에 대해서는 오후 패키지 참조).

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

객체 예시

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

다른 개체 속성에 직접 할당된 개체를 삭제할 수 있습니다.

작동 예:

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

해라

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

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

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

즉, 원하는 속성을 선택하여 새로운 개체에 넣을 수 있습니다.동시에 이름을 변경할 수도 있는 것과 달리 말입니다.

에 소품을 하면 됩니다.dest웅변을 보다

이건 일종의 속임수지만, 당신은 이런 일을 할 수 있습니다.

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가 지원하는 것은 아닙니다.

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

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

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

을 합니다.stringify배열 형식으로 기능합니다.

MDN Doc for JSON.stringify

그것은 아름다운 방법도 아니고, 제가 추천하는 것도 아니지만, 단지 지식을 위해서 이런 방법으로 가능합니다.

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

구문을 파괴하는 거?예, 한 줄로:

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

var oof = {... {x,y} = foo} 

"foo"에서 "x"와 "y"를 가져와 이를 새 개체로 바꿉니다.

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

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