ES6學習筆記之let與const用法實例分析

 更新時間:2020-01-22 12:00:13   作者:佚名   我要評論(0)

本文實例講述了ES6學習筆記之let與const用法。分享給大家供大家參考,具體如下:
在ES6中不是var,而是通過let來聲明變量,用const來聲明常量,有如下一些不同:
1、

本文實例講述了ES6學習筆記之let與const用法。分享給大家供大家參考,具體如下:

在ES6中不是var,而是通過let來聲明變量,用const來聲明常量,有如下一些不同:

1、let與const作用域只限于當前代碼塊{},而var則沒有這種限制。

2、使用let、const申明的變量作用域不會被提升。例如:

console.log(str);
var str="var declare";

控制臺輸出undefined;因為變量申明是在任意代碼執行前處理的,在代碼區中任意地方聲明變量和在最開始(最上面)的地方聲明是一樣的。也就是說,看起來一個變量可以在聲明之前被使用!這種行為就是所謂的“hoisting”,也就是變量提升,看起來就像變量的聲明被自動移動到了函數或全局代碼的最頂上。注意:僅僅是聲明提升了,定義并不會被提升。因此console.log()可以檢測到str的聲明,但是卻沒有定義,提示undefined。

console.log(str2);
let str2="let declare";

控制臺報錯:can't access lexical declaration `str2' before initialization,let不會把聲明提升到全局之前,因此在console輸出str2時會報錯未聲明。

3、在相同的作用域下不能申明相同的變量,利用var可以聲明兩次同一個變量,并且后一個會覆蓋前面的聲明,而let、const不可以。

4、for循環體現let的父子作用域

var btns=document.querySelectorAll('button');
for (var i=0;i<btns.length;i++){
  btns[i].οnclick=function () {
    alert("第"+i+"個按鈕");
  }
}

由于var會提升作用域,當btns[i]在本代碼塊{}找不到i時,會找到之前的for中的i。在函數循環執行時,并沒有觸發onclick,i一直++到5。當任意按鈕點擊的時侯觸發onclick,此時i==5,因此無論按那個按鈕都會顯示“第5個按鈕”。

解決方法一:閉包處理      

var btns=document.querySelectorAll('button');
for (var i=0;i<btns.length;i++){
  (function (i) {//通過參數傳遞i,在另一個函數內的i
    btns[i++].οnclick=function () {
      alert("第"+i+"個按鈕");
    }
  })(i);
}

閉包處理:閉包就是一個函數引用另外一個函數的變量,因為變量被引用著所以不會被回收,因此可以用來封裝一個私有變量,i是另一個函數作用域內的變量,不會隨著外循環而改變。

方法二:使用let的情況下,會自己區分為兩個作用域,每個btns[i]內的函數對應不同的變量i

for (let i=0;i<btns.length;i++){//內部為新的let作用域
  btns[i].οnclick=function (){
    alert("第"+i+"個按鈕");
  }
}

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內容可查看本站專題:《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章:

  • JavaScript ES6中const、let與var的對比詳解
  • JS變量中有var定義和無var定義的區別以及es6中let命令和const命令
  • 深入淺出ES6之let和const命令
  • ES6新特性一: let和const命令詳解
  • ES6入門教程之let和const命令詳解
  • ES6入門教程之let、const的使用方法
  • ES6中let 和 const 的新特性
  • ES6 let和const定義變量與常量的應用實例分析
  • ES6中let、const的區別及變量的解構賦值操作方法實例分析
  • 詳解javascript中var與ES6規范中let、const區別與用法

相關文章

  • ES6學習筆記之let與const用法實例分析

    ES6學習筆記之let與const用法實例分析

    本文實例講述了ES6學習筆記之let與const用法。分享給大家供大家參考,具體如下: 在ES6中不是var,而是通過let來聲明變量,用const來聲明常量,有如下一些不同: 1、
    2020-01-22
  • python動態文本進度條的實例代碼

    python動態文本進度條的實例代碼

    如何實現動態單行刷新,答案是——覆蓋 但是怎么實現覆蓋呢 關鍵在于不換行而且能回退到開始位置 那么就要用到 \r 這個東西就是讓光標回退到當前行初始位置 記得不能
    2020-01-22
  • django 文件上傳功能的相關實例代碼(簡單易懂)

    django 文件上傳功能的相關實例代碼(簡單易懂)

    一、新建項目,在主配置文件中,修改以下內容: ALLOWED_HOSTS = ['127.0.0.1','localhost'] MEDIA_ROOT = os.path.join(BASE_DIR,'media') STATICFILES_DIRS = [
    2020-01-22
  • ES6學習筆記之字符串、數組、對象、函數新增知識點實例分析

    ES6學習筆記之字符串、數組、對象、函數新增知識點實例分析

    本文實例講述了ES6學習筆記之字符串、數組、對象、函數新增知識點。分享給大家供大家參考,具體如下: 1、模板字符串 反引號`` 內用于輸入格式化的字符串文本,在``
    2020-01-22
  • springcloud如何使用dubbo開發rpc服務及調用

    springcloud如何使用dubbo開發rpc服務及調用

    這篇文章主要介紹了springcloud如何使用dubbo開發rpc服務及調用,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考
    2020-01-22
  • 使用Python實現Wake On Lan遠程開機功能

    使用Python實現Wake On Lan遠程開機功能

    Wake-On-LAN簡稱WOL,是一種電源管理功能;如果存在網絡活動,則允許設備將操作系統從待機或休眠模式中喚醒。許多主板廠商支持IBM提出的網絡喚醒標準。該標準允許網
    2020-01-22
  • SpringSecurity 默認表單登錄頁展示流程源碼

    SpringSecurity 默認表單登錄頁展示流程源碼

    SpringSecurity 默認表單登錄頁展示流程源碼 本篇主要講解 SpringSecurity提供的默認表單登錄頁 它是如何展示的的流程, 涉及 1.FilterSecurityInterceptor,
    2020-01-22
  • java GUI編程之監聽操作實例分析

    java GUI編程之監聽操作實例分析

    本文實例講述了java GUI編程之監聽操作。分享給大家供大家參考,具體如下: 當點擊Frame中的component組件時,會產生相應的效果,但是相應的其必須進行監聽,確定是
    2020-01-22
  • JavaScript設計模型Iterator實例解析

    JavaScript設計模型Iterator實例解析

    這篇文章主要介紹了JavaScript設計模型Iterator實例解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下 Iter
    2020-01-22
  • java GUI編程之paint繪制操作示例

    java GUI編程之paint繪制操作示例

    本文實例講述了java GUI編程之paint繪制操作。分享給大家供大家參考,具體如下: import java.awt.*; public class Testpint { public static void main(Stri
    2020-01-22

最新評論

老快3投注技巧 湖北十一选五开奖 上海11选5走势图乐彩网 加拿大三分彩开奖号 福建22选5兑奖规则 合买彩票网站搭建 七星彩梦册 pk10的方法稳赚公式 特肖计算方法 广东一定牛11选五走势图 贵州快3开奖查询全部 内蒙古快三预测号码 北京pk赛车稳赚不赔技巧 今天快三开奖结果出来 微信股票微信群 股票指数的计算方法包括 河北快3和值综合走势