ECMAScript簡介以及es6新增語法

阿新 • • 發佈：2018-05-21

組織腳本結果 on() 帶來 asc arguments 面向對象編程 lse

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 版發布。

1999年12月，ES 3.0 版發布，並成為JS的通行標準，得到廣泛支持。
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新增語法

組織腳本結果 on() 帶來 asc arguments 面向對象編程 lse ECMAScript簡介 ECMAScript與JavaScript的關系 ECMAScript是JavaScript語言的國際化標準，JavaScript是ECMAScript的實現。

ECMAScript簡介以及es6新增語法