ES6/ES2015常用語法 (上)
ECMAScript 6(以下簡稱ES6) 是JavaScript語言的下一代標準。因為當前版本的ES6是在2015年釋出的,所以又稱ECMAScript 2015。
也就是說,ES6就是ES2015。
最常用的ES6特性:
let,const,class,extends,super,arrow function,template string,destructuring,default,rest arguments
這些就是ES6最常用的幾個語法,下面便對他們進行講解。
let,const
這兩個的用途與var
首先來看下面這個例子:
var name = 'Jack';
while (true) {
var name = 'Tom';
console.log(name); // Tom
break;
}
console.log(name) //Tom
使用var兩次輸出的都是 'Tom',這是因為ES5只有全域性作用域和函式作用域,沒有塊級作用域,這帶來很多不合理的場景。第一種場景就是你現在看到的內層變數覆蓋外層變數。而let則實際上為JavaScript新增了塊級作用域。用它所宣告的變數,只在let
let name = 'Jack';
while (true) {
let name = 'Tom';
console.log(name); // Tom
break;
}
console.log(name); // Jack
另外一個var帶來的不合理場景就是用來計數的迴圈變數洩露為全域性變數,看下面的例子:
var a = []; for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); // 10
上面程式碼中,變數i是var宣告的,在全域性範圍內都有效。所以每一次迴圈,新的i值都會覆蓋舊值,導致最後輸出的是最後一輪的i的值。而使用let則不會出現這個問題。
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 6
再來看一個更常見的例子,瞭解下如果不用ES6,而用閉包如何解決這個問題。
var clickBoxs = document.querySelectorAll('.clickBox');
for (var i = 0; i < clickBoxs.length; i++){
clickBoxs[i].onclick = function(){
console.log(i);
}
}
我們本來希望的是點選不同的clickBox,顯示不同的i,但事實是無論我們點選哪個clickBox,輸出的都是5。下面我們來看下,如何用閉包搞定它。
function iteratorFactory(i){
var onclick = function(e){
console.log(i);
};
return onclick;
}
var clickBoxs = document.querySelectorAll('.clickBox');
for (var i = 0; i < clickBoxs.length; i++){
clickBoxs[i].onclick = iteratorFactory(i);
}
const也用來宣告變數,但是宣告的是常量。一旦宣告,常量的值就不能改變。
const PI = Math.PI;
PI = 23; //Module build failed: SyntaxError: /es6/app.js: "PI" is read-only
當我們嘗試去改變用const宣告的常量時,瀏覽器就會報錯。
const有一個很好的應用場景,就是當我們引用第三方庫的時宣告的變數,用const來宣告可以避免未來不小心重新命名而導致出現bug:
const monent = require('moment');
class,extends,super
這三個特性涉及了ES5中最令人頭疼的的幾個部分:原型、建構函式,繼承...你還在為它們複雜難懂的語法而煩惱嗎?你還在為指標到底指向哪裡而糾結萬分嗎?
有了ES6我們不再煩惱!
ES6提供了更接近傳統語言的寫法,引入了Class(類)這個概念。新的class寫法讓物件原型的寫法更加清晰、更像面向物件程式設計的語法,也更加通俗易懂。
class Animal {
constructor(){
this.type = 'animal';
}
says(say){
console.log(this.type + ' says ' + say);
}
}
let animal = new Animal();
animal.says('hello'); //animal says hello
class Cat extends Animal {
constructor(){
super();
this.type = 'cat';
}
}
let cat = new Cat();
cat.says('hello'); //cat says hello
上面程式碼首先用class定義了一個“類”,可以看到裡面有一個constructor方法,這就是構造方法,而this關鍵字則代表例項物件。簡單地說,constructor內定義的方法和屬性是例項物件自己的,而constructor外定義的方法和屬性則是所有例項物件可以共享的。
Class之間可以通過extends關鍵字實現繼承,這比ES5的通過修改原型鏈實現繼承,要清晰和方便很多。上面定義了一個Cat類,該類通過extends關鍵字,繼承了Animal類的所有屬性和方法。
super關鍵字,它指代父類的例項(即父類的this物件)。子類必須在constructor方法中呼叫super方法,否則新建例項時會報錯。這是因為子類沒有自己的this物件,而是繼承父類的this物件,然後對其進行加工。如果不呼叫super方法,子類就得不到this物件。
ES6的繼承機制,實質是先創造父類的例項物件this(所以必須先呼叫super方法),然後再用子類的建構函式修改this。
arrow function
這個恐怕是ES6最最常用的一個新特性了,用它來寫function比原來的寫法要簡潔清晰很多:
function(i){ return i + 1; } //ES5
(i) => i + 1 //ES6
簡直是簡單的不像話對吧...
如果方程比較複雜,則需要用{}把程式碼包起來:
function(x, y) {
x++;
y--;
return x + y;
}
(x, y) => {x++; y--; return x+y}
除了看上去更簡潔以外,arrow function還有一項超級無敵的功能!
長期以來,JavaScript語言的this物件一直是一個令人頭痛的問題,在物件方法中使用this,必須非常小心。例如:
class Animal {
constructor(){
this.type = 'animal';
}
says(say){
setTimeout(function(){
console.log(this.type + ' says ' + say);
}, 1000);
}
}
var animal = new Animal();
animal.says('hi'); //undefined says hi
執行上面的程式碼會報錯,這是因為setTimeout中的this指向的是全域性物件。所以為了讓它能夠正確的執行,傳統的解決方法有兩種:
第一種是將this傳給self ,再用self來指代this
says(say){
var self = this;
setTimeout(function(){
console.log(self.type + ' says ' + say)
}, 1000);
第二種方法是用bind(this) ,即
says(say){
setTimeout(function(){
console.log(this.type + ' says ' + say)
}.bind(this), 1000);
但現在我們有了箭頭函式,就不需要這麼麻煩了:
class Animal {
constructor(){
this.type = 'animal';
}
says(say){
setTimeout( () => {
console.log(this.type + ' says ' + say);
}, 1000);
}
}
var animal = new Animal();
animal.says('hi'); //animal says hi
當我們使用箭頭函式時,函式體內的this物件,就是定義時所在的物件,而不是使用時所在的物件。
並不是因為箭頭函式內部有繫結this的機制,實際原因是箭頭函式根本沒有自己的this,它的this是繼承外面的,因此內部的this就是外層程式碼塊的this。
template string
這個東西也是非常有用,當我們要插入大段的html內容到文件中時,傳統的寫法非常麻煩,所以之前我們通常會引用一些模板工具庫,比如mustache等等。
大家可以先看下面一段程式碼:
$("#result").append(
"There are <b>" + basket.count + "</b> " +
"items in your basket, " +
"<em>" + basket.onSale +
"</em> are on sale!"
);
我們要用一堆的+號來連線文字與變數,而使用ES6的新特性模板字串``後,我們可以直接這麼來寫:
$("#result").append(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
`);
用反引號``來標識起始,用${}來引用變數,而且所有的空格和縮排都會被保留在輸出之中,是不是非常爽?!
destructuring
ES6允許按照一定模式,從陣列和物件中提取值,對變數進行賦值,這被稱為解構(destructuring)。
看下面的例子:
let cat = 'ken';
let dog = 'lili';
let zoo = {cat: cat, dog: dog};
console.log(zoo); //Object {cat: "ken", dog: "lili"}
用ES6完全可以像下面這麼寫:
let cat = 'ken';
let dog = 'lili';
let zoo = {cat, dog};
console.log(zoo); //Object {cat: "ken", dog: "lili"}
反過來可以這麼寫:
let dog = {type: 'animal', many: 2};
let { type, many } = dog;
console.log(type, many); //animal 2
default, rest
default很簡單,意思就是預設值。大家可以看下面的例子,呼叫animal() 方法時忘了傳引數,傳統的做法就是加上這一句type = type || 'cat'來指定預設值。
function animal(type){
type = type || 'cat';
console.log(type);
}
animal();
如果用ES6我們而已直接這麼寫:
function animal(type = 'cat'){
console.log(type);
}
animal();
最後一個rest語法也很簡單,直接看例子:
function animals(...types){
console.log(types);
}
animals('cat', 'dog', 'fish'); //["cat", "dog", "fish"]
而如果不用ES6的話,我們則得使用ES5的arguments。
總結
以上就是ES6最常用的一些語法,可以說這20%的語法,在ES6的日常使用中佔了80%...