ES6新語法概覽
簡介
ES6是JavaScript語言的新一代標準，加入了一些新的功能和語法，正式發布於2015年6月，亦稱ES2015；該標準由ECMA（歐洲計算機制造聯合會）的第39號技術專家委員會（TC39）制訂，ES7正在制訂中，據稱會在2017年發布。
語法
箭頭函數、this
ES6中可以使用 => 作為函數表達形式，極簡風格，參數＋ => ＋函數體。
var foo = function(){return 1;}; //等價於 let foo = () => 1;
let nums = [1,2,3,5,10]; let fives = []; nums.forEach(v => {if (v % 5 === 0) fives.push(v); }); console.log(fives); //[5,10]
箭頭函數中的 this 指的不是window，是對象本身。
function aa(){ this.bb = 1; setTimeout(() => { this.bb++; //this指向aa console.log(this.bb); },500); } aa(); //2
let、const
-
ES6 推薦在函數中使用 let 定義變量
- const 用來聲明一個常量，但也並非一成不變的
-
let 和 const 只在最近的一個塊中（花括號中）有效
var a = 1; { let a = 2; console.log(a); //2 } console.log(a); //1
const A = [1,2]; A.push = 3; console.log(A); //[1,2,3] A = 10; //Error
Classes
ES6中增加了類的概念，其實ES5中已經可以實現類的功能了，只不過使用Class實現可以更加清晰，更像面向對象的寫法。
class Animal { constructor(){ console.log(‘我是一個動物‘); } } class Person extends Animal { constructor(){ super(); console.log(‘我是一個程序員‘); } } let aa = new Person(); //我是一個動物 //我是一個程序員
解構
解構賦值是ES6中推出的一種高效、簡潔的賦值方法
沒啥說的，直接上代碼:
//通常情況下 var first = someArray[0]; var second = someArray[1]; var third = someArray[2]; //解構賦值 let [first, second, third] = someArray; //比上面簡潔多了吧 //還有下面例子 let [,,third] = [1,2,3]; console.log(third); //3 let [first,...last] = [1,2,3]; console.log(last); //[2,3] //對象解構 let {name,age} = {name: "lisi", age: "20"}; console.log(name); //lisi console.log(age); //20 let {ept} = {}; console.log(ept); //undefined
Rest + Spread
"..."
//Rest function f(x, ...y) { return x * y.length; } f(3, "hello", true) == 6 //Spread function f(x, y, z) { return x + y + z; } f(...[1,2,3]) == 6
對象字面量擴展
- 可以在對象字面量裏面定義原型
- 定義方法可以不用function關鍵字
- 直接調用父類方法
//通過對象字面量創建對象 var human = { breathe() { console.log(‘breathing...‘); } }; var worker = { __proto__: human, //設置此對象的原型為human,相當於繼承human company: ‘freelancer‘, work() { console.log(‘working...‘); } }; human.breathe();//輸出 ‘breathing...’ //調用繼承來的breathe方法 worker.breathe();//輸出 ‘breathing...’
模版字符串
ES6中提供了用反引號｀來創建字符串，裏面可包含${…}等
`This is a pretty little template string.` `In ES5 this is not legal.` let name = "Bob", time = "today"; `Hello ${name}, how are you ${time}?`
Iterators（叠代器）
ES6 中可以通過 Symbol.iterator 給對象設置默認的遍歷器，直到狀態為true退出。
var arr = [11,12,13]; var itr = arr[Symbol.iterator](); itr.next(); //{ value: 11, done: false } itr.next(); //{ value: 12, done: false } itr.next(); //{ value: 13, done: false } itr.next(); //{ value: undefined, done: true }
Generators
ES6中非常受關註的的一個功能，能夠在函數中間暫停，一次或者多次，並且之後恢復執行，在它暫停的期間允許其他代碼執行，並可以用其實現異步。
Run-Stop-Run...
function *foo(x) { var y = 2 * (yield (x + 1)); var z = yield (y / 3); return (x + y + z); } var it = foo( 5 ); console.log( it.next() ); // { value:6, done:false } console.log( it.next( 12 ) ); // { value:8, done:false } console.log( it.next( 13 ) ); // { value:42, done:true }
generator能實現好多功能，如配合for...of使用，實現異步等等，我在這裏就不多說了，詳見。
for…of && for…in
for…of 遍歷（數組）
let arr = [1,2,3]; for (let itr of arr) { console.log(itr); //1 2 3 }
for…in 遍歷對象中的屬性
let arr = [1,2,3]; arr.aa = ‘bb‘; for (let itr in arr) { console.log(itr); //0 1 2 aa }
Map + Set + WeakMap + WeakSet
-
Set 對象是一組不重復的值，重復的值將被忽略，值類型可以是原始類型和引用類型
-
WeakSet是一種弱引用，同理WeakMap
// Sets var s = new Set(); s.add("hello").add("goodbye").add("hello"); s.size === 2; s.has("hello") === true; // Maps var m = new Map(); m.set("hello", 42); m.set(s, 34); m.get(s) == 34; // Weak Maps var wm = new WeakMap(); wm.set(s, { extra: 42 }); wm.size === undefined // Weak Sets var ws = new WeakSet(); ws.add({ data: 42 });
Proxies
Proxy可以監聽對象身上發生了什麽事情，並在這些事情發生後執行一些相應的操作。
//定義被偵聽的目標對象 var engineer = { name: ‘Joe Sixpack‘, salary: 50 }; //定義處理程序 var interceptor = { set: function (receiver, property, value) { console.log(property, ‘is changed to‘, value); receiver[property] = value; } }; //創建代理以進行偵聽 engineer = Proxy(engineer, interceptor); //做一些改動來觸發代理 engineer.salary = 60; //控制臺輸出：salary is changed to 60
Symbols
Symbol 是一種新的數據類型，它的值是唯一的，不可變的。ES6 中提出 symbol 的目的是為了生成一個唯一的標識符，不過你訪問不到這個標識符.
var sym = Symbol( "Symbol" ); console.log(typeof sym); // symbol
如果要獲取對象 symbol 屬性，需要使用Object.getOwnPropertySymbols(o)
Promises
-
ES6 對 Promise 有了原生的支持，一個 Promise 是一個等待被異步執行的對象，當它執行完成後，其狀態會變成 resolved 或者 rejected
-
Promises是處理異步操作的一種模式，之前在很多三方庫中有實現，比如jQuery的 deferred 對象。當你發起一個異步請求，並綁定了.when(), .done()等事件處理程序時，其實就是在應用promise模式
function timeout(duration = 0) { return new Promise((resolve, reject) => { setTimeout(resolve, duration); }) } var p = timeout(1000).then(() => { return timeout(2000); }).then(() => { throw new Error("hmm"); }).catch(err => { return Promise.all([timeout(100), timeout(200)]); })
想要了解promise實際應用等，詳見。
小結
總之，ES6還是有很多棒棒的語法，有利於精簡代碼，高效開發；只不過一些低級別瀏覽器不支持，可以用Babel等工具把ES6轉化成ES5，但是有些語法還是不夠完善；但是在不久的將來，ES6一定會成為主流的。對了，還有ES7、8、9……
ES6新語法概覽