第一百零六篇:變數的不同聲明(var,let和const的不同)

来源:https://www.cnblogs.com/FatTiger4399/archive/2022/11/08/16871324.html
-Advertisement-
Play Games

好家伙,JS基礎接著學, 本篇內容為《JS高級程式設計》第三章學習筆記 1.變數 ECMAScript 變數是鬆散類型的,意思是變數可以用於保存任何類型的數據。 (確實鬆散,不像C或C++那樣,分int,float,char等等...,一個變數可以用來保存任何類型的數據) 每個變數只不過是一個用於保 ...


好家伙,JS基礎接著學,

本篇內容為《JS高級程式設計》第三章學習筆記



1.變數

 

ECMAScript 變數是鬆散類型的,意思是變數可以用於保存任何類型的數據

(確實鬆散,不像C或C++那樣,分int,float,char等等...,一個變數可以用來保存任何類型的數據)

每個變數只不過是一個用於保存任意值的命名占位符。有3個關鍵字可以聲明變數:

var、const 和let

其中,var 在 ECMAScript的所有版本中都可以使用,而const和1et只能在ECMAScript 6及更晚的版本中使用。 

 

2.var聲明

用var聲明的變數可以保存任何類型的值

在不進行初始化的情況下,變數會保存一個特殊值undifined

var panghu;
console.log(panghu);

看圖:

 

 

 

 

2.1.var聲明作用域

function test(){
    var panghu = "panghu";
}
test();
console.log(panghu);

看圖:

 

 

 

在函數內忽略var聲明變數,可以聲明一個全局變數

function test(){
    panghu = "panghu";
}
test();
console.log(panghu);

看圖:

 

 

 

 至此,我們可以得出:

使用var操作符定義的變數會成為包含它的函數的局部變數

(人話翻譯:在函數內使用var聲明變數,那麼該變數的作用域在該函數內)

 

2.2.var聲明提升

使用var關鍵字聲明的變數會自動提升到函數作用域的頂部

(僅僅是聲明提升,不包含賦值操作)

(代碼拿前面的掉一下順序就好了)

 

 

 

 在這裡我們可以看到,panghu在console.log(panghu);前就已經被聲明瞭,

再看一個例子

 

 

兩次輸出內容不同

 

由此,我們知道

function test(){
    var panghu = "panghu";
    console.log(panghu);
}
test();

function test(){
    var panghu;
    console.log(panghu);
    panghu = "panghu";
}
test();

兩者等價

這便是"變數提升"了

 

 

3.let聲明

let和var的作用差不多,但也有所區別,

區別1:var聲明的範圍是函數作用域,而let聲明的範圍是塊作用域,

舉例子:

if(1){
    var panghu = "panghu";
    console.log("第一次輸出"+panghu);
}
console.log("第二次輸出"+panghu);

if(1){
    let kunkun = "kunkun";
    console.log("第三次輸出"+kunkun);
}
console.log("第四次輸出"+kunkun);

看圖

 

 

 一個例子很好的說明瞭,

let聲明的變數,到了塊作用域外就寄了

而var聲明的變數,依舊好好活著

 

這兩個關鍵字聲明的並不是不同類型的對象,

他們只是指出變數在相關作用域如何存在

 

 

3.1.對聲明冗餘(重覆聲明同一變數)報錯不會因混用let和var影響

 

 

 (四個排列組合告訴你,不要重覆聲明變數)

 

3.2.暫時性死區

 區別二:let沒有"變數提升"

console.log(panghu);
var panghu;

console.log(kunkun);
let kunkun;

 

 

 

 (let聲明的變數,寄)

在let聲明之前執行的瞬間被稱為"暫時性死區",

在此階段引用任何後面才聲明的變數都會報錯:ReferenceError

 

3.3.全局聲明

區別三:

與var關鍵字不同,使用let 在全局作用域中聲明的變數不會成為window 對象的屬性(var聲明的變數則會)

 

var panghu ="panghu"; console.log(window.panghu);
let kunkun ="kunkun"; console.log(window.kunkun);

 

 

 

 

補充:

3.4.條件聲明

在使用var 聲明變數時,由於聲明會被提升,JavaScript引擎會自動將多餘的聲明在作用域頂部合併為一個聲明。 因為let的作用域是塊,所以不可能檢查前面是否已經使用let聲明過同名變數,同時也就不可能在沒有聲明的情況下聲明它。

我們知道,var可以多次聲明,而let多次聲明會報錯,因此,let是更為嚴謹的

 

4.const 聲明

const的行為基本與let相同,兩者作用域同樣為"塊"

但仍有區別(怎麼可能會沒有區別)

聲明變數時必須同時初始化變數,

const聲明的變數無法修改,

有趣的是,如果const變數引用的是一個對象,

那麼修改這個對象內部的屬性並不違反const的"禁止修改"

const panghu ={};
panghu.age = 20;
console.log(panghu.age);

看圖:

 

 

 這樣的寫法是完全可行的

 

 

5.for迴圈中的let和var

 

我們用let和var聲明的變數分別來跑一次for迴圈

 

 

 一切正常;

然後我們改一下

for(var i=0;i<8;i++){
    setTimeout(()=>console.log(i),0);
}

for(let j=0;j<8;j++){
    setTimeout(()=>console.log(j),0);
}

看圖:

 

 

 

之所以會這樣,是因為在退出迴圈時,迭代變數保存的是導致迴圈退出的值:8。

在之後執行超時邏輯時,所有的i都是同一個變數,因而輸出的都是同一個最終值。

 

而在使用let聲明迭代變數時,JavaScript引擎在後臺會為每個迭代迴圈聲明一個新的迭代變數。

)每個setTimeout 引用的都是不同的變數實例,所以console.log輸出的是我們期望的值,

也就是循環執行過程中每個迭代變數的值。

(神奇的JS)

 

That's all.

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 安裝Docker Docker 分為 CE 和 EE 兩大版本。CE 即社區版(免費,支持周期 7 個月),EE 即企業版,強調安全,付費使用,支持周期 24 個月。 Docker CE 分為 stable test 和 nightly 三個更新頻道。 官方網站上有各種環境下的 安裝指南,這裡主要介 ...
  • 一、Installing RabbitMQ-3.10.2 on CentOS 7.9 1 地址 https://www.rabbitmq.com https://github.com/rabbitmq/rabbitmq-server https://github.com/rabbitmq/rabbi ...
  • 蘋果電腦哪款系統活動監控器好用呢?iStat Menus for mac是一款Mac OS電腦硬體信息監控軟體,提供的信息包括 CPU 使用情形、記憶體用量、硬碟使用情形、網路傳輸、機器溫度、風扇轉速等等。在新版本中,您還可以自由的對iStat Menus顯示的信息進行設置,將您關註的系統信息放在頂部 ...
  • redis集群搭建 一、安裝redis 源碼安裝: 1.下載源碼包: wget http://download.redis.io/releases/redis-6.0.7.tar.gz 2.解壓到指定目錄下: tar xf redis-6.0.7.tar.gz -C /usr/local/ 二、編譯 ...
  • 背景 建議至少提交兩份測試報告(從一、二選擇兩個測試case) 一、任選一(建議結合業務選擇,簡單線上業務選tpcb,複雜線上業務選tpcc,偏分析業務選tpch) tpcc tpcb tpch 二、任選一(建議結合業務場景選擇) 並行計算,選擇 RDS PG 12 進行測試 GIS,選擇 RDS ...
  • GreatSQL社區原創內容未經授權不得隨意使用,轉載請聯繫小編並註明來源。 GreatSQL是MySQL的國產分支版本,使用上與MySQL一致。 作者:YeJinrong/葉金榮 意外發現USER()和CURRENT_USER()的一點不同。 某次在用 ALTER USER 想要修改賬戶密碼時,發 ...
  • 2022年11月7日,Taier1.3版本正式發佈! Taier 是一個大數據分散式可視化的DAG任務調度系統,旨在降低ETL開發成本、提高大數據平臺穩定性,大數據開發人員可以在 Taier 直接進行業務邏輯的開發,而不用關心任務錯綜複雜的依賴關係與底層的大數據平臺的架構實現,將工作的重心更多地聚焦 ...
  • 1 背景與目標 1.1 背景 國際財務泰國每月月初賬單任務生成,或者重算賬單數據,數據同步方案為mysql通過binlake同步ES數據,在同步過程中發現計費事件表,計費結果表均有延遲,ES數據與Mysql數據不一致,導致業務頁面查詢數據不准確,部分核心計算通過ES校驗失敗 1.2目標 解決binl ...
一周排行
    -Advertisement-
    Play Games
  • 隨著Aspire發佈preview5的發佈,Microsoft.Extensions.ServiceDiscovery隨之更新, 服務註冊發現這個屬於老掉牙的話題解決什麼問題就不贅述了,這裡主要講講Microsoft.Extensions.ServiceDiscovery(preview5)以及如何 ...
  • 概述:通過使用`SemaphoreSlim`,可以簡單而有效地限制非同步HTTP請求的併發量,確保在任何給定時間內不超過20個網頁同時下載。`ParallelOptions`不適用於非同步操作,但可考慮使用`Parallel.ForEach`,儘管在非同步場景中謹慎使用。 對於併發非同步 I/O 操作的數量 ...
  • 1.Linux上安裝Docken 伺服器系統版本以及內核版本:cat /etc/redhat-release 查看伺服器內核版本:uname -r 安裝依賴包:yum install -y yum-utils device-mapper-persistent-data lvm2 設置阿裡雲鏡像源:y ...
  • 概述:WPF界面綁定和渲染大量數據可能導致性能問題。通過啟用UI虛擬化、非同步載入和數據分頁,可以有效提高界面響應性能。以下是簡單示例演示這些優化方法。 在WPF中,當你嘗試綁定和渲染大量的數據項時,性能問題可能出現。以下是一些可能導致性能慢的原因以及優化方法: UI 虛擬化: WPF提供了虛擬化技術 ...
  • 引言 上一章節介紹了 TDD 的三大法則,今天我們講一下在單元測試中模擬對象的使用。 Fake Fake - Fake 是一個通用術語,可用於描述 stub或 mock 對象。 它是 stub 還是 mock 取決於使用它的上下文。 也就是說,Fake 可以是 stub 或 mock Mock - ...
  • 為.net6在CentOS7上面做準備,先在vmware虛擬機安裝CentOS 7.9 新建CentOS764位的系統 因為CentOS8不更新了,所以安裝7;簡單就一筆帶過了 選擇下載好的操作系統的iso文件,下載地址https://mirrors.aliyun.com/centos/7.9.20 ...
  • 經過前面幾篇的學習,我們瞭解到指令的大概分類,如:參數載入指令,該載入指令以 Ld 開頭,將參數載入到棧中,以便於後續執行操作命令。參數存儲指令,其指令以 St 開頭,將棧中的數據,存儲到指定的變數中,以方便後續使用。創建實例指令,其指令以 New 開頭,用於在運行時動態生成並初始化對象。方法調用指... ...
  • LiteDB 是一個輕量級的嵌入式 NoSQL 資料庫,其設計理念與 MongoDB 類似,但它是完全使用 C# 開發的,因此與 C# 應用程式的集成非常順暢。與 SQLite 相比,LiteDB 提供了 NoSQL(即鍵值對)的數據存儲方式,並且是一個開源且免費的項目。它適用於桌面、移動以及 We ...
  • 1 開源解析和拆分文檔 第三方的工具去對文件解析拆分,去將我們的文件內容給提取出來,並將我們的文檔內容去拆分成一個小的chunk。常見的PDF word mark down, JSON、HTML。都可以有很好的一些模塊去把這些文件去進行一個東西去提取。 優勢 支持豐富的文檔類型 每種文檔多樣化選擇 ...
  • OOM是什麼?英文全稱為 OutOfMemoryError(記憶體溢出錯誤)。當程式發生OOM時,如何去定位導致異常的代碼還是挺麻煩的。 要檢查OOM發生的原因,首先需要瞭解各種OOM情況下會報的異常信息。這樣能縮小排查範圍,再結合異常堆棧、heapDump文件、JVM分析工具和業務代碼來判斷具體是哪 ...