Detailed explanation of the usage and difference between export import and export default in JavaScript ES6

This article mainly introduces to you JavaScript The usage and difference of export, import and export default in ES6. The introduction in the article is very detailed. I believe it will be helpful for everyone to learn ES6. If you need it Friends can refer to it, let’s take a look below.

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 first look at their usage.

Usage of ES6 import and export

The js module loading solution has appeared before ES6. The main ones are CommonJS and AMD specifications. commonjs is mainly used in servers to achieve synchronous loading, such as nodejs. AMD specifications apply to browsers, such as requirejs, for asynchronous loading. There are also CMD specifications for synchronous loading solutions such as seaJS.

ES6 implements module functions at the level of language specifications, and the implementation is quite simple. It can completely replace the existing CommonJS and AMD specifications and become a universal module solution for browsers and servers.

ES6 module mainly has two functions: export and import

• export is used to output this module externally (a file can be understood as a module ) The interface of the variable

• #import is used to load another module containing the export interface in a module.

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

// a.js

var sex="boy";
var echo=function(value){
　　console.log(value)
}
export {sex,echo} 
//通过向大括号中添加sex，echo变量并且export输出，就可以将对应变量值以sex、echo变量标识符形式暴露给其他文件而被读取到
//不能写成export sex这样的方式，如果这样就相当于export "boy",外部文件就获取不到该文件的内部变量sex的值，因为没有对外输出变量接口,只是输出的字符串。

// b.js
通过import获取a.js文件的内部变量，{}括号内的变量来自于a.js文件export出的变量标识符。
import {sex,echo} from "./a.js" 
console.log(sex) // boy
echo(sex) // boy

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)
}

//因为function echo(){}等价于 var echo=function(){}所以也可以写成
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, b.js uses import When issuing commands, users need to know the variable identifiers exposed by a.js, otherwise they cannot be loaded. You can use the export default command to specify the default output for the module, so you do not need to know the variable name of the module to be loaded.

//a.js
var sex="boy";
export default sex（sex不能加大括号）
//原本直接export sex外部是无法识别的，加上default就可以了.但是一个文件内最多只能有一个export default。
其实此处相当于为sex变量值"boy"起了一个系统默认的变量名default，自然default只能有一个值，所以一个文件内不能有多个export default。

// b.js
本质上，a.js文件的export default输出一个叫做default的变量，然后系统允许你为它取任意名字。所以可以为import的模块起任何变量名，且不需要用大括号包含
import any from "./a.js"
import any12 from "./a.js" 
console.log(any,any12) // boy,boy

The difference between export, import and export default in ES6

In Javascript ES6, both export and export default can be used for export Constants, functions, files, modules, etc., you can import them in other files or modules by import+(constant | function | file | module) name , so that it can be used, but in a file or module, there can be multiple exports and imports, and there is 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' //也可以分开写两次，导入的时候带花括号

2,

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

Corresponding import method:

//demo2.js
import str from 'demo1' //导入的时候没有花括号

Summary

The above is the detailed content of Detailed explanation of the usage and difference between export import and export default in JavaScript ES6. For more information, please follow other related articles on the PHP Chinese website!