web-dev-qa-db-ja.com

既存のオブジェクトに分解することは可能ですか？ （Javascript ES6）

たとえば、2つのオブジェクトがある場合：

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

そして

var oof = {}

そして、xとyの値をfooからoofに転送したかったのです。 es6非構造化構文を使用してそれを行う方法はありますか？

おそらく次のようなもの：

oof{x,y} = foo
javascriptecmascript-6destructuring
102
majorBummer

Ugくて少し繰り返しながら、できます

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

fooオブジェクトの2つの値を読み取り、oofオブジェクトのそれぞれの場所に書き込みます。

個人的にはまだ読んでみたい

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

または

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

しかし。

75
loganfsmyth

いいえ、構造化では、省略形のメンバー式はサポートされませんが、現時点では単純なプロパティ名のみがサポートされます。そこには 話し合いがあります esdiscussでのそのようなことについてですが、ES6に入れる提案はありません。

Object.assign を使用できる可能性があります-ただし、独自のプロパティがすべて必要ない場合でも、できます

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

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リクエストにこれを使用します。いくつかの個別のデータのみが必要な場合に使用します。しかし、これを行うにはライナーが1つ必要であることに同意します。

19
Zfalen

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プラグインをbabelに使用する必要があります。 stage-2を使用したbabelのデモ

11
Gaafar

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;
6
Matthias Günter

それは完全に可能です。ただ一つの声明ではありません。

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

4
Hampus Ahlgren

矢印関数で非構造化オブジェクトを返し、Object.assign（）を使用して変数に割り当てることができます。

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

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

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 }

または

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

次のように再構築を使用できます：

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)
1
CampSafari

別のオブジェクト属性に直接割り当てるオブジェクトを破棄できます。

作業例：

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
0
RPichioli

これは一種の不正行為ですが、次のようなことができます...

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

もう1つの完全に異なるルートには、プロトタイプのいじくりが含まれます（注意してください...）：

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

それは美しい方法ではなく、私もお勧めしませんが、知識のためだけにこの方法で可能です。

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

私はこの方法を思いつきました：

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 とは異なり、同時に名前を変更することもできます。

小道具を既存のオブジェクトにコピーする場合は、dest argを設定するだけです。

0
mpen

これは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"
}
0
user1577390

これは、私が思いつく最も読みやすく最短のソリューションです。

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

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

console.log(newProps);

{ isValidDate: 'yes' }を出力します

いつかlet newProps = ({ isValidDate } = props)のようなことを言うことができればいいのですが、残念ながらES6がサポートするものではありません。

0
Patrick Michaelsen