JS中l(wèi)et與const命令如何使用

3403771864 發(fā)布于2022-10-08 22:00 / 432人閱讀

　　本篇文章主要講述JS中l(wèi)et與const命令使用，通過代碼展示給各位。

　　let命令

　　基本使用

　　在ES6中，let命令是新增的聲明變量，與var的差異在于let無法重復聲明，且let有效只是在其命令的代碼塊內，let禁止變量出現(xiàn)變量提升現(xiàn)象，let的特點就是通過暫時性死區(qū)的方式來避免程序上的錯誤

　　代碼塊：使用{}包括起來的內容

　　聲明變量：分配一個存儲空間

　　不可重復聲明：let聲明過后的變量無法再再次聲明，而var可以重復聲明

　　{
　　let a = 10;
　　var a = 1; // 'a' has already been declared
　　}

　{
　　var a = 10
　　var a = 1
　　}
　　console.log(a) // 1

　　不同代碼塊可被重復聲明：我們知道let的不可重復聲明是作用在同一代碼塊中的，在后續(xù)中我們會具體解釋相關的概念即塊級作用域

　　{
　　let a = 1
　　console.log(a)
　　}
　　{
　　let a = 2
　　console.log(a)
　　}

　　有效區(qū)間的不同：上述中，我們知道let只在其命令的代碼塊內有效，而var聲明的變量可全局有效，現(xiàn)在舉例為大家說明。

　　{
　　let a = 10;
　　var b = 1;
　　}
　　console.log(a) // a is not defined
　　console.log(b) // 1

　　變量提升：我們熟悉在聲明前調用為undefined，之前使用var聲明變量，ndefined就是我們熟悉的聲明但未賦值，這種現(xiàn)象叫做變量提升，可let禁止執(zhí)行，因此，要想使用let所聲明的變量，就要安排在聲明后使用。

　　console.log(bar) // Cannot access 'bar' before initialization
　　let bar = 2

　　變量提升的編譯：現(xiàn)在看看變量提升現(xiàn)象在編譯后的情況，更有利于了解變量提升現(xiàn)象出現(xiàn)的原因，所有的聲明變量語句在編譯后都會將聲明語句提到程序的最先級，所以才會出現(xiàn)聲明但未賦值的現(xiàn)象。

　　// 編譯前
　　console.log(a)
　　var a = '豬痞惡霸'
　　// 編譯后
　　var a
　　console.log(a)
　　a = '豬痞惡霸'

　　暫時性死區(qū)：在代碼塊中使用let聲明變量前，該變量不可用，這種現(xiàn)象稱為暫時性死區(qū)，其實這點和變量提升有些相似，我理解為：let禁止變量提升現(xiàn)象的原因是在聲明變量前的代碼區(qū)域為暫時性死區(qū)

　　{
　　// 暫時性死區(qū)
　　tmp = 'abc';
　　console.log(tmp)
　　// 暫時性死區(qū)
　　let tmp; // 聲明tmp，結束暫時性死區(qū)
　　console.log(tmp) // undefined 聲明未賦值
　　tmp = '123'
　　console.log(tmp) // 123
　　}

　　隱蔽的死區(qū)：有些暫時性死區(qū)會在我們注意不到的地方，比如

　　function bar(x = y, y = 2) {
　　return [x,y]
　　}
　　bar() // Cannot access 'y' before initialization
　　bar(2) // 無錯誤

　　由于x的默認值為y，且y的聲明還沒開始，所以x = y處于死區(qū)中

　　適用場景

　　let與var根據(jù)其各自不同的特點有著不同的適用場景

　　計數(shù)器的使用：假如我們現(xiàn)在需要一個用來計數(shù)的變量，那么我們就可以使用let來聲明。

　　var arr = []
　　for(let i = 0; i < 10; i++) {
　　arr[i] = () => {
　　console.log(i)
　　} // 利用計數(shù)進行操作
　　}
　　arr[7]() // 7

　　for(var i = 0; i < 10; i++) {
　　arr[i] = () => {
　　console.log(i)
　　} // 利用計數(shù)進行操作
　　}
　　arr[7]() // 10

　　上述可以看到var和let的輸出結果，也就知道這兩個適用場景是不同的，兩者之間差距也就顯現(xiàn)出來。

　　for循環(huán)中的父子關系：for循環(huán)中有兩個作用域，即父作用域與子作用域，設置循環(huán)變量的部分為父作用域，循環(huán)體內部為子作用域

　　for(let i = 0; i < 3; i++) {
　　let i = 'abc';
　　console.log(i)
　　}
　　// abc
　　// abc
　　// abc

　　上面的例子循環(huán)打出了三個abc就說明了兩個i的作用域不同，如果不在循環(huán)體內聲明的話將會打印出0,1,2

　　塊級作用域

　　ES6新增了塊級作用域，此前ES5只有全局作用域與函數(shù)作用域

　　全局作用域：window對象的所有屬性都具有全局作用域，可以在程序的任意位置訪問，擁有全局作用域的變量。

　　函數(shù)作用域：也可以叫做局部作用域，意思就是每一個函數(shù)中都有一個函數(shù)作用域或者嵌套更多的函數(shù)作用域，在函數(shù)作用域中定義的變量只能在該函數(shù)作用域內部使用。

　　概念

　　塊級作用域的出現(xiàn)其實是由新增聲明let產生的

　　let n = 5
　　function fn() {
　　if(true) {
　　let n = 10
　　}
　　console.log(n)
　　}
　　fn() // 5

　　上面的例子詮釋了塊級作用域的作用，即外層代碼塊不受內層代碼塊的影響，我們在if函數(shù)體內聲明的n只有在if函數(shù)體內可以訪問，而fn中訪問n不受if內層的聲明影響。

　　存在意義

　　var tmp = new Date();
　　function fn() {
　　console.log(tmp);
　　if(false) {
　　var tmp = 'hello world'
　　}
　　}
　　fn()

　　如上，存在函數(shù)作用域與全局作用域，正常情況下fn()函數(shù)體內if函數(shù)體外是使用外層即var tmp = new Date();但是由于變量提升現(xiàn)象的存在即if函數(shù)體內的var tmp = 'hello world'發(fā)生了變量提升，即fn()函數(shù)體內的編譯形式如下，所以輸出結果為undefined。

　　function fn() {
　　var tmp
　　console.log(tmp);
　　tmp = 'hello world'
　　}

　　而塊級作用域正是解決了這個問題

　let n = 5
　　function fn() {
　　if(true) {
　　let n = 10
　　}
　　console.log(n)
　　}
　　fn() // 5

　　除此之外還可以防止局部作用域變量的泄露到全局當中

　　let arr = [1,2,3]
　　for(var i = 0; i < arr.length; i++) {
　　console.log(arr[i])
　　}
　　{
　　console.log(i) // 3
　　}

　　上述中其實讓變量泄露，也就是i變量被泄露到了整個全局中，但使用i is not defined，就可以說明變量未被泄露到全局中。

　let arr = [1,2,3]
　　for(let i = 0; i < arr.length; i++) {
　　console.log(arr[i])
　　}
　　console.log(i) // i is not defined

　　const命令

　　基本使用

　　const聲明的變量無法被再次賦值改變，且聲明的時候必須賦值

　　const name = '豬痞惡霸'
　　name = 'fzf404' // Assignment to constant variable.

　　const name // Missing initializer in const declaration
　　name = '豬痞惡霸'

　　const與let的特性很像，比如只在其聲明的塊級作用域內有效，存在暫時性死區(qū)

　　不可被const的情況

　　javascript中有兩種數(shù)據(jù)類型即：簡單數(shù)據(jù)類型，復雜數(shù)據(jù)類型

　　簡單數(shù)據(jù)類型：數(shù)值，字符串，布爾值

　　復雜數(shù)據(jù)類型：數(shù)組，對象

　　我們看到兩種數(shù)據(jù)類型的訪問方式不同，簡單數(shù)據(jù)類型的值直接保存變量所指向的內存地址，這樣在直接訪問值而復雜數(shù)據(jù)類型的訪問是通過變量指向的內存地址，內存地址保存的是另一個指針（引用）

　　現(xiàn)在我們說說const聲明，由它所指向變量的那個內存地址不能改動，因此const聲明的復雜數(shù)據(jù)類型，就不會讓現(xiàn)數(shù)組的元素和對象的屬性可以發(fā)生改變

　　const person = {}
　　person.name = "豬痞惡霸"
　　console.log(person.name) // 豬痞惡霸

　　請大家關注后續(xù)更多精彩內容。

云服務器 GPU云服務器 js 中 let php中如何使用js linux中如何磁盤分區(qū)命令 webrtc中rtp與rtcp怎么使用

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

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

ES6核心特性

摘要：報錯不報此外還有個好處就是簡化回調函數(shù)正常函數(shù)寫法箭頭函數(shù)寫法改變指向長期以來，語言的對象一直是一個令人頭痛的問題，在對象方法中使用，必須非常小心。前言 ES6 雖提供了許多新特性，但我們實際工作中用到頻率較高并不多，根據(jù)二八法則，我們應該用百分之八十的精力和時間，好好專研這百分之二十核心特性，將會收到事半功倍的奇效！寫文章不容易，請大家多多支持與關注！本文首發(fā)地址GitHub博客（...

loostudy 2019-08-23 13:41 評論0 收藏0
ES6核心特性

摘要：報錯不報此外還有個好處就是簡化回調函數(shù)正常函數(shù)寫法箭頭函數(shù)寫法改變指向長期以來，語言的對象一直是一個令人頭痛的問題，在對象方法中使用，必須非常小心。前言 ES6 雖提供了許多新特性，但我們實際工作中用到頻率較高并不多，根據(jù)二八法則，我們應該用百分之八十的精力和時間，好好專研這百分之二十核心特性，將會收到事半功倍的奇效！寫文章不容易，請大家多多支持與關注！本文首發(fā)地址GitHub博客（...

_DangJin 2019-08-02 12:07 評論0 收藏0
ES6新特性總結一

摘要：一旦聲明，常量的值不能被改變。頂層對象的屬性頂層對象，瀏覽器中指的是對象，在中指的是對象。中新增了兩個命令和，命令用于暴露出模塊對外的接口，而則用于輸入某一模塊。 1.聲明變量的關鍵字：const 和 let JavaScript ES6中引入了另外兩個聲明變量的關鍵字：const和let。在ES6中，我們將很少能看到var了。 const關鍵字 const聲明一個只讀的常量。一旦聲明...

MarvinZhang 2019-08-26 11:48 評論0 收藏0
如何設置node全局腳本

摘要：全局腳本設置的本質思路其實原理很簡單將的全局命令搜索路徑，加上腳本所在文件夾的路徑。權限設置了以后，腳本的圖標將變成下面這個樣子。重啟或新建終端，執(zhí)行腳本。前語隨著node的流行，JS已經可以解決大部分問題。這對前端工程師十分友好。相信很多同學在開發(fā)業(yè)務之余，都會寫一些小腳本代替手工完成繁瑣，重復的工作，從而提高工作效率。但部分同學開發(fā)的腳本，僅局限于腳本所在路徑，通過node x...

cgspine 2019-08-22 13:55 評論0 收藏0
深入理解Node.js 進程與線程(8000長文徹底搞懂)

摘要：在單核系統(tǒng)之上我們采用單進程單線程的模式來開發(fā)。由進程來管理所有的子進程，主進程不負責具體的任務處理，主要工作是負責調度和管理。模塊與模塊總結無論是模塊還是模塊，為了解決實例單線程運行，無法利用多核的問題而出現(xiàn)的。前言進程與線程是一個程序員的必知概念，面試經常被問及，但是一些文章內容只是講講理論知識，可能一些小伙伴并沒有真的理解，在實際開發(fā)中應用也比較少。本篇文章除了介紹概念，通過...

Harpsichord1207 2019-08-26 10:47 評論0 收藏0