ES6新文法概覽

標籤：箭頭函數   數組   fir   query   處理常式   time   span   引號   object   

簡介

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); //3let [first,...last] = [1,2,3];console.log(last); //[2,3]//對象解構let {name,age} = {name: "lisi", age: "20"};console.log(name); //lisiconsole.log(age); //20let {ept} = {};console.log(ept); //undefined

 

Rest + Spread

"..."

//Restfunction f(x, ...y) {  return x * y.length;}f(3, "hello", true) == 6//Spreadfunction 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

// Setsvar s = new Set();s.add("hello").add("goodbye").add("hello");s.size === 2;s.has("hello") === true;// Mapsvar m = new Map();m.set("hello", 42);m.set(s, 34);m.get(s) == 34;// Weak Mapsvar wm = new WeakMap();wm.set(s, { extra: 42 });wm.size === undefined// Weak Setsvar 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新文法概覽