[TOC] ## 前言 es6作為最新的js語言版本，有很多特性是不得不曉的。下面將語法中常用的分析出來，對應到基本對象類型的會在對象里描述。 ## 編譯運行 ### nodejs * nodejs本身已經直接支持es6的大部分語法。 ~~~ var traceur=require("traceur"); var fs=require("fs"); var content=fs.readFileSync("es6-file.js").toString(); var result=traceur.compile(contents,{ filename:"es6-file.js", sourceMap:true, module:"commonjs" }); if(result.error){ throw result.error; } //轉換之后的es5代碼 fs.writeFileSync("out.js",result.js); //sourceMap對應的map文件 fs.writeFileSync("out.js.map",result.sourceMap); ~~~ ### 瀏覽器支持 現代瀏覽器比如火狐、谷歌等也已經支持了部分的es6語法，但部分手機瀏覽器以及落后版本，需要用babel轉換es6語法為es5才可以正常使用。 ### traceur編譯器 可以通過traceur來進行es6語法的轉換。 1. 直接插入網頁,當然你可以在谷歌瀏覽器運行這些新穎的語法，因為本來谷歌就是v8引擎支持的，但其他瀏覽器不一定支持。 ~~~ <script src="..../traceur.js" type="text/javascript"></script> <script> //打開實驗選項 traceur.options.experimental=true; </script> <script type="module"> //type =module 注意 //es6 codes here </script> ~~~ 2. 在線轉換 通過線上地址，可以幫你吧es6的語法轉換為標準的，[前往官網地址](http://google.github.io/traceur-compiler/demo/repl.html)，你也可以在這個頁面練習使用理解es6的不同。 3. 命令行轉換--traceur模塊 ~~~ cnpm i -g traceur; traceur demo.js;//直接運行 traceur --script demo.es6.js --out demo.es5.js; //為了避免某些加載不成功，最好最后加上--experimental ~~~ ## 變量聲明 ### 局部變量聲明-- let * let關鍵字，技能點：變量作用域（改變作用域），用于定義局部作用域。 ~~~ for(var i=0;i<5;i++){ arr[i]=function(){console.log("結果是："+i);} } arr[2]();//原來的位置用let 結果是2 ~~~ * 變量提升問題 ~~~ var j=1; function demo(){ console.log(j);//提示undefined ,因為布局有定義變量，先聲明了變量，而賦值延遲 var j=3; console.log(j); } demo(); ~~~ ### 常量聲明--const * const 常量：不可修改，如果為簡單值，本身不可修改;但如果是對象，指的地址不可修改，并非值。 ~~~ const name="張三"; name="張三2"; //報錯 提示常量不可改變 const person={"name":"張三","sex":"male"}; person.name="李四"; console.log(person.name);//name改為了李四 var person2=person; person2.name="晚五"; console.log(person2.name); console.log(person.name);//賦值的時候給的是地址，原對象的值也會改變 ~~~ ## 其他 * 其他的對應到具體對象類型的語法寫在具體對象的拓展語法中。 ## 解構 * 解構分為對象解構以及數組解構，詳細語法參考具體對象文檔 * 具體用途 1. 交換變量 ` [x,y]=[y,x]; ` 2. 從函數返回多個值,并且方便的取值 ~~~ function demo(){ return [1,2,3];//return {name:1,str:2} } var [a,b,c]=demo; ~~~ 3. 函數參數的定義 ~~~ function demo(x,y,z){ } demo(x:1,y:2,z:3)；//對于提取json中數值非常有效 ~~~ 4. 函數參數默認值 ~~~ function demo(x=1,y=7,z=0){ //這樣的寫法避免了在函數內部寫 var x=config.foo||"default foo"; } ~~~ 5. 遍歷map結構 任何部署了Iterator的接口的對象，都可以通過for...of循環遍歷。 ~~~ var map=new Map(); map.set("first","hello"); map.set("first","world"); for(let [key,value] of map){ console.log(key+" is "+value); } for(let [key] of map){ //... } for(let [,value] of map){ //... } ~~~ 6. 指定得到模塊的方法,可以定義具體需要的方法，使得輸入語句非常清晰。 `const {sourceCode}=require("source-map");` ## set和map數據結構 ### js提供了新的數據結構set，它類似于數組，只不過沒有重復的值 ~~~ var s=new Set(); [1,1,556,6,89].map(x=>s.add(x)); //允許接受一個數組作為初始化 var ar=new Set([3,6,6,768,0]); //常用的四個方法 s.add(value); s.delete(value); s.has(value); s.clear(); //set 轉換為數組 Array.from(ar); ~~~ ### map結構 * map結構主要是針對js中只能用字符串當鍵，而map中對象，元素等都可以。可以接受一個數組進行初始化。 ~~~ var map=new Map([['name',12],["value",123]]); map.has("name");//true map.get("name");// 12 map.set(["a"],3444); map.get(["a"]) //未被定義 var k1=["a"]; map.set(k1,3444); map.get(k1) //3444 var k2=["a"]; map.set(k2,3444);//雖然值相同 但是不同 識別為兩個鍵 ~~~ * 屬性和方法 size 返回成員總數 set(key,value);設置一個鍵值對 get(key) 獲取對應鍵的值 has(key) 是否具有某個鍵，返回布爾值 delete(key) 刪除某個鍵 ，刪除成功返回true,沒有刪除失敗返回false clear() 清除所有成員 * 遍歷 Map 提供三個遍歷器： keys(),value(),entires() ~~~ for(let key of map.keys()){ console.log(key) } for(let value of map.values()){ console.log(value) } for(let item of map){ console.log(item[0],item[1]) } //也可以用forEach() map.forEach(function(value,key,map){ console.log(key,value) }) ~~~ * WeakMap 與map的區別是只接受對象作為鍵，不接受原始數據類型作為鍵名 使用場景之一就是某個dom元素對應的結構，當這個元素移除的時候，對應的記錄也會移除。 ## Iterator 遍歷器 Iterator 是一種任何協議，任何對象只要部署了這個協議，就可以完成遍歷操作。在es6中遍歷操作特指for...of循環。 它的作用主要是兩個，一個是為遍歷對象的屬性提供了統一的訪問接口，而是讓對象的屬性能夠被依次排列。 規定如下：只要部署了next方法的對象，就具備了這功能，next方法必須返回一個包含value和done的兩個屬性的對象。value是當前遍歷位置的值，done是一個布爾值，表示遍歷是否結束。 區分for in循環，這個可以拿到值，而后者只能拿到屬性鍵。一般的對象不可以利用for...of，但都可以用for...in獲取到屬性鍵。 ~~~ var arr=[1,3,33,90]; for(var item in arr){ console.log(item);//0 1 2 3 鍵 } for(var itemof arr){ console.log(item);// 1 3 33 90 鍵值 } ~~~ ## Generator 所謂的Generator，簡單說就是一個內部狀態的遍歷器，每調用一次遍歷器，內部狀態發生一次改變。es6引入Generator函數就是完全控制內部狀態的變化，依次遍歷這些狀態。特征：1 function關鍵字后面加`*` 2函數內部使用yield語句定義遍歷器的每個成員，即不同的內部狀態（yield英語就是產出）； 用途：拓展延伸，本身用途之一就是可以當做暫停函數，跳出，與return類似，不同的是具有記憶位置的作用，下次開始從記憶位置開始。如果從Generator直接return就會暫停，直到Generator.next() 之后才會繼續執行。 ~~~ function* generator(){ yield "1"; yield "2"; return "ending"; } var hw=generator(); hw.next(); // {value: "1", done: false} hw.next(); {value: "2", done: false} hw.next(); {value: "ending", done: true} hw.next(); {value: undefined, done: true} ~~~ * 拓展說明：部分效果上可以代替回調函數，等執行完成時，調用next() 即可 * 使用for of遍歷時 ，不需要使用next * yeild* ,yeild后面追加的為遍歷器時，需要加*號 ## Promise對象 es6用這個對象代表了將來要發生的某個事件，它的好處是可以按照同步的方式書寫回調或者異步的程序，而不用層層嵌套。比如請求后臺數據時。 var promise=new Promise(function(resolve,reject){ if(/*異步操作成功*/){ resolve(value) }else{ reject(error) }}) promise.then(fuction(value){ //sucess },function(value){ //failure }) * 鏈式操作 then方法返回的是一個promise對象，因此可以采用鏈式操作，不斷的依次執行 promise.then(fn).then(fn()); * catch方法，捕捉錯誤 cathch方法是then的別名，用于發生錯誤時回調函數。 .then().catch(fn(error)); * all方法 用于將多個異步操作，包裝成一個新的Promise對象。 * resolve ,用于將現在的對象轉換為Promise對象。 * async 函數用來取代回調的另一種方式 函數前面加async關鍵字，對于異步的操作，前面加await，后面的語句就會等異步操作完成才會執行后面的程序。 ## class和module * Class 通過class關鍵字可以定義類。 ~~~ class Point{ constructor(x,y){//構造器，需要傳入x y兩個參數 this.x=x;//this代表實例對象 this.y=y; } toString(){ return this.x+this.y; } } var point=new Point(2,3); point.toString();//23 //通過extends 實現繼承 class colorPoint extends Point{ constructor(x,y,color){//構造器，需要傳入x y color兩個參數 this.color=color; super(x,y);//等同于super. constructor(x,y),super暫不支持 } toString(){ return this.color+super(); }} ~~~ * module : export and import es6實現了模塊功能，試圖解決js代碼上的依賴和部署問題，取代現有的commonJs和AMD規范，成為瀏覽器和服務器的通用模塊解決方案。 es6中有兩個關鍵字 export和import，export用于規定對外規范，import用于輸入其他模塊的功能。 es6中允許獨立的js文件作為模塊，也就是一個文件可以調用另一個文件，最簡單的文件就是一個js文件，里面export輸出變量。 profile.js var firstName="asfc"; var lastName="asfc"; export{ firstName,lastName } //其他文件使用： import {firstName,lastName} from "./profile.js"; //輸出方法 export function area(){ console.log('area is 960'); } //導入整個模塊 module circle from "circle"; circle,fn1(); circle,fn2(); //模塊默認方法 默認屬性的設置 export default function default(){} export default var demo=12; // 模塊繼承 circlePlus export * from 'circle'; ## 參考文檔 * es6入門（阮一峰 著）等