Usage and Difference of export import and export default in JavaScript ES6

Preface

I believe many people have used export, export, default and import, but what is the difference between them? Before looking at the differences between them, let's look at their usage.

Usage of ES6 import and export

Before ES6, js module loading scheme appeared, and the most important ones were CommonJS and AMD specifications. commonjs is mainly applied to servers to realize synchronous loading, such as nodejs. The AMD specification applies to browsers, such as requirejs, for asynchronous loading. There is also the CMD specification, which is a synchronous loading scheme such as seaJS.

At the level of language specification, ES6 realizes the module function, and the implementation is quite simple, which can completely replace the existing CommonJS and AMD specifications and become a general module solution for browsers and servers.

The ES6 module has two main functions: export and import

export is an interface for externally outputting variables of this module (one file can be understood as one module) import is used to load one module with an export interface.

That is to say, after the external interface of the module is defined by export command, other JS files can load this module (file) by import command. As follows (assuming the a and b files are in the same directory)

// a.js

var sex="boy";
var echo=function(value){
 　　 console.log(value)
}
export {sex,echo} 
// By adding to the braces sex , echo Variable and export Output, you can set the corresponding variable value with sex , echo Variable identifier form is exposed to other files and read to 
// Can't be written as export sex In this way, if this is equivalent to export "boy", External files can't get the internal variables of the file sex Because there is no external output variable interface , Just the output string. 

// b.js
 Pass import Get a.js Internal variables of the file, {} The variables in parentheses come from a.js Documents export The variable identifier of the. 
import {sex,echo} from "./a.js" 
console.log(sex) // boy
echo(sex) // boy

The a. js file can also be written according to the following export syntax, but it is not as intuitive as the above and is not recommended.

// a.js
export var sex="boy";
export var echo=function(value){
 　　 console.log(value)
}

// Because function echo(){} Equivalent to  var echo=function(){} So it can also be written as 
export function echo(value){
  　　 　 console.log(value)
}

The above is the basic usage of export and module, and then expand the study

As can be seen from the previous example, when b. js uses import command, the user needs to know the variable identifier exposed by a. js, otherwise it cannot be loaded. You can 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 you want to load.

//a.js
var sex="boy";
export default sex ( sex Cannot enlarge brackets) 
// Original direct export sex The exterior is unrecognizable, plus default That's enough . But 1 There can only be at most one file in 1 A export default . 
 In fact, this is equivalent to sex Variable value "boy" Up 1 System default variable names default , nature default There can only be 1 Value, so 1 You cannot have more than one file within export default . 

// b.js
 Essentially, a.js Documentary export default Output 1 A man called default And the system allows you to give it any name. So you can do it for import Any variable name for the module of, and does not need to be included in curly braces 
import any from "./a.js"
import any12 from "./a.js" 
console.log(any,any12) // boy,boy

Differences between export, import and export default in ES6

In JavaScript ES6, export and export default can be used to export constants, functions, files, modules, etc. You can import them in other files or modules by import + (constant function file module) name, so that they can be used. However, in one file or module, there can be multiple export and import, and only one export default.

Specific use:

1.

//demo1.js
export const str = 'hello world'

export function f(a){
 return a+1
}

Corresponding import method:

//demo2.js
import { str, f } from 'demo1' // You can also write it twice separately, with curly braces when importing it 

2.

//demo1.js
export default const str = 'hello world'

Corresponding import method:

//demo2.js
import str from 'demo1' // There are no curly braces when importing 

Summarize