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

 更新時間:2020-01-26 02:00:06   作者:佚名   我要評論(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-26
  • ES6學習筆記之let與const用法實例分析

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

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

最新評論

老快3投注技巧 河南福彩22选5走势图带连线 山东11选5分布走势图 三板市场股票查询 群英会任5遗漏查询 华夏配资网专业安全的股票配资公司 bbin平台在国内吗 快乐双彩开奖结果双 股价2元左右的股票 股票行情数据分析 股票配资平台1选一直牛 加拿大28结果查询官网一大神 幸运飞艇玩三码 内蒙古快3时时彩 基金配资比例两种模式 管家婆开奖结果 股票入门开户要多少