Es6：新手第一篇 let 和 const

AJie 發布于2019-08-23 14:12 / 1021人閱讀

Es6 let 和 const

基本用法

   let a = 10
   console.log(a) //10
   // 代碼塊內執行
   {
       let b = 5
       console.log(b) // 5
   }

for循環內也是比較試用

   for (let i =0;i<3;i++) {
      console.log(i)  // 0，1，2
   }

Es6 let命令只在所在的代碼塊內使用（塊級作用域）
例1 使用let在函數代碼塊內使用，Es5中是沒有塊級作用域的，Es6中的let實際上是為Javascript新增了塊級作用域，其實在聲明a為10的代碼塊中則為一個塊級作用域，if代碼塊中也是塊級作用域，這就表明了現在有兩個塊級作用域，重點來了外層代碼塊不受內層代碼塊影響，所以a在不同的地方打印出的結果不同

   function f() {
        let a = 10
        if (1===1) {
            let a = 5
            console.log(a) // 5
        }
        console.log(a) // 10
    }
    f()

例2 這個循環的例子let聲明了之后，在循環{}代碼塊內都屬于i的塊級作用域內，所以在里面怎么打印都會有結果，而在循環外部打印i的結果則是未定義

    for (let i =0;i<3;i++) {
      console.log(i)  // 0，1，2
    }
    console.log(i) // 這樣會報錯 i is not defined

然而var則不一樣，var也是聲明變量，它則在全局范圍內有效，讓我們來看看
例1 現在看看var定義了變量，在內部可以打印出小于三的每個結果，在代碼塊外層同樣可以得到結果，但是結果和代碼塊內的不一樣，這是因為外層的i是拿到了循環完成之后的結果

   for (var i =0;i<3;i++) {
      console.log(i)  // 0，1，2
    }
    console.log(i) // 3 為什么會得到3，是因為for循環從0開始執行，i++，1然后是2，只執行2次

例2 這里使用var得到的結果全是5，我們來分析一下它的執行步驟，首先執行的函數，聲明變量a為10，if代碼塊，然后再次聲明a為5（內層改變外層），打印5，執行出代碼塊再次打印a時，此時a的值已經被改變5

   function f() {
        var a = 10
        if (1===1) {
            // 在一個代碼塊的中變量并不會覆蓋掉代碼塊外面的變量
            var a = 5
            console.log(a) // 5
        }
        console.log(a) // 5
    }
    f()

Es6 let 不存在變量提升和暫時性死區
例1 測試let不存在變量提升

   {
       console.log(foo) // 報錯ReferenceError
       let foo = 1
   }

如果存在變量提升的話上面的代碼執行應該是

   {
       let a
       console.log(a) //undefined
       a=2
   }

例2 如果使用let這樣操作執行到if會報錯，因為let不存在變量提升

   function func() {
       if (typeof let == "undefined") {
       }
       let val = ""
   }

我們來看看var的變量提升是什么樣的，與let區別在哪里
例1 var的變量提升（值不提升）

   {
       console.log(foo) // undefined
       var foo = 1
   }

例2 var變量提升（先判斷后聲明），這樣就不會報錯

   function func() {
       if (typeof val == "undefined") {
       }
       var val = ""
   }

let 存在的暫時性死區社么為let的死區，只要是在let聲明之前則為死區

let 聲明在同層代碼塊內，不可以重復聲明
例1 在一個函數內聲明相同的變量名，使用let，這樣會報錯，如果使用var就會報錯

    func()
    function func() {
        let a = 1
        let a = 2
        console.log(a, "xx")
    }
例2 現在我們來看看var的執行結果,var 是可以重復聲明的
    func()
    function func() {
        var a = 1
        var a = 2
        console.log(a, "xx") // 2
    }

作用域和函數聲明
ES5 規定，函數只能在頂層作用域和函數作用域之中聲明，不能在塊級作用域聲明，接下來我們來看看Es5中沒有塊級作用域，下面的例子執行函數f()打印出的結果為I am inside!因為if內函數會被提升到頂部，然而在es6中理論的結果為I am outside!，但是會報錯！

   function f() { console.log("I am outside!"); }
   (function () {
           if (false) {
               // 重復聲明一次函數f
               function f() { console.log("I am inside!"); }
           }
       f()
   }())

以上之所以會在瀏覽器內報錯因為在Es6瀏覽器中塊級作用域的聲明相當于var聲明的變量（變量提升），所以我們盡量寫函數表達式而不是函數聲明語句,下面這個在Es6瀏覽器中得到的結果則為I am outside!，內層作用域不影響外層作用域，如果將let 替換成 var 將還是會報錯！

   function f() { console.log("I am outside!"); }
   (function () {
           if (false) {
               // 重復聲明一次函數f
               let f = function f() { console.log("I am inside!"); }
           }
       f()
   }())
   
   例1 創建函數有兩種方法一種是表達式，一種是函數聲明，下面的去掉foo的代碼會正常執行，這就是區別
   function test() {
       foo() // foo not fun
       bar()
       var foo = function () { // 變量提升
           alert("this won"t run!");
       }
       function bar() {
           alert("this will run!");
       }
   }
   test()

const聲明只讀常量，常量一旦聲明就不能改變，與變量的區別就在上面

   //const一旦聲明變量，就必須立即初始化，不能留到以后賦值。
   const foo
   //const命令聲明的常量也是不提升，同樣存在暫時性死區，只能在聲明的位置后面使用
   console.log(a) // 會報錯
   const a = 1
   // const聲明的常量，也與let一樣不可重復聲明,以下都會報錯
   const b = 1
   const b = 2
   // 正確的聲明只需聲明一次
   const c = 1
   console.log(c)  //1
  它的本質說白了就是指向內存的數據不得改的，但是還有另一種情況
   const foo = {};
   // 為 foo 添加一個屬性，可以成功
   foo.prop = 123;
   foo.prop = 321;
   console.log(foo.prop); // 321
   
   foo = {} // 就會報錯，不能把foo指向另一個地址，但對象本身是可變的，所以依然可以為其添加新屬性。
  Es6聲明變量的6種方法（var，function （es5）），let，const， import， class

頂層對象window和global對象（這里可以看看文檔就行，最重要的可以多看看this）

  瀏覽器window：Es6中的六種方法聲明的變量，使用window都可以拿到，因為頂層對象的屬性與全局變量是等價的
  
  global：ES5 的頂層對象，本身也是一個問題，因為它在各種實現里面是不統一的。
   瀏覽器里面，頂層對象是window，但 Node 和 Web Worker 沒有window。
   瀏覽器和 Web Worker 里面，self也指向頂層對象，但是 Node 沒有self。
   Node 里面，頂層對象是global，但其他環境都不支持。

云服務器 GPU云服務器第一篇 Lets Let const

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

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

ES6學習摘要（01）（新人學習）

摘要：入門一前言由于最近本人在學習，做一些筆記能夠更好的熟悉，就趁此機會來寫一篇關于的新人學習摘要吧。的作用域與命令相同只在聲明所在的塊級作用域內有效。塊級作用域新增方式和實際上為新增了塊級作用域。同時，函數聲明還會提升到所在的塊級作用域的頭部。 ECMAScript6/ES6 入門一、前言由于最近本人在學習ES6，做一些筆記能夠更好的熟悉，就趁此機會來寫一篇關于ES6的新人學習摘要吧。...

dmlllll 2019-08-21 17:59 評論0 收藏0
新手快速學習ES6語法,用最快的速度入門ES6就看這里

摘要：的作用域與命令相同只在聲明所在的塊級作用域內有效。數值和布爾值的解構賦值解構賦值時，如果等號右邊是數值和布爾值，則會先轉為對象。上面代碼中，數值和布爾值的包裝對象都有屬性，因此變量都能取到值。默認值解構賦值允許指定默認值。最近正在學習ES6,對于ES6的語法有一些自己的理解, 想寫這篇文章幫助跟我一樣的新手快速入門ES6而不至于連代碼都看不懂. 至于開發環境的搭建什么...

vspiders 2019-08-20 16:50 評論0 收藏0
ES6學習第一節塊級作用域的聲明以及綁定（一） let聲明

摘要：塊級作用域綁定變量聲明的變量聲明與其他的一些計算機語言不同，在類的語言中，變量總是在被聲明的地方創建而在中變量創建的位置取決于你如何聲明它，為我們提供了新的聲明方式用來讓開發者能夠更好的控制變量的作用域我們通過聲明的變量，無論其聲明位置在哪塊級作用域綁定 1.變量聲明 JS的變量聲明與其他的一些計算機語言不同，在類C的語言中，變量總是在被聲明的地方創建；而在JS中變量創建的位置取決于...

chanthuang 2019-08-20 18:58 評論0 收藏0
新手開發中常用ES6基礎知識總結

摘要：感覺對我這種沒實習沒工作的新手，雖然一些高級的功能暫時用不上，但是一些基礎的知識還是為平時的開發提供了巨大的便利。學習告一段落，現在結合平時的開發，總結一些常用的知識。日常開發中，塊級作用域中使用的變量，盡量使用或者聲明。使用時，進行合并。很早之前就學過TypeScript和ES6，后來做項目的時候零零散散用了些。這幾天又系統地把ES6的知識看了一遍。感覺對我這種沒實習沒工作的新手，...

Paul_King 2019-08-21 11:51 評論0 收藏0
我去！又是勇士和騎士？--NBA資訊小程序

摘要：話不多說，先來一張我科的圖坐鎮資訊小程序出來啦作為一個剛接觸小程序不久的前端小白菜，恰逢最近如火如荼的雙搶七大戰騎士與勇士又又又又又一次的巔峰對決實話真的看膩了決定寫一個資訊的小程序來玩玩。 showImg(https://segmentfault.com/img/remote/1460000015202389?w=580&h=580);話不多說，先來一張我科的圖坐鎮 NBA資訊小程序...

DesGemini 2019-08-29 15:38 評論0 收藏0