最適合Java程式設計師的ES6教程「6000字|大量案例|多練好懂」
本文為Vue教程前置知識，相關配套視訊會在月底兒之前釋出，如有需要請持續關注
一、ES6概述
1.1、ES6是什麼
ES6，是ECMAScript 6的簡稱，它是 JavaScript 語言的下一代標準，已經在2015年的6月正式釋出。
它的目標是使 JavaScript語言可以用於編寫複雜的大型應用程式，成為企業級開發語言。
1.2、ES6為什麼要學習
現在使用主流的前端框架中，如ReactJS、Vue.js、Angularjs等，都會使用到ES6的新特性，ES6也就成為了必修課，所以在學習這些前端框架之前，是非常有必要去學習ES6的內容。
1.3、什麼是ECMAScript？
web1.0時代：
最初的網頁以HTML為主，是純靜態的網頁。網頁是隻讀的，資訊流只能從服務的到客戶端單向流通。開發人員也只關心頁面的樣式和內容即可。
web2.0時代：
1995年，網景工程師Brendan Eich 花了10天時間設計了JavaScript語言。 1996年，微軟釋出了JScript，其實是JavaScript的逆向工程實現。 1997年，為了統一各種不同script指令碼語言，ECMA（歐洲計算機制造商協會）以JavaScript為基礎，制定了ECMAscript 標準規範。JavaScript和JScript都是 ECMAScript 的標準實現者，隨後各大瀏覽器廠商紛紛實現了ECMAScript 標準。
所以，ECMAScript是瀏覽器指令碼語言的規範，而各種我們熟知的js語言，如JavaScript則是規範的具體實現。
1.4、ECMAScript的快速發展
而後，ECMAScript就進入了快速發展期。
1998年6月，ECMAScript 2.0 釋出。
1999年12月，ECMAScript 3.0 釋出。這時，ECMAScript 規範本身也相對比較完善和穩定了，但是接下來的事情，就比較悲劇了。2007年10月，ECMAScript 4.0 草案發布。這次的新規範，歷時頗久，規範的新內容也有了很多爭議。在制定ES4的時候，是分成了兩個工作組同時工作的。
一邊是以 Adobe, Mozilla, Opera 和 Google為主的 ECMAScript 4 工作組。
一邊是以 Microsoft 和 Yahoo 為主的 ECMAScript 3.1 工作組。
ECMAScript 4 的很多主張比較激進，改動較大。而 ECMAScript 3.1 則主張小幅更新。最終經過 TC39 的會議，決定將一部分不那麼激進的改動保留髮布為 ECMAScript 3.1，而ES4的內容，則延續到了後來的ECMAScript5和6版本中
2009年12月，ECMAScript 5 釋出。
2011年6月，ECMAScript 5.1 釋出。
2015年6月，ECMAScript 6，也就是 ECMAScript 2015 釋出了。 並且從 ECMAScript 6 開始，開始採用年號來做版本。即 ECMAScript 2015，就是ECMAScript6。
2016年 6月，小幅修訂的《ECMAScript 2016標準》 (簡稱 ES2016)如期釋出， 這個版本可以看作是 ES6.1版，因為兩者的差異非常小(只新增了陣列例項的 includes 方法 和指數運算子)，基本上可以認為是同 一個標準 。
2017 年 6 月釋出了ES2017 標準。
因此， ES6 既是一個歷史名詞，也是一個泛指，含義是 5.1 版本以後的 JavaScript 的下一代 標準，涵蓋了 ES2015、ES2016、 ES2017 等，而 ES2015 則是正式名稱，特指當年釋出的正式版本的標準語言。
1.5、ECMAScript和JavaScript的關係
ECMA 是一個組織，由這個組織定義了一套標準，JavaScript 是實現。就等同於，JDBC是一套標準，MySQL驅動、Oracle驅動是具體的實現。由於ECMA的標準目前來說，也就只有JavaScript去實現了，所以可以通俗的理解為，ECMAScript就是JavaScript。
ECMAScript 簡稱 ECMA 或 ES
二、變數/常量
2.1、var定義變數
之前，我們寫js定義變數的時候，只有一個關鍵字：var。但是通過var定義的變數會有一個問題：就是通過該關鍵字定義的變數有時候會莫名的變成全域性變數 , 也就是說var定義的變數沒有塊級別的作用域，因為var的作用域是函式 。
2.1.1、案例1
原始碼test001.html
<scripttype="text/javascript">
if("Hello"=="Hello"){
varx=12;
}
alert(x);
</script>
執行結果
12
可以看到在一對花括號{}定義一個變數，在外部依然可以訪問到。
2.1.2、案例2
原始碼 test001.html
<scripttype="text/javascript">
for(vari=1;i<=6;i++){
console.info(i);
}
console.info("跳出迴圈後，i的值="+i);
</script>
執行結果
1
2
3
4
5
6
跳出迴圈後，i的值=7
結果分析
可以看出，在迴圈外部也可以獲取到變數i的值，顯然變數i的作用域範圍太大了，在做複雜頁面時，會帶來很大的問題。
2.2、let定義變數
let 所宣告的變數，只在 let 命令所在的程式碼塊內有效。
2.2.1、案例1
原始碼 test001.html
<scripttype="text/javascript">
for(leti=1;i<=6;i++){
console.info(i);
}
console.info("跳出迴圈後，i的值="+i);
</script>
執行結果
1
2
3
4
5
6
UncaughtReferenceError:iisnotdefined
結果分析
這樣，就把變數的i的作用域控制在了迴圈內部。
2.3、const定義常量
在之前ES5中，是沒有辦法定義常量的，但是到了ES6中，有了對常量的定義，即使用const關鍵字。
2.3.1、案例1
原始碼 test001.html
<scripttype="text/javascript">
//定義字串x
constx="HelloWorld";
console.info(x);
//再對x重新賦值
x=23;
console.info(x);
</script>
執行結果
HelloWorld
UncaughtTypeError:Assignmenttoconstantvariable.//不能對常量重新賦值
分析
可以看到，變數x的值是不能修改的。和Java語言中的final關鍵字類似。
三、字串擴充套件
3.1、新的API擴充套件
3.1.1、新增方法
includes() ：返回布林值，表示是否找到了引數字串。 startsWith() ：返回布林值，表示引數字串是否在原字串的頭部。 endsWith() ：返回布林值，表示引數字串是否在原字串的尾部。 repeat()：返回一個字串，根據給定的數值對字串重複指定的次數。
3.1.2、案例
<scripttype="text/javascript">
letstr="HelloWorld";
letb1=str.includes("Hello");
console.info("HelloWorld是否包含Hello字串:"+b1);//true
letb2=str.startsWith("Hello");
console.info("HelloWorld是否以Hello字串開頭:"+b2);//true
letb3=str.endsWith("World");
console.info("HelloWorld是否以World字串結尾:"+b3);//true
letvalue="Hello".repeat(3);
console.info(value);//HelloHelloHello
</script>
3.2、字串模板
3.2.1、之前寫法
在之前如果要定義很長的字串，是這樣的：
<scripttype="text/javascript">
letstr="Hello"+
"World"+
"Spring";
</script>
//雖然開發工具可以自動的幫助我們實現使用“+”號進行拼接，但是看起來總是那麼的不舒服。
3.2.2、模板語法
解決這個問題，可以使用ES6提供的字串模板來去實現，語法：使用【`】作為字串的模板語法。
3.2.3、案例1：隨意折行
<scripttype="text/javascript">
letstr=`Hello
World
Spring
`;
console.info(str);
</script>
/**
在兩個`之間的部分都會被作為字串的值，可以任意換行
*/
3.2.4、案例2：字串拼接
<scripttype="text/javascript">
//過濾掉不能被3整除的數
letname='HelloWorld';
letage=23;
letaddress="河南安陽";
letstr=`姓名是:${name}年齡是:${age}家庭住址是:${address}`
console.info(str);
</script>
3.2.5、案例3、呼叫函式
<scripttype="text/javascript">
letfn=function(){
return"HelloWorld";
}
letcontent=`你好,${fn()}`;
console.info(content);
</script>
四、解構表示式
4.1、說明
ES6中允許按照一定模式從陣列和物件中提取值，然後對變數進行賦值，這被稱為解構。
4.2、陣列解構
陣列解構允許我們按照一一對應的關係從陣列中提取值，並且將值一一賦值給對應的變數。
4.2.1、之前寫法
<scripttype="text/javascript">
letarrs=[1,2,3];
letx=arrs[0];
lety=arrs[1];
letz=arrs[2];
console.info(x);
console.info(y);
console.info(z);
</script>
/*
之前寫法中，如果要獲取陣列中每個元素的值分別賦值給變數，只能通過下標的方式.
*/
4.2.2、案例1
<scripttype="text/javascript">
letarrs=[1,2,3];
let[x,y,z]=arrs;//x，y，z將與arrs中的每個位置對應來取值。
console.info(x,y,z);
</script>
//let[x,y,z]=arrs注意：等號左邊的[]不是陣列，表示的解構，表示的從等號右邊的陣列中提取值。
4.2.3、案例2
<scripttype="text/javascript">
let[[num1,num2,num3],num,value]=[[1,2,3],34,'HelloWorld'];
console.info(num1,num2,num3,num,value);
</script>
4.3、物件解構
物件解構允許我們使用變數的名字匹配物件的屬性，匹配成功，則會將物件屬性的值賦值給變數。
4.3.1、之前寫法
<scripttype="text/javascript">
letperson={
name:"Hello",
age:12,
address:["河南","山東"]
};
console.info(person.name);
console.info(person.age);
console.info(person.address);
</script>
/*
之前寫法中，如果要獲取物件中的屬性，需要通過【物件名.屬性】的方式實現
*/
4.3.2、案例1
<scripttype="text/javascript">
letperson={
name:"Hello",
age:12,
address:["河南","山東"]
};
let{name,age,address}=person;//{}中的name、age和address需要和person中的屬性一致
console.info(name);
console.info(age);
console.info(address);
</script>
4.3.3、案例2
<scripttype="text/javascript">
letperson={
name:"Hello",
age:12,
address:["河南","山東"]
};
//當然也可以不一致,如果想要用其它變數接收，需要額外指定別名，需要用【：】指定
//name是person中的屬性名，冒號後面的myName是解構後要賦值給的變數。
let{name:myName,age:myAge,address}=person;
console.info(myName);
console.info(myAge);
console.info(address);
</script>
五、函式優化
5.1、引數展開/rest引數/剩餘引數/可變引數
剩餘引數是將剩下的引數收集起來放在一個數組中。
5.1.1、案例1：rest引數
<scripttype="text/javascript">
//函式展開/可變引數
functioninfo(num1,num2,...args){
alert(num1);
alert(num2);
alert(args);//30,40,50，args是一個數組，以陣列的方式接收函式中剩餘的引數
}
info(10,20,30,40,50);
</script>
作用：收集函式引數中剩餘的引數，必須作為最後一個引數位置。
5.1.2、案例2：展開陣列
<scripttype="text/javascript">
letarr1=[1,2,3];
letarr2=[4,5,6];
letarr3=[...arr1,...arr2];
alert(arr3);
</script>
5.2、函式引數預設值
5.2.1、之前如何實現
在ES6之前是不提供函式預設引數值的實現，只能通過變通寫法。
<scripttype="text/javascript">
//假設num2的預設值是2
functionadd(num1,num2){
if(!num2){
num2=2;
}
returnnum1+num2;
}
console.info(add(10));//12
console.info(add(10,8));//18
</script>
5.2.2、案例
<scripttype="text/javascript">
//假設num2的預設值是2
functionadd(num1,num2=2){//直接在引數上直接賦值即可
returnnum1+num2;
}
console.info(add(20));//22
console.info(add(20,8));//28
</script>
5.3、箭頭函式
5.3.1、之前定義函式
<scripttype="text/javascript">
//使用function關鍵字定義函式.
functionshow(username){
console.info("Hello:"+username);
}
show("張三");
</script>
5.3.2、案例1：單個引數
<scripttype="text/javascript">
letshow=username=>console.info("Hello:"+username);
show("李四");
</script>
/**
語法：
let函式名=引數名=>函式體
*/
5.3.3、案例2：多個引數
<scripttype="text/javascript">
letadd=(num1,num2)=>console.info(num1+num2);
add(10,20);
</script>
/*
多個引數需要使用【()】小括號給括起來.
*/
5.3.4、案例3：沒有引數
<scripttype="text/javascript">
letinfo=()=>console.info("列印資訊");
info();
</script>
/*
即使函式沒有引數，也需要使用【()】小括號來去表示，來去代表引數部分
*/
5.3.5、案例4：函式體有多條語句
<scripttype="text/javascript">
letlength=(str)=>{
if(str){
returnstr.length;
}
return0;
}
console.info(length("123"));
</script>
/*
函式體有多條語句時候，需要使用【{}】花括號包裹起來
*/
5.3.6、案例5：關於函式體的其他說明
如果函式中有單個表示式或語句：那麼1、函式體外部的{}是可以省略的；2、使用return可以省略。
5.3.6.1、細節1：如果是單個表示式，則自帶return
<scripttype="text/javascript">
//求兩個數的和
letsum=(num1,num2)=>{
returnnum1+num2;
}
alert(sum(10,30));
</script>
<scripttype="text/javascript">
//求兩個數的和
letsum=(num1,num2)=>num1+num2;//自帶return
alert(sum(10,30));
</script>
5.3.6.2、細節2：如果是單條語句，花括號可以省略
<scripttype="text/javascript">
//求兩個數的和
letsum=(num1,num2)=>{
alert(num1+num2);
}
sum(10,25);
</script>
<scripttype="text/javascript">
//求兩個數的和
letsum=(num1,num2)=>alert(num1+num2);
sum(10,25);
</script>
5.3.7、箭頭函式中的this
在普通函式中的this指向的是誰呼叫了這個函式，那麼這個函式中的this就是誰。
箭頭函式不繫結this，換句話說，箭頭函式是沒有自己的this，如果在箭頭函式中使用this，那麼this指向的是箭頭函式所在定義位置中的this，也就是說箭頭函式定義在哪裡，箭頭函式中的this就指向誰。通俗一點說，箭頭函式裡的this指的是定義這個箭頭函式時外層程式碼的this。
5.3.7.1、案例1
ES5程式碼
<scripttype="text/javascript">
functionPerson(){
this.username="HelloWorld";
this.run=function(){
console.info(this.username+"在跑步");
}
}
varp1=newPerson();
//HelloWorld在跑步，原因是run方法是p1物件呼叫者，那麼run方法中的this指向的就是p1這個例項物件，而p1的例項物件中有username屬性是HelloWorld.
p1.run();
varp2=p1.run;
//undefined在跑步,原因是run方法是window物件直接呼叫的，那麼run方法中的this指向的就是window,而window是沒有username屬性的，所以是undefined。
p2();
</script>
ES6程式碼
<scripttype="text/javascript">
functionPerson(){
this.username="HelloWorld";
this.run=()=>{
console.info(this.username+"在跑步");
}
}
varp1=newPerson();
//HelloWorld在跑步
p1.run();
varp2=p1.run;
//HelloWorld在跑步，可以看到，更改了run方法的呼叫，但是依然沒有影響到run方法中的this的指向
p2();
</script>
<scripttype="text/javascript">
functionPerson(){
this.username="HelloWorld";
this.run=()=>{
console.info(this.username+"在跑步");
}
}
//先呼叫一下
Person();
varp2=run;
//HelloWorld在跑步
p2();
</script>
可以發現：箭頭函式中的this的指向就是：箭頭函式定義在哪裡，那麼箭頭函式中的this指向就是哪裡，箭頭函式中的this就是外層程式碼this的引用。本例：箭頭函式中的this就是Person函式中的this。
5.3.7.2、案例2
ES5程式碼
<scripttype="text/javascript">
varperson={username:"HelloWorld"};
functionfn1(){
returnfunction(){
console.info(this.username);
}
}
varfn=fn1.call(person);
fn();//undefined
</script>
ES6程式碼
<scripttype="text/javascript">
varperson={username:"HelloWorld"};
functionfn1(){
return()=>{
console.info(this.username);
}
}
varfn=fn1.call(person);
fn();//HelloWorld
</script>
5.3.7.3、案例3
ES5程式碼
<scripttype="text/javascript">
varobj={
age:20,
run:function(){
console.info(this.age);
}
};
obj.run();//20
</script>
ES6程式碼
<scripttype="text/javascript">
varobj={
age:20,
run:()=>{
console.info(this.age);
}
};
obj.run();//undefined
</script>
5.4、物件的函式屬性簡寫
5.4.1、之前寫法
<scripttype="text/javascript">
letperson={
username:"張三",
run:function(address){//屬性：function函式
console.info(this.username+"在"+address+"跑步");
}
};
person.run("操場");
</script>
5.4.2、箭頭函式寫法
<scripttype="text/javascript">
letperson={
username:"張三",
run:(address)=>{
console.info(person.username+"在"+address+"跑步")//注意這裡不能用this.username
}
};
person.run("操場");
</script>
5.4.3、物件的函式屬性寫法
<scripttype="text/javascript">
letperson={
username:"張三",
run(address){//在物件中直接定義函式。
console.info(this.username+"在"+address+"跑步");
}
};
person.run("操場");
</script>
5.4.4、物件的其他簡單寫法
以前寫法
<scripttype="text/javascript">
letname="HelloWorld";
letage=23;
letperson={name:name,age:age};
console.info(person.name+","+person.age);
</script>
ES6新寫法
鍵值對出現了重複，ES6 中，如果屬性名和和所分配的變數名一樣，就可以從物件屬性中刪掉這些重複的變數名稱。
<scripttype="text/javascript">
letname="HelloWorld";
letage=23;
letperson={name,age};
console.info(person.name+","+person.age);
</script>
5.5、箭頭函式結合解構表示式
5.5.1、之前寫法
<scripttype="text/javascript">
letperson={
username:"張三",
age:12
}
//列印物件
functioninfo(obj){
console.info("姓名是："+obj.username);
}
info(person);
</script>
5.5.2、改進1:使用箭頭函式
<scripttype="text/javascript">
letperson={
username:"李四",
age:12
}
letinfo=(obj)=>console.info("姓名是："+obj.username);
info(person);
</script>
5.5.3、改進2:使用箭頭函式+解構表示式
<scripttype="text/javascript">
letperson={
username:"王五",
age:12
}
letinfo=({username:name})=>console.info("姓名是："+name);
info(person);
</script>
5.6、map和reduce
5.6.1、map：對映
5.6.1.1、說明
map()：該函式的引數接收一個函式fn，將原陣列中的所有元素用這個fn函式處理後放入新陣列返回。
5.6.1.2、案例1
給定一個數組，將陣列中的每個元素求平方然後組成一個新的陣列
<scripttype="text/javascript">
letarrs=[1,2,3,4,5,6];
letarrsNew=arrs.map(item=>{
returnitem*item;
});
console.info(arrsNew);
</script>
<scripttype="text/javascript">
letarrs=[1,2,3,4,5,6];
letarrsNew=arrs.map(item=>item*item);//使用箭頭函式改造一下
console.info(arrsNew);
</script>
5.6.2、reduce：合併/彙總
5.6.2.1、說明
reduce()：該函式的引數接收一個函式fn（必須）和一個初始值value（可選），fn函式接收兩個引數：
第一個引數是上一次reduce處理的結果 第二個引數是陣列中要處理的下一個元素
reduce() 會從左到右依次把陣列中的元素用reduce處理，並把處理的結果作為下次reduce的第一個引數。如果是第一次，會把前兩個元素作為計算引數，或者把使用者指定的初始值作為起始引數。
5.6.2.2、案例1：沒有初始值
給定一個數組，求陣列中所有元素的和
<scripttype="text/javascript">
letarrs=[1,2,3,4,5,6];
letresult=arrs.reduce((a,b)=>{
returna+b;
});
console.info(result);//21
</script>
5.6.2.3、案例2：有初始值
給定一個數組，求陣列中所有元素的和，指定一個初始值10
<scripttype="text/javascript">
letarrs=[1,2,3,4,5,6];
letresult=arrs.reduce((a,b)=>{
returna+b;
},10);
console.info(result);
</script>
5.7、filter：過濾
5.7.1、說明
用於把陣列中的某些元素過濾掉，返回剩下的符合條件的元素。實現方式是：filter函式的引數接收一個函式，然後把傳入的函式作用於每一個元素，然後根據返回值是true和false決定保留還是丟掉該元素。
5.7.2、案例
給定一個數組，過濾掉不能被3整除的數，然後返回新陣列。
<scripttype="text/javascript">
//過濾掉不能被3整除的數
letarrs=[12,34,56,41,24];
letresult=arrs.filter(function(item){
returnitem%3==0;
});
console.info(result);
</script>
<scripttype="text/javascript">
//過濾掉不能被3整除的數
letarrs=[12,34,56,41,24];
letresult=arrs.filter(item=>item%3==0);//使用箭頭函式實現
console.info(result);
</script>
5.8、forEach：迭代
5.8.1、說明
用來遍歷陣列
5.8.2、案例
<scripttype="text/javascript">
//過濾掉不能被3整除的數
letarrs=[12,34,56,41,24];
arrs.forEach(function(item,index){
alert(index+","+item);
})
</script>
<scripttype="text/javascript">
//過濾掉不能被3整除的數
letarrs=[12,34,56,41,24];
arrs.forEach((item,index)=>{alert(index+":"+item)});
</script>
六、模組化
6.1、說明
模組化就是把程式碼進行拆分，方便重複利用。類似java中的導包：要使用一個包，必須先導包。而JS中沒有包的概念，換來的是模組。模組就是一個js檔案。
模組功能主要由兩個命令構成：export和import。
export：命令用於規定模組的對外介面， import：命令用於匯入其他模組提供的功能，import去匯入模組只會匯入一次。
6.2、匯出變數/常量
6.2.1、方式1
步驟一：定義Utils.js檔案定義要匯出的變數/常量
exportletnum1=12;
exportletvalue="Hello";
exportconstnum3=78;
步驟二：新建test.html檔案匯入
<scripttype="module">
import{num1,value,num3}from"./Utils.js"
console.info(num1);
console.info(value);
console.info(num3);
</script>
6.2.2、方式2
定義Utils.js檔案定義要匯出的變數/常量
letnum1=12;
letvalue="Hello";
constnum3=78;
export{
num1,value,num3
}
新建test.html檔案匯入
<scripttype="module">
import{num1,value,num3}from"./Utils.js"
console.info(num1);
console.info(value);
console.info(num3);
</script>
6.2.3、方式3：export匯出時定義別名
定義Utils.js檔案定義要匯出的變數/常量
letnum1=12;
letvalue="Hello";
constnum3=78;
export{
num1asa,
valueasb,
num3asc
}
新建test.html檔案匯入
<scripttype="module">
import{a,b,c}from"./Utils.js"
console.info(a);
console.info(b);
console.info(c);
</script>
6.2.4、方式4：import匯入時也可以起別名
定義Utils.js檔案定義要匯出的變數/常量
letnum1=12;
letvalue="Hello";
constnum3=780;
export{
num1,
value,
num3
}
新建test.html檔案匯入
<scripttype="module">
import{num1asaa,valueasbb,num3ascc}from"./Utils.js"
console.info(aa);
console.info(bb);
console.info(cc);
</script>
6.2.5、方式5：支援星號方式
定義Utils.js檔案定義要匯出的變數/常量
letnum1=12;
letvalue="Hello";
constnum3=780;
export{
num1,
value,
num3
}
新建test.html檔案匯入
<scripttype="module">
import*asobjfrom"./Utils.js"
console.info(obj.num1);
console.info(obj.value);
console.info(obj.num3);
</script>
6.3、匯出類
定義Utils.js檔案定義要匯出的類
classPerson{
constructor(username,age){
this.username=username;
this.age=age;
}
info(){
console.info(this.username+","+this.age);
}
}
export{
Person
}
新建test.html檔案匯入
<scripttype="module">
import{Person}from"./Utils.js"
letp1=newPerson("HelloWorld",12);
p1.info();
</script>
6.4、匯出函式
定義Utils.js檔案定義要匯出的函式
constfn=()=>{
console.info("這個是函式")
}
export{
fn
}
新建test.html檔案匯入
<scripttype="module">
import{fn}from"./Utils.js"
fn();
</script>
6.5、default的用法
使用import命令的時候，使用者需要知道所要載入的變數名或函式名，否則無法載入。這就產生一個問題，使用模組者不願閱讀文件，不想知道變數名。此時就要用到export default命令，為模組指定預設輸出。
6.5.1、匯出具體的值
定義Utils.js檔案
exportdefault23;
新建test.html檔案匯入
<scripttype="module">
importbfrom"./Utils.js";
console.info(b);
</script>
6.5.2、匯出函式
定義Utils.js檔案
exportdefaultfunctionfn(){
console.log("Hello");
};
新建test.html檔案
<scripttype="module">
importfuncfrom"./Utils.js";
func();
</script>
6.5.3、匯出類
定義Utils.js檔案
classPerson{
info(){
console.log("info");
}
}
exportdefaultPerson;
新建test.html檔案
<scripttype="module">
importPersonfrom"./Utils.js";
newPerson().info();
</script>
6.5.4、混合使用
Utils.js
exportdefault23;
exportleta=12;
test.html
<scripttype="module">
importnum1,{a}from"./Utils.js";
console.info(num1,a);
</script>
6.5.5、總結
export default 向外暴露的成員，可以使用任意變數名來import 在一個模組中，export default 只允許向外暴露一次。 在一個模組中，可以同時使用export default 和export 向外暴露成員 export可以向外暴露多個成員，同時，如果某些成員，在import匯入時不需要，可以在import時不寫。 使用export匯出的成員，必須嚴格按照匯出時候的名稱，來使用{ }按需接收
6.6、多次引入模組只會被引入一次
utils.js
console.log("HelloWorld");
exportleta=12;
exportletb=23;
test.html
<scripttype="module">
import{a}from"./Utils.js";
import{b}from"./Utils.js";
console.log(a);
console.log(b);
</script>
6.7、模組與模組也可以import
A.js
exportletx=12;
exportlety="Hello"
B.js
import{x,y}from"./A.js";
exportletinfo=()=>{
console.log(x);
console.log(y);
}
test.html
<scripttype="module">
import{info}from"./B.js";
info();
</script>
6.8、import匯入有提升效果
Utils.js
exportleta=12;
exportletb=23;
test.html
<scripttype="module">
console.log(a);
console.log(b);
import{a,b}from"./Utils.js";
</script>
6.9、動態引入模組
6.9.1、需求
根據不同的條件引入不同的模組。
A.js
exportletx=12;
B.js
exportlety='Spring'
test.html
<scripttype="module">
leta=1;
if(a==1){
import{x}from'./A.js';
}else{
import{y}from'./B.js';
}
</script>
//報錯
6.9.2、import()解決
A.js
exportletx=12;
B.js
exportlety='Spring'
test.html
<scripttype="module">
leta=2;
if(a==1){
import("./A.js").then(function(respData){
console.info(respData.x);
})
}else{
import("./B.js").then(function(respData){
console.info(respData.y);
})
}
</script>
6.9.3、優化
A.js
exportletx=12;
B.js
exportlety='Spring'
test.html
<scripttype="module">
letparam=11;
constconfig=()=>{
if(param==1){
return"./A.js";
}else{
return"./B.js";
}
}
import(config()).then(function(respData){
console.log(respData);
});
</script>
❤️ 帥氣的你又來看了我
如果你覺得這篇內容對你挺有有幫助的話：
點贊支援下吧，讓更多的人也能看到這篇內容（收藏不點贊，都是耍流氓 -_-）
歡迎在留言區與我分享你的想法，也歡迎你在留言區記錄你的思考過程。
感謝大家的鼓勵與支援