blocks|key|4516528|text|不，解构不支持速记形式的成员表达式，但目前只支持普通的属性名称。在ES6上有关于这方面的讨论，但没有提案将其纳入ES6讨论。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4516529|您也许能够使用Object.assign+-如果您不需要所有自己的属性，您仍然可以这样做|offset|length|style|CODE|4516530|var+foo+=+…,
++++oof+=+{};
{
++++let+{x,+y}+=+foo;
++++Object.assign(oof,+{x,+y})
}|code-block|syntax|javascript|4516531|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign^0|0|7|D|7|D|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@$D|W|E|X|F|G]]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|H|3|I|5|J|7|11|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>No, destructuring does not support member expressions in shorthands but only plain propertynames at the current time. There <a href="https://mail.mozilla.org/pipermail/es-discuss/2015-March/042195.html" rel="noreferrer">have been talks</a> about such on esdiscuss, but no proposals will make it into ES6.</p>

<p>You might be able to use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign" rel="noreferrer"><code>Object.assign</code></a> however - if you don't need all own properties, you still can do</p>

<pre><code>var foo = …,
    oof = {};
{
    let {x, y} = foo;
    Object.assign(oof, {x, y})
}
</code></pre>


blocks|key|9014|text|这适用于chrome+53.0.2785.89|type|unstyled|depth|inlineStyleRanges|entityRanges|data|9015|​|9016|++++let+foo+=+{
++++++x:+"bar",
++++++y:+"baz"
++++};
++++
++++let+oof+=+{x,+y}+=+foo;
++++
++++console.log(`oof:+${JSON.stringify(oof)}`);
++++
++++//prints+oof:+{+"x":+"bar",+"y":+"baz"}|code-block|syntax|javascript|9017|9018|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>This works in chrome 53.0.2785.89</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    let foo = {
      x: "bar",
      y: "baz"
    };
    
    let oof = {x, y} = foo;
    
    console.log(`oof: ${JSON.stringify(oof)}`);
    
    //prints oof: { "x": "bar", "y": "baz"}</code></pre>
</div>
</div>
</p>


blocks|key|9034|text|除了Object.assign之外，还有object+spread+syntax，这是ECMAScript的第二阶段提案。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|9035|​|9036|++++var+foo+=+{
++++++x:+"bar",
++++++y:+"baz"
++++}
++++
++++var+oof+=+{+z:+"z"+}
++++
++++oof+=++{...oof,+...foo+}
++++
++++console.log(oof)

++++/*+result+
++++{
++++++"x":+"bar",
++++++"y":+"baz",
++++++"z":+"z"
++++}
++++*/|code-block|syntax|javascript|9037|9038|但是要使用这个特性，你需要使用stage-2或transform-object-rest-spread插件。这是一个demo+on+babel+with+stage-2|9039|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/sebmarkbage/ecmascript-rest-spread#spread-properties|1|https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015,stage-2&experimental=false&loose=false&spec=false&code=var%2520foo%2520=%2520{%2520%2520x:^0|2|D|K|K|0|0|0|0|0|F|7|N|S|25|7|1M|Q|1|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@$9|12|A|13|1|14]]|E|$]]|$1|F|3|G|5|6|7|15|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|18|8|@$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]]|D|@$9|1F|A|1G|1|1H]]|E|$]]|$1|P|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]|X|$5|S|T|U|E|$V|Y]]]]

<p>Other than <code>Object.assign</code> there is the <a href="https://github.com/sebmarkbage/ecmascript-rest-spread#spread-properties" rel="nofollow noreferrer">object spread syntax</a> which is a Stage 2 proposal for ECMAScript.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    var foo = {
      x: "bar",
      y: "baz"
    }
    
    var oof = { z: "z" }
    
    oof =  {...oof, ...foo }
    
    console.log(oof)

    /* result 
    {
      "x": "bar",
      "y": "baz",
      "z": "z"
    }
    */</code></pre>
</div>
</div>
</p>
<p>But to use this feature you need to use <code>stage-2</code> or <code>transform-object-rest-spread</code> plugin for babel. Here is a <a href="https://babeljs.io/repl/#?babili=false&amp;evaluate=true&amp;lineWrap=false&amp;presets=es2015%2Cstage-2&amp;experimental=false&amp;loose=false&amp;spec=false&amp;code=var%20foo%20%3D%20%7B%0A%20%20x%3A%20%22bar%22%2C%0A%20%20y%3A%20%22baz%22%0A%7D%0A%0Avar%20oof%20%3D%20%7B%20z%3A%20%22z%22%20%7D%0A%0Aoof%20%3D%20%20%7B...oof%2C%20...foo%20%7D%0A%0Aconsole.log(oof)" rel="nofollow noreferrer">demo on babel with <code>stage-2</code></a></p>


blocks|key|9082|text|虽然丑陋且有点重复，但您可以这样做|type|unstyled|depth|inlineStyleRanges|entityRanges|data|9083|({x:+oof.x,+y:+oof.y}+=+foo);|code-block|syntax|javascript|9084|它将读取foo对象的两个值，并将它们写到oof对象上各自的位置。|offset|length|style|CODE|9085|就我个人而言，我还是更喜欢阅读|9086|oof.x+=+foo.x;
oof.y+=+foo.y;|9087|或|9088|['x',+'y'].forEach(prop+=>+oof[prop]+=+foo[prop]);|9089|不过。|9090|entityMap^0|0|0|4|3|K|3|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@$I|11|J|12|K|L]|$I|13|J|14|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|17|8|@]|9|@]|A|$]]|$1|S|3|T|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|19|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|X|$]]

<p>While ugly and a bit repetitive, you can do</p>

<pre><code>({x: oof.x, y: oof.y} = foo);
</code></pre>

<p>which will read the two values of the <code>foo</code> object, and write them to their respective locations on the <code>oof</code> object.</p>

<p>Personally I'd still rather read</p>

<pre><code>oof.x = foo.x;
oof.y = foo.y;
</code></pre>

<p>or</p>

<pre><code>['x', 'y'].forEach(prop =&gt; oof[prop] = foo[prop]);
</code></pre>

<p>though.</p>


blocks|key|9127|text|我想出了这个方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|9128|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);
};|code-block|syntax|javascript|9129|它可以像这样使用：|9130|let+cbEvents+=+util.pick(this.props.events,+{onFocus:1,onBlur:1,onCheck:'onChange'});
let+wrapEvents+=+util.pick(this.props.events,+{onMouseEnter:1,onMouseLeave:1});|9131|也就是说，你可以选择你想要的属性，并将它们放入一个新的对象中。与_.pick不同的是，您还可以同时重命名它们。|offset|length|style|CODE|9132|如果要将道具复制到现有对象上，只需设置dest参数。|9133|entityMap|0|LINK|mutability|MUTABLE|url|https://lodash.com/docs/4.17.4#pick^0|0|0|0|0|W|6|W|6|0|0|J|4|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@$M|15|N|16|O|P]]|9|@$M|17|N|18|1|19]]|A|$]]|$1|Q|3|R|5|6|7|1A|8|@$M|1B|N|1C|O|P]]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>I came up with this method:</p>

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

<p>Which you can use like this:</p>

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

<p>i.e., you can pick which properties you want out and put them into a new object. Unlike <a href="https://lodash.com/docs/4.17.4#pick" rel="nofollow noreferrer"><code>_.pick</code></a> you can also rename them at the same time.</p>

<p>If you want to copy the props onto an existing object, just set the <code>dest</code> arg.</p>


blocks|key|9168|text|这是一种作弊，但你可以这样做...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|9169|const+originalObject+=+{
++hello:+'nurse',
++meaningOfLife:+42,
++your:+'mom',
};

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

console.log(partialObject);+//+​​​​​{+hello:+'nurse',+your:+'mom'+}​​​​​|code-block|syntax|javascript|9170|但在实践中，我认为您很少会想要使用它。下面是更清楚的.但并不是那么有趣。|9171|const+partialObject+=+{
++hello:+originalObject.hello,
++your:+originalObject.your,
};|9172|另一条完全不同的路线，包括摆弄原型(现在小心……)：|9173|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'+}|9174|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>This is kind of cheating, but you can do something like this...</p>

<pre><code>const originalObject = {
  hello: 'nurse',
  meaningOfLife: 42,
  your: 'mom',
};

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

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

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

<pre><code>const partialObject = {
  hello: originalObject.hello,
  your: originalObject.your,
};
</code></pre>

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

<pre><code>if (!Object.prototype.pluck) {
  Object.prototype.pluck = function(...props) {
    return props.reduce((destObj, prop) =&gt; {
      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' }
</code></pre>


blocks|key|4516783|text|可以在箭头函数中返回非结构化对象，然后使用Object.assign()将其赋给变量。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4516784|const+foo+=+{
++x:+"bar",
++y:+"baz"
}

const+oof+=+Object.assign({},+()+=>+({+x,+y+}+=+foo));|code-block|syntax|javascript|4516785|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>const foo = {
  x: "bar",
  y: "baz"
}

const oof = Object.assign({}, () =&gt; ({ x, y } = foo));
</code></pre>


blocks|key|4516805|text|你可以像这样使用重构：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4516806|const+foo+=+{x:"a",+y:"b"};
const+{...oof}+=+foo;+//+{x:"a",+y:"b"}+|code-block|syntax|javascript|4516807|或者，如果oof具有值，则合并这两个对象：|4516808|const+foo+=+{x:"a",+y:"b"};
let+oof+=+{z:"c"}
oof+=+Object.assign({},+oof,+foo)|4516809|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>You can just use restructuring for that like this:</p>

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

<p>Or merge both objects if oof has values:</p>

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


blocks|key|4516828|text|这是我能想到的最具可读性和最简短的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4516829|let+props+=+{+
++isValidDate:+'yes',
++badProp:+'no!',
};

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

console.log(newProps);|code-block|syntax|javascript|4516830|它将输出{+isValidDate:+'yes'+}|offset|length|style|CODE|4516831|如果有一天能说出像let+newProps+=+({+isValidDate+}+=+props)这样的话就好了，但不幸的是，ES6并不支持这种方式。|4516832|entityMap^0|0|0|4|M|0|9|14|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@$I|W|J|X|K|L]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

<p>This is the most readable and shortest solution I could come up with:</p>

<pre><code>let props = { 
  isValidDate: 'yes',
  badProp: 'no!',
};

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

console.log(newProps);
</code></pre>

<p>It will output <code>{ isValidDate: 'yes' }</code></p>

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


blocks|key|4516849|text|这是完全可能的。只是不是在一句话里。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4516850|var+foo+=+{
++++x:+"bar",
++++y:+"baz"
};
var+oof+=+{};
({x:+oof.x,+y:+oof.y}+=+foo);+//+{x:+"bar",+y:+"baz"}|code-block|syntax|javascript|4516851|(请注意语句两边的括号。)但请记住，易读性比代码高尔夫更重要:)。|4516852|来源：http://exploringjs.com/es6/ch_destructuring.html#sec_assignment-targets|offset|length|4516853|entityMap|0|LINK|mutability|MUTABLE|url|http://exploringjs.com/es6/ch_destructuring.html#sec_assignment-targets^0|0|0|0|3|1Z|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>It's totally possible. Just not in one statement.</p>

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

<p>(Do note the parenthesis around the statement.)
But keep in mind legibility is more important than code-golfing :).</p>

<p>Source: <a href="http://exploringjs.com/es6/ch_destructuring.html#sec_assignment-targets" rel="nofollow noreferrer">http://exploringjs.com/es6/ch_destructuring.html#sec_assignment-targets</a></p>


blocks|key|9254|text|试一试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|9255|++++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+}|code-block|syntax|javascript|9256|​|9257|或|9258|9259|++++console.log({...(()+=>+({a1,+a2,+b1,+b2})).bind({...a,+...b})()});|9260|9261|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|L|3|M|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|N|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|P|$]]

<p>Try
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    var a = {a1:1, a2: 2, a3: 3};
    var b = {b1:1, b2: 2, b3: 3};
    
    const newVar = (() =&gt; ({a1, a2, b1, b2})).bind({...a, ...b});
    const val = newVar();
    console.log({...val});
    // print: Object { a1: 1, a2: 2, b1: 1, b2: 2 }</code></pre>
</div>
</div>
</p>
<p>or</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    console.log({...(() =&gt; ({a1, a2, b1, b2})).bind({...a, ...b})()});</code></pre>
</div>
</div>
</p>


blocks|key|9286|text|这不是一种很好的方式，我也不推荐它，但这种方式是可能的，只是为了获得知识。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|9287|​|9288|+++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"}|code-block|syntax|javascript|9289|9290|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>It's not a beautiful way, nor I recommend it, but it's possible this way, just for knowledge.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>   const myObject = {
      name: 'foo',
      surname: 'bar',
      year: 2018
    };

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

    console.log(JSON.stringify(newObject)); // {"name":"foo","surname":"bar"}</code></pre>
</div>
</div>
</p>


blocks|key|9330|text|可以直接将对象赋值给另一个对象属性来析构该对象。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|9331|工作示例：|9332|​|9333|let+user+=+{};
[user.name,+user.username]+=+"Stack+Overflow".split('+');
document.write(`
1st+attr:+${user.name}+<br+/>+
2nd+attr:+${user.username}`);|code-block|syntax|javascript|9334|9335|你可以使用与你想要捕获的对象属性同名的变量来进行析构，这样你就不需要这样做了：|9336|let+user+=+{+name:+'Mike'+}
let+{+name:+name+}+=+user;|9337|使用以下方法：|9338|let+user+=+{+name:+'Mike'+}
let+{+name+}+=+user;|9339|同样，如果对象结构具有相同的属性名称，则可以为它们设置新值。|9340|请看下面的工作示例：|9341|9342|//+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+%2B+"<br+/>");++//+Menu
document.write(w+%2B+"<br+/>");++++++//+100
document.write(h);+++++++++++++++++//+200|9343|9344|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|14|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|15|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|16|8|@]|9|@]|A|$I|J]]|$1|K|3|E|5|6|7|17|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|18|8|@]|9|@]|A|$]]|$1|N|3|O|5|H|7|19|8|@]|9|@]|A|$I|J]]|$1|P|3|Q|5|6|7|1A|8|@]|9|@]|A|$]]|$1|R|3|S|5|H|7|1B|8|@]|9|@]|A|$I|J]]|$1|T|3|U|5|6|7|1C|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1D|8|@]|9|@]|A|$]]|$1|X|3|E|5|6|7|1E|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|H|7|1F|8|@]|9|@]|A|$I|J]]|$1|10|3|E|5|6|7|1G|8|@]|9|@]|A|$]]|$1|11|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|12|$]]

<p>You can destruct an object assigning directly to another object attribute. </p>

<p>Working example:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let user = {};
[user.name, user.username] = "Stack Overflow".split(' ');
document.write(`
1st attr: ${user.name} &lt;br /&gt; 
2nd attr: ${user.username}`);</code></pre>
</div>
</div>
</p>

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

<pre><code>let user = { name: 'Mike' }
let { name: name } = user;
</code></pre>

<p>Use this way:</p>

<pre><code>let user = { name: 'Mike' }
let { name } = user;
</code></pre>

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

<p>Look this working example:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// 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 + "&lt;br /&gt;");  // Menu
document.write(w + "&lt;br /&gt;");      // 100
document.write(h);                 // 200</code></pre>
</div>
</div>
</p>


blocks|key|9419|text|您可以使用JSON类方法来实现它，如下所示|type|unstyled|depth|inlineStyleRanges|entityRanges|data|9420|const+foo+=+{
+++x:+"bar",
+++y:+"baz"
};

const+oof+=+JSON.parse(JSON.stringify(foo,+['x','y']));
//+output+->+{x:+"bar",+y:+"baz"}|code-block|syntax|javascript|9421|将需要添加到结果对象中的属性作为第二个参数以数组格式传递给stringify函数。|offset|length|style|CODE|9422|MDN+Doc+for+JSON.stringify|9423|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify^0|0|0|T|9|0|0|Q|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@$I|Z|J|10|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|11|8|@]|9|@$I|12|J|13|1|14]]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>You can use JSON class methods to achieve it as follows</p>

<pre><code>const foo = {
   x: "bar",
   y: "baz"
};

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

<p>Pass properties that need to be added to the resulting object as second argument to <code>stringify</code> function in an array format.</p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify" rel="nofollow noreferrer">MDN Doc for JSON.stringify</a></p>


<p>For example if I have two objects: </p>

<pre><code>var foo = {
  x: "bar",
  y: "baz"
}
</code></pre>

<p>and </p>

<pre><code>var oof = {}
</code></pre>

<p>and I wanted to transfer the x and y values from foo to oof. Is there a way to do that using the es6 destructuring syntax?</p>

<p>perhaps something like: </p>

<pre><code>oof{x,y} = foo
</code></pre>


Is it possible to destructure onto an existing object? (Javascript ES6)

JSON

例如，如果我有两个对象：var foo = {  x: "bar",  y: "baz"}和var oof = {}我想把x和y的值从foo转移到oof。有没有办法使用es6解构语法来做到这一点呢？可能是这样的：oof{x,y} = foo

问可以解构到现有的对象上吗？(Javascript ES6)
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可以解构到现有的对象上吗？(Javascript ES6)EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可以解构到现有的对象上吗？(Javascript ES6)
EN