Difference between export default and export:

1. Default export and default import

• Default export syntax: export default is the default exported member
• Default import syntax: import receive name from 'module identifier'

export default

//a.js
const str = "blablabla~";
export default str;
Corresponding import method:

//b.js
import str from 'a'; //There are no curly braces when importing

2. Export on demand and import on demand

• On demand export syntax: export {module member 1, module member 2}
• On demand import syntax: import {module member 1, module member 2} from "module identifier";

export

//a.js
export const str = "blablabla~";
export function log(sth) { 
  return sth;
}
Corresponding import method:

//b.js
import { str, log } from 'a'; //You can also write it twice separately with curly braces when importing

Use the export default command to specify the default output for the module, so you don't need to know the variable name of the module to be loaded

//a.js
let sex = "boy";
export default sex(sex (cannot use parentheses)
//Originally, it was unrecognizable to directly export sex externally. Add default. However, there can only be one export default in a file at most.
In fact, this is equivalent to sex Variable value"boy"A system default variable name is given default，natural default There can only be one value, so there can be no more than one value in a file export default. 

// b.js
 In essence, a.js Document export default Output one called default Then the system allows you to give it any name. So you can import The module of does not have any variable names and does not need to be enclosed in curly braces
import any from "./a.js"
import any12 from "./a.js" 
console.log(any,any12)   // boy,boy

difference:

1. Both export and export default can be used to export constants, functions, files, modules, etc
2. You can import it in other files or modules by means of import + (constant | function | file | module) name, so that it can be used
3. In a file or module, there can be multiple exports and import s, and only one export default
4. Export through export. Add {} when importing. export default is not required

export and import

Basic Usage

The module imports and exports various types of variables, such as string, value, function and class.

The exported function declaration and class declaration must have a name (the export default command is considered separately).
You can export not only declarations but also references (such as functions).
The export command can appear anywhere in the module, but it must be at the top level of the module.
The import command will be promoted to the head of the whole module and executed first.

/*-----export [test.js]-----*/
let myName = "Tom";
let myAge = 20;
let myfn = function(){
    return "My name is" + myName + "! I'm '" + myAge + "years old."
}
let myClass =  class myClass {
    static a = "yeah!";
}
export { myName, myAge, myfn, myClass }
 
/*-----import [xxx.js]-----*/
import { myName, myAge, myfn, myClass } from "./test.js";
console.log(myfn());// My name is Tom! I'm 20 years old.
console.log(myAge);// 20
console.log(myName);// Tom
console.log(myClass.a );// yeah!

It is recommended to use braces to specify a set of variables to be output, write them at the end of the document, and specify the exported interface.

Functions and classes need to have corresponding names, and there is no corresponding name at the end of the export document.

Usage of as

The interface name exported by the export command must have one-to-one correspondence with the variables inside the module.

The imported variable name must be the same as the exported interface name, that is, the order can be different.

/*-----export [test.js]-----*/
let myName = "Tom";
export { myName as exportName }
 
/*-----import [xxx.js]-----*/
import { exportName } from "./test.js";
console.log(exportName);// Tom

Use as to redefine the exported interface name and hide the variables inside the module

/*-----export [test1.js]-----*/
let myName = "Tom";
export { myName }
/*-----export [test2.js]-----*/
let myName = "Jerry";
export { myName }
/*-----import [xxx.js]-----*/
import { myName as name1 } from "./test1.js";
import { myName as name2 } from "./test2.js";
console.log(name1);// Tom
console.log(name2);// Jerry

The names of export interfaces of different modules are repeated. Use as to redefine the variable names.

Features of the import command

Read only properties:

It is not allowed to rewrite the reference point of the interface in the script loading the module, that is, the attribute value with the import variable type as the object can be rewritten, and the value with the import variable type as the basic type cannot be rewritten.

import {a} from "./xxx.js"
a = {}; // error
 
import {a} from "./xxx.js"
a.foo = "hello"; // a = { foo : 'hello' }

Singleton mode:

If the same import statement is executed multiple times, it will be executed only once, not multiple times. Import the first mock exam, which declares different interface references, will declare corresponding variables, but only once import.

import { a } "./xxx.js";
import { a } "./xxx.js";
// Equivalent to import {a} ". / xxx. JS";
 
import { a } from "./xxx.js";
import { b } from "./xxx.js";
// Equivalent to import {a, B} from ". / xxx. JS";

Static execution feature: import is static execution, so expressions and variables cannot be used.

import { "f" + "oo" } from "methods";
// error
let module = "methods";
import { foo } from module;
// error
if (true) {
  import { foo } from "method1";
} else {
  import { foo } from "method2";
}
// error

export default command

In a file or module, there can be multiple exports and import s, and only one export default.
Default in export default is the corresponding export interface variable.
When exporting through export, {} should be added during import, and export default is not required.
export default is an exposed member, which can be received with any variable.

var a = "My name is Tom!";
export default a; // Only one
export default var c = "error"; 
// error, default is already the corresponding exported variable, and the statement cannot be declared with the variable
import b from "./xxx.js"; // You do not need to add {} and use any variable to receive

Compound use

Note: import() is a proposal, which will not be extended here for the time being.

The first mock exam is export and import.

• You can rename the export interface, including default.
• You can also export all by combining export and import. The exported interface of the current module will overwrite the inherited exported interface.

export { foo, bar } from "methods";
 
// About equal to the following two statements, but the module does not import foo and bar in the above import and export mode
import { foo, bar } from "methods";
export { foo, bar };
 
/* ------- Feature 1--------*/
// Common renaming
export { foo as bar } from "methods";
// Convert foo to default
export { foo as default } from "methods";
// Convert default to foo
export { default as foo } from "methods";
 
/* ------- Feature 2--------*/
export * from "methods";