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
  • Dapr Outbox 是1.12中的功能。 本文只介紹Dapr Outbox 執行流程,Dapr Outbox基本用法請閱讀官方文檔 。本文中appID=order-processor,topic=orders 本文前提知識:熟悉Dapr狀態管理、Dapr發佈訂閱和Outbox 模式。 Outbo ...
  • 引言 在前幾章我們深度講解了單元測試和集成測試的基礎知識,這一章我們來講解一下代碼覆蓋率,代碼覆蓋率是單元測試運行的度量值,覆蓋率通常以百分比表示,用於衡量代碼被測試覆蓋的程度,幫助開發人員評估測試用例的質量和代碼的健壯性。常見的覆蓋率包括語句覆蓋率(Line Coverage)、分支覆蓋率(Bra ...
  • 前言 本文介紹瞭如何使用S7.NET庫實現對西門子PLC DB塊數據的讀寫,記錄了使用電腦模擬,模擬PLC,自至完成測試的詳細流程,並重點介紹了在這個過程中的易錯點,供參考。 用到的軟體: 1.Windows環境下鏈路層網路訪問的行業標準工具(WinPcap_4_1_3.exe)下載鏈接:http ...
  • 從依賴倒置原則(Dependency Inversion Principle, DIP)到控制反轉(Inversion of Control, IoC)再到依賴註入(Dependency Injection, DI)的演進過程,我們可以理解為一種逐步抽象和解耦的設計思想。這種思想在C#等面向對象的編 ...
  • 關於Python中的私有屬性和私有方法 Python對於類的成員沒有嚴格的訪問控制限制,這與其他面相對對象語言有區別。關於私有屬性和私有方法,有如下要點: 1、通常我們約定,兩個下劃線開頭的屬性是私有的(private)。其他為公共的(public); 2、類內部可以訪問私有屬性(方法); 3、類外 ...
  • C++ 訪問說明符 訪問說明符是 C++ 中控制類成員(屬性和方法)可訪問性的關鍵字。它們用於封裝類數據並保護其免受意外修改或濫用。 三種訪問說明符: public:允許從類外部的任何地方訪問成員。 private:僅允許在類內部訪問成員。 protected:允許在類內部及其派生類中訪問成員。 示 ...
  • 寫這個隨筆說一下C++的static_cast和dynamic_cast用在子類與父類的指針轉換時的一些事宜。首先,【static_cast,dynamic_cast】【父類指針,子類指針】,兩兩一組,共有4種組合:用 static_cast 父類轉子類、用 static_cast 子類轉父類、使用 ...
  • /******************************************************************************************************** * * * 設計雙向鏈表的介面 * * * * Copyright (c) 2023-2 ...
  • 相信接觸過spring做開發的小伙伴們一定使用過@ComponentScan註解 @ComponentScan("com.wangm.lifecycle") public class AppConfig { } @ComponentScan指定basePackage,將包下的類按照一定規則註冊成Be ...
  • 操作系統 :CentOS 7.6_x64 opensips版本: 2.4.9 python版本:2.7.5 python作為腳本語言,使用起來很方便,查了下opensips的文檔,支持使用python腳本寫邏輯代碼。今天整理下CentOS7環境下opensips2.4.9的python模塊筆記及使用 ...