ES6核心問題是什麼?本文詳解

来源:https://www.cnblogs.com/chengxuyuanaa/archive/2020/06/16/13139694.html
-Advertisement-
Play Games

1.let 和 const 命令 在es5時,只有兩種變數聲明,var 和function。在es6中新增了四種let和const,以及另外兩種聲明import和class。 我們先講解let和const,後續會補充import和class (1)let 我們先來看基本語法 { let a = 10 ...


1.let 和 const 命令

在es5時,只有兩種變數聲明,var 和function。在es6中新增了四種let和const,以及另外兩種聲明import和class。 我們先講解let和const,後續會補充import和class

(1)let

我們先來看基本語法

{
 let a = 10;
 var b = 1;
}
b // 1
a // ReferenceError: a is not defined.
複製代碼

我們在代碼塊中聲明瞭a,b。然後a is not defined.這是因為let命令只在對應的代碼塊中有效,我們在外部去引用它,就會報錯。這就是let的塊級作用域的效果,如果不太清楚什麼是塊級作用域。我們來看下麵的例子

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[0]();//10
a[6](); // 10
除了本文案例,接下來我還會在我的裙里用視頻講解的方式給大家拓展下圖中的內容:有興趣的可以來我的扣扣裙 519293536 免費交流學習,我都會儘力幫大家哦,

這是一個老生常談的問題了。i在for迴圈中定義的是全局變數。我們在調用函數時。函數內部的i引用的是全局的i,所以列印出來的 是10. 我們之前是這樣解決的。

 var a = [];
    for (var i = 0; i < 10; i++) {
        a[i] = (function (a) {
            return function(){
                console.log(a);
            }
        }(i));
    }
    a[0]();//0
    a[6](); // 6
複製代碼

我們使用了立即執行函數將i的值傳入了內部的函數,這樣內部的函數就能夠獲取到對應的i。

我們用let來代替var,最後輸出的是 6。

var a = [];
for (let i = 0; i < 10; i++) {
 a[i] = function () {
   console.log(i);
 };
}
a[6](); // 6
複製代碼

這是因為我們每一次的迴圈都生成了一個新的塊級作用域,內部保存著i的值,所以就會列印出6.

let不存在變數提升

   console.log(a);
   console.log(b);
   var a=0;//undefined
   let b=0;//ReferenceError: b is not defined
複製代碼

TDZ(暫時性死區) let命令在塊級作用域中,即使不存在變數提升,它也會影響當前塊級作用域,即綁定在了當前作用域。在作用域中引用外部的變數將會報錯。

 var a=10;
  {
      console.log(a);  //ReferenceError: a is not defined
      let a=10;
  }
複製代碼

同時,我們在TDZ中使用typeof也會報錯.

 console.log( typeof a);//undefined
複製代碼
console.log( typeof a);//ReferenceError: a is not defined
  let a=10;
複製代碼

let 不允許重覆聲明變數

{
    var a=0;
    let a=1;//SyntaxError: Identifier 'a' has already been declared
}
複製代碼

(2) const常量

const常量聲明一個只讀屬性的變數,不可更改,不可先聲明後賦值,生成塊級作用域。

 const a;//SyntaxError: Missing initializer in const declaration(const聲明中缺少初始值設定項)
 a=10;
複製代碼

它同let有很多相似的地方。 .不可重覆聲明

const a=10;
var a=10;//SyntaxError: Identifier 'a' has already been declared
複製代碼

.變數不提升

console.log(a)//ReferenceError: a is not defined
const a=10;
複製代碼

.同樣存在暫時性死區

var a=10;
{
    console.log(a);//ReferenceError: a is not defined
    const a=10;
}
複製代碼

另外,const保證常量的值不被修改的原理是什麼呢?const實際上無法改變的只是常量在棧區的值不變,如果這個值是一個基本數據類型,那麼const能夠保障常量的值不變,但如果是引用類型的數據,棧區保存的其實是對應常量的地址。地址無法改變,但是對應地址的堆區內容卻可以改變。

 const a=[1,2,3]
 a.push(4)
 console.log(a); //[1, 2, 3, 4]
複製代碼

很顯然,我們通過push,直接修改了堆區的內容,間接改變了const常量的值。

如果要真正做到常量的功能,可以使用Object.freeze()

var a=[1,2,3];
Object.freeze(a)
a.push(4)  //Cannot add property 3, object is not extensibleat Array.push
console.log(a);
複製代碼

2.字元串擴展方法

(1)for of字元串遍歷

使用for of可以遍歷字元串,並將字元串分解為單獨的字元串

var a='lang'
for (item of a){
  
   console.log(item);
} 
// l
// a
// n
// g
複製代碼

(2) codePointAt字元串查詢.

根據下標,查詢對應字元串。在Es5時,就有一個charAt()方法。但charAt()顯然沒想到,隨著Unicode編碼的擴展,原先的0x0000~0xFFFF已經無法滿足表示所有字元了。

var text = "

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

-Advertisement-
Play Games
更多相關文章
  • 1 <div class="pie" style="width:500px;height:500px;"></div> 2 3 <div class="line" style="width:500px;height:500px;"></div> 4 5 <script type="text/java ...
  • layui 是什麼? 是一個ui庫 UI設計(或稱界面設計)是指對軟體的人機交互、操作邏輯、界面美觀的整體設計。UI設計分為實體UI和虛擬UI,互聯網常用的UI設計是虛擬UI,UI即User Interface(用戶界面)的簡稱。 大致內容 觀察layui文件內的內部結構 ├─css //css目錄 ...
  • 前端早早聊大會,前端成長的新起點,與掘金聯合舉辦。 本文 是前端早早聊的第 45 位講師 ,也是第六屆 - Serverless 專場,來自閑魚前端團隊的丹俠的分享 - 講稿簡要整理版(完整版含演示請看錄播視頻和 PPT): 概述 今天給大家分享一下閑魚如何在現有產品中落地 FaaS,希望我們的實踐 ...
  • readyState document.readyState 返回當前文檔的狀態 屬性如下: uninitialized 還未開始載入 loading 載入中 interactive 已載入,文檔與用戶可以開始交互 complete 載入完成 DOMContentLoaded 當 DOMConten ...
  • 幾天前一個小伙伴問我 Object.getOwnPropertyNames() 是乾什麼用的 平時還真沒有使用到這個方法,一時不知如何回答 從方法名稱來分析,應該是返回的是對象自身屬性名組成的數組 那和 Object.keys() 方法不就一樣了嗎 感覺事情並不這麼簡單,於是我仔細看了一下這幾種遍歷 ...
  • 在平時的開發過程中,父子 / 兄弟組件間的通信是肯定會遇到的啦,所以這裡總結了 6 種 Vue 組件的通信props / $e$emit / Vuex$attrs / $listeners $parent / $children 與 ref provide / inject 前言 如上圖所示,A/B ...
  • 只要接觸過前端,都會指導web前端的知識主要由三部分組成:分別為靜態html,樣式css,動態javascript(簡稱js)這三大部分組成。其三部分組成的一個體系的複雜程度不亞於其他一門技術的複雜程度。當然對於跟我一樣厲害的那些web前端來說那就是小菜一碟,但是很多人都只學了錶面,基礎部分,很多重 ...
  • 在日常開發中,項目中的菜單欄都是已經實現好了的。如果需要添加新的菜單,只需要在`路由配置`中新增一條路由,就可以實現菜單的添加。 相信大家和我一樣,有時候會躍躍欲試自己去實現一個菜單欄。那今天我就將自己實現的菜單欄的整個思路和代碼分享給大家。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...