JavaScript ES6에서 내보내기 가져오기와 내보내기 기본값의 사용법과 차이점에 대한 자세한 설명

이 글은 주로 JavaScript ES6의 내보내기, 가져오기, 내보내기 기본 사용법과 차이점을 소개합니다. . 필요하면 친구가 참고할 수 있으니 아래를 살펴보세요.

서문

많은 분들이 내보내기, 내보내기 기본값, 가져오기를 사용하셨을 텐데 둘의 차이점은 무엇인가요? 차이점을 살펴보기 전에 먼저 사용법을 살펴보겠습니다.

ES6 가져오기 및 내보내기 사용

js 모듈 로딩 솔루션은 이미 ES6 이전에 나타났습니다. 주요 사양은 CommonJS 및 AMD 사양입니다. commonjs는 주로 nodejs와 같은 동기 로딩을 달성하기 위해 서버에서 사용됩니다. AMD 사양은 비동기적으로 로드되는 requirejs와 같은 브라우저에 적용됩니다. seaJS와 같은 동기 로딩 솔루션에 대한 CMD 사양도 있습니다.

ES6은 언어 사양 수준에서 모듈 기능을 구현하며 구현이 매우 간단하여 기존 CommonJS 및 AMD 사양을 완전히 대체할 수 있으며 브라우저 및 서버를 위한 범용 모듈 솔루션이 될 수 있습니다.

ES6 모듈에는 주로 내보내기와 가져오기의 두 가지 기능이 있습니다.

• 내보내기는 이 모듈을 외부로 출력하는 데 사용됩니다(파일은 module )

• import 변수의 인터페이스는 모듈에 내보내기 인터페이스가 포함된 다른 모듈을 로드하는 데 사용됩니다.

즉, 모듈의 외부 인터페이스를 정의하기 위해 내보내기 명령을 사용한 후, 다른 JS 파일에서 import 명령을 통해 이 모듈(파일)을 로드할 수 있습니다. 다음과 같이 (a, b 파일이 같은 디렉터리에 있다고 가정)

// 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的值，因为没有对外输出变量接口,只是输出的字符串。

a.js 파일도 다음과 같은 내보내기 구문에 따라 작성할 수 있으나 위와 같이 직관적이지 않아 권장하지 않습니다.

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

위는 내보내기와 모듈의 기본 사용법을 설명한 뒤, 연구를 확장

이전 예시에서 볼 수 있듯이, b.js는 import를 사용합니다. 명령을 실행할 때 사용자는 a.js에 의해 노출된 변수 식별자를 알아야 합니다. 그렇지 않으면 로드할 수 없습니다. 기본 내보내기 명령을 사용하여 모듈의 기본 출력을 지정할 수 있으므로 로드할 모듈의 변수 이름을 알 필요가 없습니다.

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

ES6의 내보내기, 가져오기 및 내보내기 기본값의 차이점

Javascript ES6에서는 내보내기 및 내보내기 기본값을 모두 내보내기에 사용할 수 있습니다. 상수, 함수, 파일, 모듈 등은 +(상수 | 함수 | 파일 | 모듈)를 가져와서 다른 파일이나 모듈에서 가져올 수 있습니다. name 이므로 사용할 수 있지만 파일이나 모듈에서는 여러 개의 내보내기 및 가져오기가 있을 수 있으며 내보내기 기본값은 하나만 있습니다.

구체적인 사용법:

1.

//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

2 .

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

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

에 해당하는 가져오기 방법은

//demo2.js
import { str, f } from 'demo1' //也可以分开写两次，导入的时候带花括号

요약

위 내용은 JavaScript ES6에서 내보내기 가져오기와 내보내기 기본값의 사용법과 차이점에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!