Vue基礎之es6

什麼是ECMAScript，以及es6的誕生？

1997年 ECMAScript 1.0 誕生

1999年12月 ECMAScript 3.0誕生，它 是一個巨大的成功，在業界獲得了普遍的支持，它奠基了JS的基本語法，被其後版本徹底繼承。直到今天，咱們一開始學習JS，其實就是在學3.0版的語法

2000年的ECMAScript4.0是當下ES6的前身，但因爲這個版本太過激烈，對ES3作了完全升級，因此暫時被「和諧」了

2009年12月，ECMAScript5.0版正式發佈。ECMA專家組預計ECMAScript的第五個版本會在2013年中期到2018年做爲主流的開發標準。2011年6月，ES5.1版發佈，而且成爲ISO國際標準

2013年，ES6草案凍結，再也不添加新的功能，新的功能將被放到ES7中；2015年6月，ES6正式經過，成爲國際標準

好的，介紹es6的誕生，咱們簡單來學幾個es6的語法，僅僅的只是爲了後面我們vue的課程作課前準備。若是感興趣的同窗能夠查看

http://es6.ruanyifeng.com/

es6語法

es6語法：let和const

es6新增了let命令，用來聲明變量。它的用法相似於var，可是所聲明的變量，只在let命令所在的代碼塊內有效。

1. let聲明的變量 是塊級做用域， 不能重複聲明

<script type="text/javascript">
        // 1. let聲明的變量 是塊級做用域， 不能重複聲明
        {
            var a = 12;
            let b = 12;
        }
        console.log(a);
        console.log(b);
    </script>

上面代碼在代碼塊之中，分別用let和var聲明瞭兩個變量。而後在代碼塊以外調用這兩個變量，結果let聲明的變量報錯，var聲明的變量返回了正確的值。這代表，let聲明的變量只在它所在的代碼塊有效

for循環相信你們都玩過。下面這種現象扭曲了咱們塊級做用域的思想！若是將var改爲let就能夠了！

       var a = [];
        for (var i=0;i<10;i++){
            a[i] = function () {
                console.log(i)
            };
        }
        a[6]();

 

上面代碼中，變量i是let聲明的，當前的i只在本輪循環有效，因此每一次循環的i其實都是一個新的變量，因此最後輸出的是6。你可能會問，若是每一輪循環的變量i都是從新聲明的，那它怎麼知道上一輪循環的值，從而計算出本輪循環的值？這是由於 JavaScript 引擎內部會記住上一輪循環的值，初始化本輪的變量i時，就在上一輪循環的基礎上進行計算

        var a = [];
        for (let i=0;i<10;i++){
            a[i] = function () {
                console.log(i)
            };
        }
        a[6]();

 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不容許在相同做用域內，重複聲明同一個變量。

 // 不報錯
    function func() {
        var a = 10;
        var a = 1;
    }
    func();
    function func() {
        let a = 10;
        var a = 1;
    }
    func();
    function func() {
        var a = 10;
        let a = 1;
    }
    func();
    // 報錯
    function func() {
        let a = 10;
        let a = 1;
    }
    func();

所以，不能在函數內部從新聲明參數

function func(arg) {
        let arg; // 報錯
    }
    func(1)
    function func(arg) {
        {
            let arg; // 不報錯
         }
    }
    func(1)

爲何須要塊級做用域？

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只用來控制循環，可是循環結束後，它並無消失，泄露成了全局變量。

const命令

基本語法

const聲明一個只讀的常量。一旦聲明，常量的值就不能改變。

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

上面代碼代表改變常量的值會報錯

const聲明的變量不得改變值，這意味着，const一旦聲明變量，就必須當即初始化，不能留到之後賦值

const foo;
// SyntaxError: Missing initializer in const declaration

上面代碼表示，對於const來講，只聲明不賦值，就會報錯

 

const的做用域與let命令相同：只在聲明所在的塊級做用域內有效。

if (true) {
  const MAX = 5;
}

MAX // Uncaught ReferenceError: MAX is not defined

模板字符串

傳統的JavaScript語言，輸出模板一般是這樣的寫的。

    <div id="cid"></div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        var a = 1;
        var b = 2;

        var str = "哈哈哈哈" + a + "嘿嘿嘿" + b;
        $('#cid').append(str);
    </script>

上面這種寫法至關繁瑣不方便，ES6 引入了模板字符串解決這個問題。

    <div id="cid"></div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        var a = 1;
        var b = 2;
        var str = `哈哈哈哈${a}嘿嘿嘿${b}`;
        $('#cid').append(str);
    </script>

模板字符串（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>
`);