> 웹 프론트엔드 > 프런트엔드 Q&A > es6에서 import 사용법은 무엇입니까?

es6에서 import 사용법은 무엇입니까?

WBOY
풀어 주다: 2022-04-25 17:19:54
원래의
4518명이 탐색했습니다.

es6에서 import as는 여러 내보내기에서 내보낸 내용을 하나의 개체로 결합하고 반환하는 데 사용됩니다. ES6의 모듈화는 내보내기와 가져오기라는 두 가지 모듈로 나뉩니다. 이 방법은 모든 내보내기 내용을 지정된 개체로 래핑할 수 있습니다. "import * as object from ..."에 대한 구문입니다.

es6에서 import 사용법은 무엇입니까?

이 튜토리얼의 운영 환경: Windows 10 시스템, ECMAScript 버전 6.0, Dell G3 컴퓨터.

es6에서 import의 사용법은 무엇인가요?

ES6에서는 자바스크립트가 처음으로 모듈을 지원합니다. ES6의 모듈화는 내보내기와 가져오기라는 두 가지 모듈로 나뉩니다. 프로젝트에서 import * as obj from을 사용하는 경우가 많습니다. 이 작성 방법은 모든 출력을 내부의 obj 개체로 래핑합니다.

import * as xxx from 'xxx': 여러 내보내기에서 내보낸 내용을 하나의 개체로 결합하고 반환합니다.

import xxx from 'xxx': (기본 Din 내보내기) 이 기본 개체를 하나의 개체로만 내보냅니다.

예 : 1

// index.js
export function fn1(data){
  console.log(1)
}
export function fn2(data){
  console.log(2)
}
import * as Fn from './index.js'
Fn.fn1()  // 1
Fn.fn2()  // 2
로그인 후 복사

example 2

let myName = "Jon";
let myAge = 18;
let myfn = function(){
    return "我是"+myName+"!今年"+myAge+"岁了"
}
export {
    myName as name,
    myAge as age,
    myfn as fn
}
로그인 후 복사

import {fn,age,name} from "./test.js";
console.log(fn()); //我是Jon!今年19岁了
console.log(age); //19
console.log(name); //Jon
로그인 후 복사

또는

import * as info from "./test.js"; //通过*来批量接收,as 来指定接收的名字
console.log(info.fn()); //我是Jon!今年18岁了
console.log(info.age); //18
console.log(info.name); //Jon
로그인 후 복사

example 3

/*************test1.js*****************/
export let myName = "我来自test1.js";
/*************test2.js*****************/
export let myName = "我来自test2.js";
 
/*************index.js****************/
import {myName as name1} from "./test1.js";
import {myName as name2} from "./test2.js";
console.log(name1); //我来自test1.js
console.log(name2); //我来自test2.js
로그인 후 복사
emport and import로 작성된 코드를 받았습니다. 즉, 이름 충돌 문제가 발생합니다. 이 문제를 해결하기 위해 ES6에서는 이름을 가져올 때 이름을 바꿀 수 있는 방법을 제공합니다.

rrreee

【관련 추천:

javascript 비디오 튜토리얼

, web front-end

위 내용은 es6에서 import 사용법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
es6
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿