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聲明的變量 是塊級作用域， 不能重復聲明
上面代碼在代碼塊之中，分別用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> `);
Vue基礎之es6