Когда следует использовать фигурные скобки для импорта ES6?

Ответ 1

Это импорт по умолчанию:

// B.js
import A from './A'

Он работает только в том случае, если A имеет экспорт по умолчанию:

// A.js
export default 42

В этом случае не важно, какое имя вы присваиваете ему при импорте:

// B.js
import A from './A'
import MyA from './A'
import Something from './A'

Потому что он всегда будет решать все, что есть экспорт по умолчанию из A.

Это import с именем A:

import { A } from './A'

Он работает только в том случае, если A содержит экспорт с именем A:

export const A = 42

В этом случае имя имеет значение, потому что вы импортируете конкретную вещь по имени экспорта:

// B.js
import { A } from './A'
import { myA } from './A' // Doesn't work!
import { Something } from './A' // Doesn't work!

Чтобы сделать эти работы, вы должны добавить соответствующий именованный экспорт в A:

// A.js
export const A = 42
export const myA = 43
export const Something = 44

В модуле может быть только один экспорт по умолчанию, но столько имен, сколько вы хотели бы (ноль, один, два или многие). Вы можете импортировать их все вместе:

// B.js
import A, { myA, Something } from './A'

Здесь мы импортируем экспорт по умолчанию как A и назвали экспорт под названием myA и Something соответственно.

// A.js
export default 42
export const myA = 43
export const Something = 44

Мы также можем назначить им все разные имена при импорте:

// B.js
import X, { myA as myX, Something as XSomething } from './A'

Экспорт по умолчанию, как правило, используется для того, что вы обычно ожидаете получить от модуля. Названный экспорт, как правило, используется для утилит, которые могут быть удобными, но arent всегда необходимо. Однако вам решать, как экспортировать вещи: например, модуль вообще не имеет экспорта по умолчанию.

Это отличное руководство для модулей ES, объясняющее разницу между умолчанию и названным экспортом.

Ответ 2

TL; DR: фигурные скобки используются, если вы хотите импортировать экспорт не по умолчанию.

См. ответ Дена Абрамова выше для более подробной информации.

Ответ 3

Я бы сказал, что есть также обозначенная звездочка для ключевого слова import ES6, о котором стоит упомянуть.

Если вы попытаетесь сконфигурировать журнал Mix:

import * as Mix from "./A";
console.log(Mix);

Вы получите:

Когда следует использовать фигурные скобки для импорта ES6?

Кронштейны являются золотыми, когда вам нужны только определенные компоненты из модуля, что делает меньшие отпечатки для таких устройств, как webpack.

Ответ 4

Дэн Абрамов отвечает выше, поясняет экспорт по умолчанию и с именем export.

Что использовать?

Цитата Дэвида Германа: ECMAScript 6 поддерживает стиль экспорта по умолчанию/по умолчанию и дает самый сладкий синтаксис для импорта по умолчанию. Импорт названного экспорта может и даже должен быть немного менее кратким.

Однако в TypeScript названный экспорт пользуется преимуществом из-за рефакторинга. Например, если вы по умолчанию экспортируете класс и переименовываете его, имя класса будет изменяться только в этом файле, а не в других ссылках, с именем имени экспорта экспорта будет переименовано во всех ссылках. Именованный экспорт также предпочтительнее для утилит.

В целом используйте все, что вы предпочитаете.

Дополнительные

Экспорт по умолчанию - это именованный экспорт с именем по умолчанию, поэтому экспорт по умолчанию можно импортировать как:

import {default as Sample} from '../Sample.js';

Ответ 5

Если вы думаете о import как о синтаксическом сахаре для node модулей, объектов и деструктуризации, я нахожу его довольно интуитивным.

// bar.js
module = {};

module.exports = { 
  functionA: () => {},
  functionB: ()=> {}
};

 // really all that is is this:
 var module = { 
   exports: {
      functionA, functionB
   }
  };

// then, over in foo.js

// the whole exported object: 
var fump = require('./bar.js'); //= { functionA, functionB }
// or
import fump from './bar' // same thing, object functionA and functionB props


// just one prop of the object
var fump = require('./bar.js').functionA;

// same as this, right?
var fump = { functionA, functionB }.functionA;

// and if we use es6 destructuring: 
var { functionA } =  { functionA, functionB };
// we get same result

// so, in import syntax:
import { functionA } from './bar';

Ответ 6

Чтобы понять использование фигурных скобок в операторах import, во-первых, вы должны понимать концепцию деструкции, введенную в ES6

1. Уничтожение объектов

   var bodyBuilder = {
     firstname: 'Kai',
     lastname: 'Greene',
     nickname: 'The Predator'
   };
   
   var {firstname, lastname} = bodyBuilder;
   console.log(firstname, lastname); //Kai Greene
   
   firstname = 'Morgan';
   lastname = 'Aste';
   
   console.log(firstname, lastname); // Morgan Aste
   

2. Деструктурирование массива

   var [firstGame] = ['Gran Turismo', 'Burnout', 'GTA'];
   
   console.log(firstGame); // Gran Turismo
   

   Использование сопоставления списков

     var [,secondGame] = ['Gran Turismo', 'Burnout', 'GTA'];
     console.log(secondGame); // Burnout
   

   Использование оператора спред

   var [firstGame, ...rest] = ['Gran Turismo', 'Burnout', 'GTA'];
   console.log(firstGame);// Gran Turismo
   console.log(rest);// ['Burnout', 'GTA'];
   

Теперь, когда у нас это получилось, в ES6 вы можете экспортировать несколько модулей. Затем вы можете использовать деструкцию объекта, как показано ниже.

Предположим, у вас есть модуль под названием module.js

    export const printFirstname(firstname) => console.log(firstname);
    export const printLastname(lastname) => console.log(lastname);

Вы хотите импортировать экспортированные функции в index.js;

    import {printFirstname, printLastname} from './module.js'

    printFirstname('Taylor');
    printLastname('Swift');

Вы также можете использовать разные имена переменных, например

    import {printFirstname as pFname, printLastname as pLname} from './module.js'

    pFname('Taylor');
    pLanme('Swift');

Ответ 7

обычно при экспорте функции вам необходимо использовать {}

if you have export const x 

вы используете import {x} from ''

if you use export default const x 

вам нужно использовать import X from '' здесь вы можете изменить X на любую переменную, которую хотите

Ответ 8

Кудрявые фигурные скобки ({}) используются для импорта именованных привязок, а концепция, лежащая в основе нее, - это деструктурирование назначения

Простую демонстрацию того, как операция импорта работает с примером, можно найти в моем собственном ответе на аналогичный вопрос: " Когда мы используем" {} "в импорте javascript?