###最近學習了ES6，被它更簡潔的代碼編寫方式、面向對象以及模塊化開發所吸引。ES6有一定的學習成本而且知識點比較瑣碎，我把自己經常用到的知識點進行了整理。 ####安裝與配置 es6很強大，遺憾的是所有瀏覽器都沒有完美支持它。因此我們需要通過babel將es6轉換成es5讓我們的代碼在瀏覽器端運行。 我本人用的是webpack+babel，你也可以使用gulp或者直接將babel的browser.js引入，將type設為"text/babel"。 首先安裝webpack ~~~ npm install webpack --save-dev ~~~ webpack需要安裝相應的loader加載器—babel-loader，別忘了安裝轉換規則—babel-preset-es2015 ~~~ npm install babel-loader --save-dev npm install babel-preset-es2015 --sava-dev ~~~ 接下來簡單地配置一下webpack.config.js文件 ~~~ module.exports = { entry: "./main.js", output: { path: __dirname, filename: "after.js" }, module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', query: { presets: ['es2015'] } } ] }, } ~~~ 上面的main.js就是我們即將要寫的es6代碼，通過在命令行輸入`webpack`將其轉化成es5并保存在after.js中，因此我們只需要引入after.js即可。如果你希望webpack可以實時監聽并編譯，可以安裝webpack-dev-server，這里不多說明。 準備工作已經完成，接下來我們可以測試一下，我準備了一個用es6編寫的main.js文件 ~~~ class MyClass{ constructor(x,y){ this.x=x; this.y=y; } print(){ return `(${this.x},${this.y})`; } } var myclass=new MyClass(2,3); console.log(myclass.print()); ~~~ 運行webpack后看看生成的after.js里面都有啥 ~~~ //部分代碼 var MyClass = function () { function MyClass(x, y) { _classCallCheck(this, MyClass); this.x = x; this.y = y; } _createClass(MyClass, [{ key: "print", value: function print() { return "(" + this.x + "," + this.y + ")"; } }]); return MyClass; }(); var myclass = new MyClass(2, 3); console.log(myclass.print()); ~~~ 可以看到webpack已經將es6轉化為es5，現在可以盡情使用es6了。 ###let和const ####let let是新的變量聲明方式，使用方法類似于var，但是let聲明的變量只在它所在的代碼塊內有效 ~~~ { var name="SunnyChuan"; let age=22; } console.log(name); //"SunnyChuan" console.log(age); //age is not defined ~~~ let變量只在自己的塊級作用域內有效，也就意味著使用let可以代替閉包解決常見的for循環引用同一個變量的問題 ~~~ for(let i=0;i<5;i++)console.log(i); //0 1 2 3 4 ~~~ let不存在變量聲明提升，必須先聲明后使用 ~~~ console.log(name); //ReferenceError let name="SunnyChuan"; ~~~ let不允許在同一個作用域內重復聲明同一個變量（無論新變量是let/const/var） ~~~ let name="SunnyChuan"; var name="DannyQin"; //報錯 ~~~ ####const const是es6增加的另一個變量聲明方式，它用來聲明常量，并且聲明后變量的值不能再更改。因此一旦聲明必須初始化，不能稍后再賦值 ~~~ const a=100; a=10; //TypeError const b //SyntaxError; b=100; ~~~ const和let一樣存在自己的作用域，個人認為除了變量的值是否可以改變以及是否必須聲明立即初始化之外，let和const沒有其他區別。需要注意的是，對于對象，數組等復合型的變量，const保證的是地址不變而不是值不變 ~~~ const arr=[1,2,3]; arr.push(4); //地址不變，改變值是可以的 arr=[5]; //修改了地址，報錯 ~~~ ###變量的解構賦值 es6支持解構賦值的形式將變量的賦值簡單化，數組/對象/字符串/數值/布爾/函數均可解構賦值。最為常用的是數組和對象。 ####數組的解構賦值 只要等號兩邊的模式相同即可解構成功 ~~~ var [a,b,c]=[1,2,3] //a=1,b=2,c=3 var [a,,b] //a=1,b=3 var [a,..b] //a=1,b=[2,3] ~~~ 當左邊的數量大于右邊時，右邊會默認用undefined進行補充，導致解構不成功 ~~~ let [a,b,c]=[1,2] //a=1,b=2,c=undefined ~~~ 允許指定默認值，默認值只有當左邊的變量所對應的右邊的值嚴格等于undefined才生效 ~~~ var [a,b,c=3]=[1,2]; //a=1,b=2,c=3 var [a,b,c=3]=[1,2,null]; //a=1,b=2,c=null ~~~ ####對象的解構賦值 與數組不同的是，對象解構賦值依靠的是key值，因此只要左邊和右邊key值同名即可（變量名等于屬性名），無所謂順序，而數組是按照順序賦值的 ~~~ var {name,age}={name:"SunnyChuan",age:22}; //name="SunnyChuan" age=22 //相當于 var {name:name,age:age}={name:"SunnyChuan",age:22}; ~~~ 按照上面的匹配方式，變量名必須等于屬性名，如果不相等則匹配失敗。如果變量名不等于屬性名，只能使用屬性名：變量名的形式，不能省去變量名。這時候，屬性只不過是一個模式，真正被賦值的是變量 ~~~ var {name:myName,age:myAge}={name:"SunnyChuan",age:22}; //name is not defined, age is not defined, myName="SunnyChuan", myAge=22 ~~~ 對象解構賦值也提供了默認值，與數組相同，只有屬性值嚴格等于undefined時才生效 ~~~ var {name,age=22}={name:"SunnyChuan"} //name="SunnyChuan" age=22 var {name,age=22}={name:"SunnyChuan",age:null} //name="SunnyChuan" age=null ~~~ 解構賦值最常用的地方就是交換變量。不需要額外的臨時變量temp，一句代碼就搞定 ~~~ [x,y]=[y,x] ~~~ ###字符串/數值/數組的擴展 ####字符串的擴展 includes(str)，返回布爾值，是否在當前字符串中找到了str ~~~ "SunnyChuan".includes("Chuan"); //true ~~~ startsWith(str)，返回布爾值，當前字符串是否以str開頭 ~~~ "SunnyChuan".startsWidth("Sunny"); //true ~~~ endsWith(str)，返回布爾值，當前字符串是否以str結尾 ~~~ "SunnyChuan".endsWith("Chuan"); //true ~~~ repeat(n)，將當前字符串重復n次（可以理解為在原有的基礎上重復n-1次）并返回新字符串，如果n是小數則向下取整。當n小于等于0時，返回空字符串 ~~~ "x".repeat(3); // "xxx" ~~~ 模板字符串 ~~~ var name="SunnyChuan"; var str=`hello ${name},this is ES6 `; //等同于"hello"+name+",this is ES6"; ~~~ ####數值的擴展 Number.isFinite(n)，布爾值，檢查n是否有窮，與es5的isFinite()不同的是，它不會進行類型轉換，因此只對真正的數值有效 ~~~ Number.isFinite(10); //true Number.isFinite(NaN); //false Number.isFinite(Infinity); //false Number.isFinite("10"); //false ~~~ Number.isNaN(n)，布爾值，檢查n是否是NaN，與es5的isNaN()不同的是，它不會進行類型轉換，因此只對真正的NaN有效 ~~~ Number.isNaN(NaN); //true Number.isNaN("str"); //false ~~~ Number.isInteger(n)，布爾值，檢查n是否是整數，需要注意1.0和1是同一個值 ~~~ Number.isInteger(1); //true Number.isInteger(1.0); //true Number.isInteger(1.2); //false ~~~ Math.trunc(n)，去除小數部分并返回（正數向下取整，負數向上取整） ~~~ Math.trunc(1.2); //1 Math.trunc(-1.2); //-2 ~~~ Math.sign(n)，布爾值，n是正數返回+1，是負數返回-1，0返回0，-0返回-0，其他值返回NaN ~~~ Math.sign(100); //+1 Math.sign(-100); //-1 Math.sign(0); //0 Math.sign(-0); //-0 Math.sign("str"); //NaN ~~~ ####數組的擴展 Array.from(list)，將list轉化成真正的數組，常用于將nodeList/arguments等偽數組 轉化成數組 ~~~ var obj={a:1,b:2,c:3}; Array.from(obj); //[1,2,3] var div=document.getElementsByTagName("div"); Array.from(div); //[[object HTMLDivElement],[object HTMLDivElement],[object HTMLDivElement]] ~~~ includes(n)，布爾值，檢查當前數組是否包含n，可以接收兩個參數，第二個參數代表搜索的起始位置（負數代表從后往前） ~~~ [1,2,3,4].include(2); //true [1,2,3,4].include(2,2); //false [1,2,3,4].include(2,-3); //true ~~~ 數組新增三種遍歷方式：entries()（遍歷key和value）/keys()（遍歷key）/values()（遍歷value） ~~~ for(let v of ["a","b","c","d"].values()){ console.log(v); } //"a" "b" "c" "d" for(let k of ["a","b","c","d"].keys()){ console.log(k); } //0 1 2 3 for(let [k,v] of ["a","b","c","d"].entries()){ console.log(k,v); } //0 "a" 1 "b" 2 "c" 3 "d" ~~~