ES6导出对象的所有值


112

假设我有一个模块(./my-module.js),其中包含一个对象,该对象应为其返回值:

let values = { a: 1, b: 2, c: 3 }

// "export values" results in SyntaxError: Unexpected token

所以我可以像这样导入它们:

import {a} from './my-module'           // a === 1
import * as myModule from './my-module' // myModule.a === 1

我发现的唯一方法是对出口进行硬编码:

export let a = values.a
export let b = values.b
export let c = values.c
// or:
export let {a, b, c} = values

这不是动态的。

是否可以从对象导出所有值?


6
否,因为动态计算的值不能静态导出。
Bergi 2015年

@Bergi,我想知道是否可以以某种方式使值静态。我在想如果您使用interface { a: number, b: number, c: number }?从理论上讲应该有可能吧?
Fleuv

1
@Fleuv export const {a, b, c} = values正是声明该静态接口的语法
Bergi

Answers:


39

似乎并非如此。引用ECMAScript 6模块:最终语法

您可能想知道–如果我们仅可以默认导出对象(例如CommonJS),为什么我们需要命名导出?答案是,您不能通过对象强制执行静态结构,而失去所有相关的优势(在下一节中介绍)。


3
如果它们具有名称/值对,可以使用数组吗?
凯文·索特尔

79

我真的不能推荐这种解决方案,但它确实可以起作用。而不是导出对象,而是使用named导出每个成员。在另一个文件中,将第一个模块的命名导出导入到一个对象中,并将该对象导出为默认对象。还使用以下命令从第一个模块导出所有命名的导出export * from './file1';

值/ value.js

let a = 1;
let b = 2;
let c = 3;

export {a, b, c};

值/ index.js

import * as values from './value';

export default values;
export * from './value';

index.js

import values, {a} from './values';

console.log(values, a); // {a: 1, b: 2, c: 3} 1

2
您为什么不推荐这个?
jsdario '16

2
也许是因为治愈方法比疾病更糟糕(除非您正在编写一个供公众使用的图书馆,并且您对它的输入方式真的很挑剔)?
machineghost

是的,这是一个很好的总结。我曾在库中使用过这种技术来简化易用性。我认为最好在单个文件中管理导出,即使对库作者来说工作量更大。结果是为用户减少了一个模块深度。
ryanjduffy

我很喜欢这种解决方法,但是应该在values / index.js中将其设置为“ ./value”而不是“ ./values”,对吗?
Jan Paepke

1
我真的不认为这是答案,因为如果已经出口{ a, b, c },为什么还要再次出口?真正的问题是,如果只有我const obj = { a, b, c }并且可以导出obj的所有成员该怎么办?我想答案是否定的。
windmaomao

14

尝试这个难看但可行的解决方案:

// use CommonJS to export all keys
module.exports = { a: 1, b: 2, c: 3 };

// import by key
import { a, b, c } from 'commonjs-style-module';
console.log(a, b, c);

12

我只需要对配置文件执行此操作。

var config = {
    x: "CHANGE_ME",
    y: "CHANGE_ME",
    z: "CHANGE_ME"
}

export default config;

你可以这样

import { default as config } from "./config";

console.log(config.x); // CHANGE_ME

请注意,这是在使用Typescript。


34
您应该能够做到import config from './config';
Matt Hamann


3

我建议以下内容,让我们期待一个module.js

const values = { a: 1, b: 2, c: 3 };

export { values }; // you could use default, but I'm specific here

然后可以在index.js中进行操作

import { values } from "module";

// directly access the object
console.log(values.a); // 1

// object destructuring
const { a, b, c } = values; 
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

// selective object destructering with renaming
const { a:k, c:m } = values;
console.log(k); // 1
console.log(m); // 3

// selective object destructering with renaming and default value
const { a:x, b:y, d:z = 0 } = values;
console.log(x); // 1
console.log(y); // 2
console.log(z); // 0

解构对象的更多示例:https : //developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring


3

每个答案都需要更改导入语句。

如果您希望能够使用:

import {a} from './my-module'           // a === 1
import * as myModule from './my-module' // myModule.a === 1

如问题中所述,并且my-module您拥有一个对象中需要导出的所有内容(这可能很有用,例如,如果您想使用Joi或JSON Schema验证导出的值),则您my-module必须是:

let values = { a: 1, b: 2, c: 3 }
let {a, b, c} = values;
export {a, b, c};

要么:

let values = { a: 1, b: 2, c: 3 }
export let {a, b, c} = values;

不漂亮,但是可以根据您的需要进行编译。

请参阅:Babel示例


3

2

从变量文件中导出每个变量。然后,像在其他文件中一样,用*导入它们,然后从该文件中将其导出为常量,将为您提供一个动态对象,其中第一个文件的命名导出是从第二个文件导出的对象的属性。

Variables.js

export const var1 = 'first';
export const var2 = 'second':
...
export const varN = 'nth';

Other.js

import * as vars from './Variables';

export const Variables = vars;

Third.js

import { Variables } from './Other';

Variables.var2 === 'second'

您还可以补充说明吗?
Nilambar Sharma,
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.