Estou tentando determinar se há grandes diferenças entre esses dois, além de poder importar export defaultapenas fazendo:

import myItem from 'myItem';

E usando export consteu posso fazer:

import { myItem } from 'myItem';

Gostaria de saber se existem diferenças e / ou casos de uso além deste.

É uma exportação nomeada versus uma exportação padrão. export consté uma exportação nomeada que exporta uma declaração ou declarações const.

Para enfatizar: o que importa aqui é a exportpalavra - chave constusada para declarar uma declaração ou declarações const. exporttambém pode ser aplicado a outras declarações, como declarações de classe ou função.

Exportação padrão ( export default)

Você pode ter uma exportação padrão por arquivo. Ao importar, você deve especificar um nome e importar da seguinte maneira:

import MyDefaultExport from "./MyFileWithADefaultExport";

Você pode dar a esse nome qualquer nome que desejar.

Exportação nomeada ( export)

Com exportações nomeadas, você pode ter várias exportações nomeadas por arquivo. Importe as exportações específicas que você deseja colocar entre chaves:

// ex. importing multiple exports:
import { MyClass, MyOtherClass } from "./MyClass";
// ex. giving a named import a different name by using "as":
import { MyClass2 as MyClass2Alias } from "./MyClass2";

// use MyClass, MyOtherClass, and MyClass2Alias here

Ou é possível usar um padrão junto com importações nomeadas na mesma instrução:

import MyDefaultExport, { MyClass, MyOtherClass} from "./MyClass";

Importação de namespace

Também é possível importar tudo do arquivo em um objeto:

import * as MyClasses from "./MyClass";
// use MyClasses.MyClass, MyClasses.MyOtherClass and MyClasses.default here

Notas

• A sintaxe favorece as exportações padrão como um pouco mais concisas porque seu caso de uso é mais comum ( consulte a discussão aqui ).

• Uma exportação padrão é na verdade uma exportação nomeada com o nome defaultpara que você possa importá-la com uma importação nomeada:

  import { default as MyDefaultExport } from "./MyFileWithADefaultExport";

export default afeta a sintaxe ao importar a "coisa" exportada, ao permitir importar, o que foi exportado, escolhendo o nome no import si, independentemente do nome em que foi exportado, simplesmente porque está marcado como "padrão".

Um caso de uso útil, que eu gosto (e uso), está permitindo exportar uma função anônima sem precisar explicitamente nomeá-la, e somente quando essa função é importada, deve ser dado um nome:

Exemplo:

Exportar 2 funções, uma é default:

export function divide( x ){
    return x / 2;
}

// only one 'default' function may be exported and the rest (above) must be named
export default function( x ){  // <---- declared as a default function
    return x * x;
}

Importe as funções acima. Criando um nome para defaultesse:

// The default function should be the first to import (and named whatever)
import square, {divide} from './module_1.js'; // I named the default "square" 

console.log( square(2), divide(2) ); // 4, 1

Quando a {}sintaxe é usada para importar uma função (ou variável), isso significa que tudo o que é importado foi já nomeado quando exportados, por isso é preciso importá-lo pelo exato mesmo nome, ou então a importação não iria funcionar.

Exemplos errôneos:

1. A função padrão deve ser a primeira a importar

   import {divide}, square from './module_1.js

2. divide_1não foi exportado module_1.js, portanto nada será importado

   import {divide_1} from './module_1.js

3. squarenão foi exportado module_1.js, porque {}diz ao mecanismo para procurar explicitamente apenas exportações nomeadas .

   import {square} from './module_1.js

Nota secundária: considere que quando você importa de uma exportação padrão, a nomeação é completamente independente. Isso realmente afeta as refatorações.

Digamos que você tenha uma classe Foocomo esta com uma importação correspondente:

export default class Foo { }

//the name 'Foo' could be anything, since it's just an
//identifier for the default export
import Foo from './Foo'

Agora, se você refatorar sua Fooclasse Bare também renomear o arquivo, a maioria dos IDEs NÃO afetará sua importação. Então você vai acabar com isso:

export default class Bar { }

//the name 'Foo' could be anything, since it's just an
//identifier for the default export.
import Foo from './Bar'

Especialmente no Typescript, eu realmente aprecio as exportações nomeadas e a refatoração mais confiável. A diferença é apenas a falta da defaultpalavra - chave e das chaves. Essa btw também impede que você digite erros de digitação na importação, pois você tem a verificação de tipo agora.

export class Foo { }

//'Foo' needs to be the class name. The import will be refactored
//in case of a rename!
import { Foo } from './Foo'

A partir da documentação :

Exportações nomeadas são úteis para exportar vários valores. Durante a importação, será possível usar o mesmo nome para se referir ao valor correspondente.

Em relação à exportação padrão, há apenas uma única exportação padrão por módulo. Uma exportação padrão pode ser uma função, uma classe, um objeto ou qualquer outra coisa. Este valor deve ser considerado como o valor exportado "principal", pois será o mais simples de importar.

Quando você coloca o padrão, é chamado de exportação padrão. Você pode ter apenas uma exportação padrão por arquivo e pode importá-lo para outro arquivo com o nome que desejar. Quando você não coloca o padrão, chamado export export, você deve importá-lo para outro arquivo usando o mesmo nome com chaves dentro dele.

Eu tive o problema de o navegador não usar es6.

Eu corrigi-lo com:

 <script type="module" src="index.js"></script>

O módulo type informa ao navegador para usar o ES6.

export const bla = [1,2,3];

import {bla} from './example.js';

Então deve funcionar.