一、es6語法：let和const

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

?

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

for循環相信大家都玩過。下面這種現象扭曲了我們塊級作用域的思想！如果將var改成let就可以了！

?

?再看一個例子：

1 var a = []; 2 for (var i = 0; i < 10; i++) { 3 a[i] = function () { 4 console.log(i); 5 }; 6 } 7 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時，就在上一輪循環的基礎上進行計算

?

不存在變量提升

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是不存在的，這時如果用到它，就會拋出一個錯誤。

?

不允許重復聲明?

let不允許在相同作用域內，重復聲明同一個變量。

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

因此，不能在函數內部重新聲明參數

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

為什么需要塊級作用域？

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.1415PI = 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語言，輸出模板通常是這樣的寫的。

1 $('#result').append( 2 'There are <b>' + basket.count + '</b> ' + 3 'items in your basket, ' + 4 '<em>' + basket.onSale + 5 '</em> are on sale!' 6 );

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

1 $('#result').append(` 2 There are <b>${basket.count}</b> items 3 in your basket, <em>${basket.onSale}</em> 4 are on sale! 5 `);

模板字符串（template string）是增強版的字符串，用反引號（`）標識。它可以當作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變

// 普通字符串 `In JavaScript '\n' is a line-feed.`// 多行字符串 `In JavaScript this isnot 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> `);

轉載于:https://www.cnblogs.com/shanae/p/10097762.html

總結

以上是生活随笔為你收集整理的Vue（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。