ES6系統學習----對比var，let

ls0609 發布于2019-08-23 15:07 / 1088人閱讀

摘要：對于，雖然之前也有過學習，但總的來說還是不夠系統的，知識點非常的零碎。因此包括以為基礎產生的語法糖在逐漸的趨近于強類型的語言。是創建，而不是的覆蓋。因而稱之為富一代。所以語法標準的更新將對良好編程習慣有著極大的利好。

對于ES6，雖然之前也有過學習，但總的來說還是不夠系統的，知識點非常的零碎?，F在結合之前遇到的問題把ES6中的知識點總結一下。
最初接觸ES6時，明白ES5中聲明變量的方式是使用var，在ES6中他是使用let的方式進行聲明的。
JavaScript是一個弱類型的語言。他無法在編譯時就提示一些語法錯誤，只能在運行時期才能夠發現錯誤。因此ES6包括以ES6為基礎產生的TypeScript語法糖在逐漸的趨近于強類型的語言。
進入正題，結合問題看一下var和let的區別

一：富二代和富一代

1：我們來看第一段代碼（從前兩篇博客中摘過來的）：

 1
 2
 3

var divArr = document.getElementsByTagName("div");
    for (var i = 0;i < divArr.length;i++){
        divArr[i].onclick = function(){
            console.log(i);
        }
    }

運行結果為：

分析：
首先聲明一下：
ES5中只有全局作用域和函數作用域沒有塊級作用域
因此在這段使用var聲明的i變量，i在全局范圍內都有效，因此在全局范圍內只有一個變量i。因此很清晰的就是只要循環一次，變量i的值都是需要發生變化的。他是覆蓋而不是創建，因此我把它稱之為富二代，啃老族
在代碼1中增加一段代碼：

var divArr = document.getElementsByTagName("div");
    for (var i = 0;i < divArr.length;i++){
        divArr[i].onclick = function(){
            console.log(i);
        }
    }
     console.log(i);  //輸出3

上述代碼就可以證明了在使用var聲明了變量i之后，他的作用域是全局的。而不是在塊級作用域中，所以他才可以在最后一行輸出i的值。這樣也驗證了使用var聲明的變量是不具備塊級作用域的。

2：來看第二段代碼：

 1
 2
 3

var divArr = document.getElementsByTagName("div");
    for (let i = 0;i < divArr.length;i++){
            divArr[i].onclick = function(){
                console.log(i);
            }
        };

運行結果為：

從前面的博客中使用的是閉包進行處理代碼1中的問題，現在使用的是ES6中的let進行處理。當使用let進行聲明變量時，當前變量i只在本輪循環中有效，因此每一個循環中的i其實都是一個新的變量i，初始化本輪的變量i的值其實是上一輪循環的值（js引擎內部原理）。因此在編譯后的執行階段，每一個i都是不一樣的變量。let是創建，而不是var的覆蓋。因而稱之為富一代。
既然上邊談到作用域的問題，就不得不說了ES6中的作用域的問題：
ES6中新增了塊級作用域，在作用域中聲明的變量只在當前作用域中有效

var divArr = document.getElementsByTagName("div");
    for (let i = 0;i < divArr.length;i++){
            divArr[i].onclick = function(){
                console.log(i);
            }
        };
console.log(i);

最后一行的輸出結果和前面的很不一樣

很顯然，在for循環外部，是獲取不到變量i的，而這種變化正是ES6中的let賦予的。

二：總結

1：由于變量作用域的問題會導致兩者聲明的變量的適用范圍有著極大的不同；
2：使用var聲明的變量是一個覆蓋，頂替的過程，而使用let聲明變量是一個創建，并在原有基礎上開拓的過程。
3：所以js語法標準的更新將對良好編程習慣有著極大的利好。

云服務器 GPU云服務器機器學習平臺對比 Lets Let js 中 let

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101537.html

ES6學習筆記--塊級綁定

摘要：對比常量聲明與聲明常量聲明與聲明，都是塊級聲明。最后一點全局塊級綁定與不同于的另一個方面是在全局作用域上的表現。塊級綁定新的最佳實踐在的發展階段，被廣泛認可的變量聲明方式是默認情況下應當使用而不是?？偨Y與塊級綁定將詞法作用域引入。 var變量與變量提升使用var關鍵字聲明的變量，無論其實際聲明位置在何處，都會被視為聲明于所在函數的頂部（如果聲明不在任意函數內，則被視為在全局作用域的頂...

wangshijun 2019-08-21 17:01 評論0 收藏0
ES6 常用新特性講解

摘要：一共講解了個常用的新特性，講解過程也是由淺入深。最后一個新增的方法主要是為了彌補當做構造函數使用時產生的怪異結果。特性共享父級對象共享父級不能當做構造函數語法最簡表達式前后對比很容易理解，可以明顯看出箭頭函數極大地減少了代碼量。 showImg(https://segmentfault.com/img/bVQ5GW?w=1024&h=675); 上周在公司組織了 ES6 新特性的分享會...

荊兆峰 2019-08-20 18:06 評論0 收藏0
ES6學習總結（一）

摘要：可以通過調用方法將創建一個新的類型的值，這個值獨一無二，不與任何值相等。還可以使可擴展，在中，表達式被標準化為構造函數的一個方法，這意味著它是可擴展的。前端發展的太快了，快到ES6,ES7出來之后，今年已經是ES8了，但是縱然前端發展很快，我們除了馬不停蹄的學習新的技術之外，也要沉下心來，好好的潛心磨礪自己，本文是整理了自己學習ES6之后相關的知識要點，寄希望于書之于筆，一來自己可以...

_ipo 2019-08-21 11:54 評論0 收藏0
箭頭函數你想知道的都在這里

摘要：沒有箭頭函數沒有自己的對象，這不一定是件壞事，因為箭頭函數可以訪問外圍函數的對象那如果我們就是要訪問箭頭函數的參數呢你可以通過命名參數或者參數的形式訪問參數不能通過關鍵字調用函數有兩個內部方法和。 1、基本語法回顧我們先來回顧下箭頭函數的基本語法。ES6 增加了箭頭函數： var f = v => v; // 等同于 var f = function (v) { return ...

xiaoqibTn 2019-08-23 16:44 評論0 收藏0
學習ES6

摘要：第二章學習函數的參數和擴展點為鍵上面那個參數箭頭函數數組合并解構使用解決回調地獄問題，使結構更加清晰。概念是在推廣過程中對模塊定義的規范化產出。通過引入依賴規范服務端使用的規范。帶名字的輸出默認輸出概念上面有講注意事項，需掌握的東西 (第二章)學習ES6 函數的Rest參數和擴展 //ES5 function sum(x,y,z){ let total = 0; if(...

canger 2019-08-23 11:37 評論0 收藏0