如何将所有属性解构为 ES2015 中的当前 scope/closure？

Question

我想做这样的事情：

const vegetableColors = {corn: 'yellow', peas: 'green'};

const {*} = vegetableColors;

console.log(corn);// yellow
console.log(peas);// green

我似乎无法找到或想出如何做到这一点，但我真的以为我以前在某个地方见过它！ :P

注意： 我正在使用 Babel，stage 设置为 0；

CONTEXT: 我试图在 JSX 中更简洁，而不是在所有地方引用 this.state 或 this.props。如果数据发生变化，也不必继续添加属性来解构。

Answer 1

我想你正在寻找：

const {corn, peas} = vegetableColors;

Live on Babel's REPL

如果你问如何做到这一点而不知道名字 corn 和 peas，你不能解构赋值。

您只能在全局范围内使用循环，但我确定您不想在全局范围内执行此操作。不过，以防万一：

// I'm sure you don't really want this, just being thorough
Object.keys(vegetableColors).forEach((key) => {
    Object.defineProperty(this, key, {
        value: vegetableColors[key]
    });
});

（如果您希望这些伪常量可枚举，请将 enumerable: true 放在那里。）

这适用于全局范围，因为 this 指的是全局对象。

Answer 2

我认为您正在寻找 with statement，它完全符合您的要求：

const vegetableColors = {corn: 'yellow', peas: 'green'};
with (vegetableColors) {
    console.log(corn);// yellow
    console.log(peas);// green
}

但是，已弃用（在严格模式下，包括 ES6 模块），这是有充分理由的。

destructure all properties into the current scope

你不能在 ES6¹ 中使用。 And that's a good thing。明确说明您要引入的变量：

const {corn, peas} = vegetableColors;

或者，您可以使用 Object.assign(global, vegetableColors) 扩展全局对象，将它们放在全局范围内，但实际上，这比 with 语句更糟糕。

_{1：……虽然我不知道是否有草案允许在 ES7 中进行此类操作，但我可以告诉你任何提案都会被 TC 否决 :-)}

Answer 3

我不推荐它，但您可以使用 eval() 来完成类似的事情：

vegetableColors = {corn: 'yellow', peas: 'green'};

function test() {
    for ( let i=0; i < Object.keys(vegetableColors).length; i++ ) {
        let k = Object.keys(vegetableColors)[i];
        eval(`var ${k} = vegetableColors['${k}']`);
    }

    console.log(corn); // yellow
}

test();

console.log(corn); // undefined (out of scope)

如何将所有属性解构为 ES2015 中的当前 scope/closure？

How do I destructure all properties into the current scope/closure in ES2015?

javascript

destructuring

ecmascript-6

ecmascript-2016

我想做这样的事情：