ECMAScript簡介以及es6新增語法
ECMAScript簡介
ECMAScript與JavaScript的關系
ECMAScript是JavaScript語言的國際化標準,JavaScript是ECMAScript的實現。(前者是後者的規格,後者是前者的實現。但通常兩者是可互換的。)
ESMAScript的歷史
1996年11月,Netscape公司將Js提交給國際化標準組織ECMA,當初該語言能夠成為國際化標準。
1997年,ECMAScript 1.0版本推出。(在這年,ECMA發布262號標準文件(ECMA-262)的第一版,規定瀏覽器腳本語言的標準,並將這種語言稱為ECMAScript,也就是ES1.0版本。)
1998年6月,ES 2.0 版發布。
2007年10月,ES 4.0 版草案發布。
2008年7月,由於各方分歧太大,ECMA決定終止ES 4.0的開發。轉而將其中涉及現有功能改善的一小部分發布為ES 3.1 。但是回後不久將其改名為ES 5.0版;
2009年12月,ES 5.0 版正式發布。
2011年6月,ES 5.1 版發布,並成為ISO國際標準(ISO/IEC 16262:2011)。
2013年3月,ES 6 草案終結,並且不再添加新的功能。
2013年12月,ES 6 草案發布。
2015年6月,ES 6 正式版本發布。
es6新增語法(基礎)
ECMAScript 6 (簡稱ES 6)是JS語言的下一代標準。
1.let和const
es6新增了let命令,用來聲明變量。它的用法類似於var,但是所聲明的變量,只在let命令所在的代碼塊內有效。
var a = []; for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6]();
上面代碼中,變量i
是var
命令聲明的,在全局範圍內都有效,所以全局只有一個變量i
。每一次循環,變量i
的值都會發生改變,而循環內被賦給數組a
的函數內部的console.log(i)
,裏面的i
指向的就是全局的i
。也就是說,所有數組a
i
,指向的都是同一個i
,導致運行時輸出的是最後一輪的i
的值,也就是 10
而如果如果使用let
,聲明的變量僅在塊級作用域內有效,最後輸出的是 6,如下:
var a = []; for (let i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6]();
上面代碼中,變量i
是let
聲明的,當前的i
只在本輪循環有效,所以每一次循環的i
其實都是一個新的變量,所以最後輸出的是6
。你可能會問,如果每一輪循環的變量i
都是重新聲明的,那它怎麽知道上一輪循環的值,從而計算出本輪循環的值?這是因為 JavaScript 引擎內部會記住上一輪循環的值,初始化本輪的變量i
時,就在上一輪循環的基礎上進行計算
2.不存在變量提升
var
命令會發生”變量提升“現象,即變量可以在聲明之前使用,值為undefined
。這種現象多多少少是有些奇怪的,按照一般的邏輯,變量應該在聲明語句之後才可以使用。
為了糾正這種現象,let
命令改變了語法行為,它所聲明的變量一定要在聲明後使用,否則報錯。
// var 的情況 console.log(foo); // 輸出undefined var foo = 2; // let 的情況 console.log(bar); // 報錯ReferenceError let bar = 2;
上面代碼中,變量foo
用var
命令聲明,會發生變量提升,即腳本開始運行時,變量foo
已經存在了,但是沒有值,所以會輸出undefined
。變量bar
用let
命令聲明,不會發生變量提升。這表示在聲明它之前,變量bar
是不存在的,這時如果用到它,就會拋出一個錯誤。
3.不允許重復聲明
let
不允許在相同作用域內,重復聲明同一個變量。
4.塊級作用域
ES5 只有全局作用域和函數作用域,沒有塊級作用域,這帶來很多不合理的場景。
var tmp = new Date(); function f() { console.log(tmp); if (false) { var tmp = ‘hello world‘; } } f(); // undefined
上面代碼的原意是,if
代碼塊的外部使用外層的tmp
變量,內部使用內層的tmp
變量。但是,函數f
執行後,輸出結果為undefined
,原因在於變量提升,導致內層的tmp
變量覆蓋了外層的tmp
變量。
var s = ‘hello‘; for (var i = 0; i < s.length; i++) { console.log(s[i]); } console.log(i); // 5
上面代碼中,變量i
只用來控制循環,但是循環結束後,它並沒有消失,泄露成了全局變量。
5.const命令
const
聲明一個只讀的常量。一旦聲明,常量的值就不能改變。
const PI = 3.1415; PI // 3.1415 PI = 3; // TypeError: Assignment to constant variable.
上面代碼表明改變常量的值會報錯
const
聲明的變量不得改變值,這意味著,const
一旦聲明變量,就必須立即初始化,不能留到以後賦值
const
的作用域與let
命令相同:只在聲明所在的塊級作用域內有效。
if (true) { const MAX = 5; } MAX // Uncaught ReferenceError: MAX is not defined
6.模板字符串
傳統的JavaScript語言,輸出模板通常是這樣的寫的。
$(‘#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! `);
模板字符串(template string)是增強版的字符串,用反引號(`)標識。它可以當作普通字符串使用,也可以用來定義多行字符串,或者在字符串中嵌入變量
// 普通字符串 `In JavaScript ‘\n‘ is a line-feed.` // 多行字符串 `In JavaScript this is not legal.` console.log(`string text line 1 string text line 2`); // 字符串中嵌入變量 let name = "Bob", time = "today"; `Hello ${name}, how are you ${time}?`
上面代碼中的模板字符串,都是用反引號表示。如果在模板字符串中需要使用反引號,則前面要用反斜杠轉義。
let greeting = `\`Yo\` World!`; # 輸出結果為:`Yo` World!
如果使用模板字符串表示多行字符串,所有的空格和縮進都會被保留在輸出之中。
$(‘#list‘).html(` <ul> <li>first</li> <li>second</li> </ul> `);
7.箭頭函數
基本語法:
var f = a = > a //等同於 var f = function(a){ return a; }
如果箭頭函數不需要參數或需要多個參數,就使用一個圓括號代表參數部分。
//無形參 var f = () => 5; // 等同於 var f = function () { return 5 }; //多個形參 var sum = (num1, num2) => num1 + num2; // 等同於 var sum = function(num1, num2) { return num1 + num2; };
箭頭函數有幾個使用註意點。
(1)函數體內的this
對象,就是定義時所在的對象,而不是使用時所在的對象。
(2)不可以使用arguments
對象,該對象在函數體內不存在。如果要用,可以用 rest 參數代替。
8.對象的單體模式
為了解決箭頭函數this指向的問題 推出來一種寫法 對象的單體模式
var person = { name:‘小馬哥‘, age:12, fav(){ console.log(this.name,this.age); } } person.fav();
9.面向對象
JavaScript 語言中,生成實例對象的傳統方法是通過構造函數。
function Animal(name,age){ this.name = name; this.age = age; } Animal.prototype.showName = function(){ console.log(this.name); console.log(this.age); } var a = new Animal(‘小黃‘,5); a.showName();
上面這種寫法跟傳統的面向對象語言(比如 C++ 和 Java)差異很大,很容易讓新學習這門語言的程序員感到困惑。
ES6 提供了更接近傳統語言的寫法,引入了 Class(類)這個概念,作為對象的模板。通過class
關鍵字,可以定義類。
基本上,ES6 的class
可以看作只是一個語法糖,它的絕大部分功能,ES5 都可以做到,新的class
寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已。上面的代碼用 ES6 的class
改寫,就是下面這樣
class Animal{ // 構造器 當你創建實例之後 constructor()方法會立刻調用 通常這個方法初始化對象的屬性 constructor(name,age){ this.name = name; this.age = age; } showName(){ console.log(this.name); } } var a2 = new Animal(‘點點‘,3);
constructor方法
constructor
方法是類的默認方法,通過new
命令生成對象實例時,自動調用該方法。一個類必須有constructor
方法,如果沒有顯式定義,一個空的constructor
方法會被默認添加。
class Animal { } // 等同於 class Animal { constructor() {} }
上面代碼中,定義了一個空的類Point
,JavaScript 引擎會自動為它添加一個空的constructor
方法。
ECMAScript簡介以及es6新增語法