01.JS塊級作用域與let

来源:https://www.cnblogs.com/oksana/archive/2020/02/29/12386357.html
-Advertisement-
Play Games

1.塊級作用域 什麼是： 在一個代碼塊（括在一對花括弧中的一組語句）中定義的所需變數（與let配合使用）併在代碼塊的外部是不可見的。 為什麼： 在ES6之前，函數只能在全局作用域和函數作用域中聲明，不能在塊級作用域中聲明，造成諸多問題： 1.內層變數會覆蓋外層變數 2.用來計數的迴圈變數泄漏變成全局 ...


1.塊級作用域
   什麼是：
         在一個代碼塊（括在一對花括弧中的一組語句）中定義的所需變數（與let配合使用）併在代碼塊的外部是不可見的。
   為什麼：
         在ES6之前，函數只能在全局作用域和函數作用域中聲明，不能在塊級作用域中聲明，造成諸多問題：
              1.內層變數會覆蓋外層變數
              2.用來計數的迴圈變數泄漏變成全局變數
   何時：
         需要強化對變數生命周期的控制，避免全局污染出現錯誤
   優點：
         1.阻止變數泄漏變為全局變數，造成全局污染
         2.阻止變數提升覆蓋
         3.內層作用域可以定義與外層作用域相同的變數名，但變數是獨立的。
         4.允許任意嵌套，外層作用域無法讀取內層作用域的變數
   塊級作用域：
         {}，if{}，else{}，while{}，for{}，swicth{}…

    //塊級作用域{},與let配合使用
    {
      //大括弧之間就是塊級作用域
      var num=1;//還是全局變數，可以被外部訪問
      let num=1;//局部變數，不可以被外部訪問，塊級作用域必須用let聲明
    }
    console.log(num);//此時num已經不可以被訪問，說明塊級作用域生效

    //內層作用域可以定義與外層作用域相同的變數名，允許任意嵌套
    //但變數與變數之間是沒有關係的，都是獨立的個體。
    {
      let aa=1;
      console.log(aa);//1
      {
        let aa=11;
        console.log(aa);//11
        {
          let aa=111;
          console.log(aa);//111
        }
      }
    }
    console.log(aa);//此時是不能被訪問的，防止aa泄露為全局變數

    //防止變數提升造成覆蓋
    //雖然都是f，但是配合了let使用，{}內部變成了一個小個體，不會影響其他的f
      var f=17;
      {
        let f=28;
        console.log(f);
      }
      console.log(f);

    //for塊級作用域
    //計算1-100之間所有的整數的和，使用var聲明
    for (var i=1,sum=0;i<=100;i++){
      sum+=i;
    }
    console.log(sum);//5050,可以訪問
    console.log(i);//101,可以訪問

    //使用let聲明變數
    for (let i=1,sum=0;i<=100;i++){
      sum+=i;
    }
    console.log(i);//此時i是不能被訪問的。
    console.log(sum);//此時sum是不能被訪問的。
    //根據需求得知，最後需要訪問的是sum，i需要釋放
    //所以把sum單獨放在外面，sum就可以被訪問，而i會被釋放
    var sum=0;
    for (let i=1;i<=100;i++){
      sum+=i;
    }
    console.log(sum);

2.let聲明
   什麼是：
         專門代替var來聲明變數用的
   為什麼：
         var的問題：
             1.聲明提前
             2.沒有塊級作用域
             3.造成全局污染
   何時：
         只要聲明變數都用let
   優點：
         1.阻止了聲明提前
         2.添加了塊級作用域
         3.成為局部變數，不會造成全局污染
   原理：
         let其實就是一個匿名函數自調用！
         且let為了雙保險，其實在底層悄悄給變數改了名字，在變數前增加了_
   let的小脾氣：
         1.在相同作用域/塊內：禁止同時let兩個同名的變數
         2.在let 變數 之前到當前作用域的頂部之間，不允許提前使用變數
         3.不可以在函數內部重覆聲明參數

    //1.簡單瞭解let聲明的變數
    let a=2;
    console.log(a);
    let a=3;
    console.log(a);//報錯，a不能重覆聲明並賦值

    //var聲明的變數可以重覆聲明並重新賦值
    var b=2;
    console.log(b);//2
    var b=3;
    console.log(b);//3

    //在塊級作用域內{}
    {
      var c=2;
      let c=4;//在同一塊級作用域內不允許重覆聲明變數
      let d=3;
      console.log(d);//只能在當前{}塊級作用域內訪問
    }
    console.log(c);//可以被外部訪問的是var聲明的c
    console.log(d);//不可以被外部訪問

    //let不允許先調用，後聲明
    {
      console.log(aaa);
      let aaa=5;//報錯Cannot access 'aaa' before initialization
    }

         把let放入實例中理解

        //let應用
        //累加每個任務函數的時間
        var t=0;
        function task1(){
            console.log(`任務1耗時3s`);
            t+=0.3;
        }
        function task2(){
            console.log(`任務二耗時8s`);
            t+=0.8;
        }
        task1();
        task2();
        console.log(`共耗時${t}s`)
         以上是一個可以正常執行的代碼，並且是正確的程式          如果在task2內添加其他的功能，例如捕捉錯誤 
        //累加每個任務函數的時間
        var t=0;//聲明變數t準備累加每個任務函數的時間
        function task1(){
            console.log(`任務1耗時3s`);
            t+=3;
        }
        function task2(){
            console.log(`任務二耗時8s`);
            t+=8;
            //模擬出錯的變數，此段代碼是不執行的
            var err=false;
            //如果出錯
            if(err==true){
                //就獲得出錯時間
                var t=new Date();
                //並輸出出錯提示日誌
                console.log(`出錯啦，at：${t.toLocaleDateString()}`);
            };
        }
        task1();
        task2();
        console.log(`共耗時${t}s`)
         代碼正常執行，if內代碼是不執行的，但是結果卻是錯誤的，少了8s，那麼為什麼少了8s呢？          原來是因為var聲明的變數是全局變數，而if{}不是作用域，沒有實體牆，攔不住var，          所以var聲明的變數會提升到當前作用域task2的最前面。 
        //累加每個任務函數的時間
        var t=0;//全局t
        function task1(){
            console.log(`任務1耗時3s`);
            t+=3;
        }
        function task2(){
            //var t;//undefined，var聲明的t提前到該作用域最前面，並且沒有賦值
            //如果task2()中已經有了局部變數t，就不會用全局的t了，只有在局部沒有的t的時候才會調用全局的t
            console.log(`任務二耗時8s`);
            //這個8s沒有加到全局t，而是加在局部t上，當函數調用後，局部的t就被釋放了
            t+=8;//task2中的局部變數t，加在這裡
            var err=false;//模擬出錯的變數
            //如果出錯
            if(err==true){//if else for while do whlie 等程式結構的{}不是作用域，不是實體牆，攔不住var
                //就獲得出錯時間
                var t=new Date();
                //並輸出出錯提示日誌
                console.log(`出錯啦，at：${t.toLocaleDateString()}`);
            };
        }
        task1();
        task2();
        console.log(`共耗時${t}s`)//此處輸出的是全局的t，所以沒有那8s，
         那麼鑒於這種明明沒有執行的代碼，卻破壞了原本正確的代碼，          這就是沒有塊級作用域帶來的危害，此時就需要使用let聲明變數了，          因為let會阻止聲明提前，並會添加塊級作用域 
       //累加每個任務函數的時間
        var t=0;//全局t
        function task1(){
            console.log(`任務1耗時3s`);
            t+=3;
        }
        function task2(){
            console.log(`任務二耗時8s`);
            t+=8;//這個t還是會加到全局的t上，沒有被影響
            //模擬出錯的變數
            //var err=false;//代碼不執行
            var err=true;//代碼執行
            //如果出錯
            if(err==true){//let將if{}也變成了一級作用域，這個作用域是有實體牆的，是可以攔住let聲明的變數的                //就獲得出錯時間
                //let阻止了局部的t被聲明提前
                let t=new Date();//此時的t是在這個if塊級作用域的函數內，不會存在提升
                //並輸出出錯提示日誌
                console.log(`出錯啦，at：${t.toLocaleDateString()}`);//所以此時輸出的t也是if內的t
            };
        }
        task1();
        task2();
        console.log(`共耗時${t}s`)//列印全局t
         let的原理，添加匿名函數自調用，並改變名字 
        //累加每個任務函數的時間
        var t=0;//全局t
        function task1(){
            console.log(`任務1耗時3s`);
            t+=3;
        }
        function task2(){
            console.log(`任務二耗時8s`);
            t+=8;//這個t還是會加到全局的t上，沒有被影響
            //var err=false;
            var err=true;//模擬出錯的變數
            //如果出錯
            if(err==true){//let將if{}也變成了一級作用域，這個作用域是有實體牆的，是可以攔住let聲明的變數的
                //(function(){//let自動添加的
                //就獲得出錯時間
                //let阻止了局部的t被聲明提前
                let t=new Date();//let悄悄改變了名字，變成了_t，此時的t是在這個if塊級作用域的函數內，不會存在提升到
                //並輸出出錯提示日誌
                console.log(`出錯啦，at：${t.toLocaleDateString()}`);//_t，所以此時輸出的t也是if內的t
                //})();//let自動加的
            };
        }
        task1();
        task2();
        console.log(`共耗時${t}s`)//列印全局t    

         單詞：
               declare——聲明
               access——訪問
               initialization——初始化——>第一次聲明+賦值=初始化


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

-Advertisement-
Play Games
更多相關文章
  • MySQL--09.資料庫的管理應用
    9.1 創建資料庫 命令語法：create database show databases like 'oldboy'; + + | Database (oldboy) | + + | oldboy | + + 1 row in set (0.04 sec) 查看建庫的語句 (註意:如果編譯時指定字 ...
  • MySQL---08.SQL--結構化查詢語言
    8.1 什麼是 SQL？ SQL，英文全稱 Structured Query Language，中文意思是結構化查詢語言，它是一種對應關係數據中的數據進行定義和操作的語言方法，是大多數關係資料庫管理系統所支持的工業標準。 資料庫查詢語言 SQL 是一種資料庫查詢和程式設計語言，用於存取數據以及查詢、 ...
  • Android應用程式與SurfaceFlinger服務的連接過程分析
    [Android應用程式與SurfaceFlinger服務的連接過程分析 ](https://blog.csdn.net/luoshengyang/article/details/7857163) Android系統的開機動畫是由應用程式bootanimation來實現的，它位於/system/bi ...
  • Flutter Widgets 之 PageView
    註意：無特殊說明，Flutter版本及Dart版本如下： Flutter版本： 1.12.13+hotfix.5 Dart版本： 2.7.0 基礎用法 PageView控制項可以實現一個“圖片輪播”的效果，PageView不僅可以水平滑動也可以垂直滑動，簡單用法如下： PageView滾動方向預設是水 ...
  • form實現瀏覽者登陸、註冊頁面與瀏覽器的交互
    瀏覽器通過form表單把數據提交伺服器涉及http協議，模式為瀏覽器發送請求=>伺服器接收=>自身處理=>結果返回瀏覽器=>瀏覽器根據結果展示頁面給用戶，請求分為GET和POST。註意:所有表單控制項（文本框、文本域、按鈕、單選框、覆選框等）都必須放在表單中，其次同一組的單選按鈕，name 取值一定要... ...
  • JavaScript操作表格及CSS樣式
    在前端開發中，表格主要用於存儲結構化的數據，CSS主要用於修飾DOM元素，如何通過DOM來操作表格及CSS呢？本文主要通過一些簡單的小例子，簡述DOM對錶格和CSS的常見操作方法，僅供學習分享使用，如有不足之處，還請指正。 ...
  • ES6 - 基礎學習(10): Set 和 WeakSet 數據結構
    Set 數據結構 ES6 提供了新的數據結構 Set，註意不是數據類型，而是數據結構。它類似於數組，但是成員的值(可以是任何類型，無論是原始值或者是對象引用都行)都是唯一的，沒有重覆的值。 Set 中的特殊值 Set 數據結構存儲的成員 值總是唯一的，所以Set數據結構在添加新成員時需要判斷兩個值是 ...
  • CSS3動畫相關屬性詳解
    一、2D效果屬性 要使用這些屬性，我們需要通過transform，並且，為了保證相容性，我們可能還需要添加帶有瀏覽器內核首碼的屬性，比如 -webkit-transform。 在認識屬性前先知道這裡的使用坐標系是怎樣的，其坐標系與傳統的數學坐標系不同。 坐標系簡單分析如下： 1.預設狀態下，x軸是水 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類