1、Let&const 2、解構表達式 3、箭頭函數 4、解構表達式+箭頭函數 5、Promise對象 6、模塊化 html文件(module.html)： 模塊1（module1.js）： 模塊2（module2.js）： 最後將模塊1打包成bundle.js文件即可運行html文件。 ...
1、Let&const
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>es-let&const</title> </head> <body> <script type="text/javascript"> /* var定義的變數在代碼塊外面還可以使用 */ for(var i=0;i<10;i++){ console.debug(i); } console.debug("塊外i:"+i); /* let定義的變數作用域為代碼塊之內 */ for(let j=0;j<10;j++){ console.debug(j); } //console.debug("塊外j:"+j); /* const定義的是常量，不能被改變且作用域為代碼塊之內 */ { const k=23; //k=34; console.debug(k); } //console.debug("塊外j:"+k); </script> </body> </html>
2、解構表達式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>解構表達式</title> </head> <body> <script type="text/javascript"> /* 數組的解構：位置要對應 */ const arr=["我",4,"不吹牛的",true]; const [a,b,c,d]=arr; console.debug("a：",a); console.debug("b：",b); console.debug("c：",c); console.debug("d：",d); /* 對象的解構：屬性名必須對應 */ let user={ name:"小明", age:10, hobby:"吃糖" } const {name,hobby}=user; const {sex}=user; console.debug(name+hobby); console.debug("sex:"+sex); </script> </body> </html>
3、箭頭函數
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>箭頭函數</title> </head> <body> <script type="text/javascript"> /* 傳統寫法*/ let le=function (food) { console.debug("不能浪費"+food); } le("食物") /* 箭頭函數：只有一個參數可以不寫括弧*/ let me= food =>{ console.debug("浪跡在"+food); } me("天上") setInterval(()=>{ console.debug("流浪"); },1000) </script> </body> </html>
4、解構表達式+箭頭函數
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>解構+箭頭函數</title> </head> <body> <script type="text/javascript"> let haha=({name,sex})=>{ console.debug(name+"是"+sex+"人"); } let user={ name:"小明", sex:"男" } haha(user) </script> </body> </html>
5、Promise對象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Promise對象</title> </head> <body> <script type="text/javascript"> /*隨機一個數，如果這個數大於0.5就為真，小於等於就為假*/ const promise=new Promise((resolve ,reject)=>{ setTimeout(()=>{ let value= Math.random(); if(value>0.5){ resolve(value); }else { reject(value); } },1000) }) promise.then(res=>{ console.debug(res+"，真") }).catch(res=>{ console.debug(res+"，假") }) </script> </body> </html>
6、模塊化
html文件(module.html)：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模塊化</title> <!-- bundle.js文件是將模塊module1.js打包得到的 --> <script type="text/javascript" src="dist/bundle.js"></script> </head> <body> </body> </html>
模塊1（module1.js）：
import {name,study} from "./module2"
study();
document.write(name)
模塊2（module2.js）：
export var name="小明"; export var study=function () { console.debug("出去玩啦") }
最後將模塊1打包成bundle.js文件即可運行html文件。
