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, мені цікаво, чи можна якось зробити значення статичними. Я думав про те, що, якщо ви використовуєте interface { a: number, b: number, c: number }? Теоретично це повинно бути можливо, правда?
Fleuv

1
@Fleuv export const {a, b, c} = valuesсаме синтаксис , щоб оголосити , що статичний інтерфейс
BERGI

Відповіді:


39

Мабуть, не так. Цитата з модулів ECMAScript 6: остаточний синтаксис :

Вам може бути цікаво - навіщо нам потрібен імпорт експорту, якщо ми могли просто експортувати об'єкти за замовчуванням (наприклад, CommonJS)? Відповідь полягає в тому, що ви не можете застосувати статичну структуру за допомогою об'єктів і втратити всі пов'язані з цим переваги (описані в наступному розділі).


3
Чи можете ви використовувати масив, якщо вони мають пари імен-значення?
Кевін Саттл

79

Я не можу реально рекомендувати це рішення навколо, але воно функціонує. Замість того, щоб експортувати об'єкт, ви використовуєте імпортний імпорт кожного учасника. В інший файл імпортуйте імпорт експорту першого модуля в об’єкт та експортуйте цей об’єкт за замовчуванням. Також експортуйте весь названий експорт з першого модуля, використовуючи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

2
Можливо, тому, що вилікувати гірше від хвороби (якщо ви не пишете бібліотеку, що споживається загалом, і ви справді вибагливі, як її імпортувати)?
machineghost

Так, це гарне підсумок. Це техніка, яку я колись використовував у бібліотеці, щоб полегшити витратність. Я думаю, що було б краще керувати експортом в одному файлі, навіть якщо це більше роботи для автора бібліотеки. Результат - одна менша глибина модуля для користувача.
ryanjduffy

Мені дуже подобається ця обробка, але вона повинна бути "./value" замість "./values" у значеннях / index.js, правда?
Ян Паепке

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';
Метт Хаманн

4
export const a = 1;
export const b = 2;
export const c = 3;

Це буде працювати з перетвореннями Babel сьогодні і повинно скористатися всіма перевагами модулів ES2016, коли ця функція фактично знаходиться в браузері.

Ви також можете додати, export default {a, b, c};що дозволить вам імпортувати всі значення у вигляді об'єкта без * as, тобтоimport myModule from 'my-module';

Джерела:


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/en-US/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), то вам 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;

Не дуже, але вона складається до того, що вам потрібно.

Дивіться: приклад Вавилона


3

2

Експорт кожної змінної з файлу змінних. Тоді імпорт їх з *, як у вашому іншому файлі, та експортування як константа з цього файлу дасть вам динамічний об’єкт, а названий експорт з першого файлу буде атрибутами об'єкта, експортованого з другого.

Змінні.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
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.