es6中let與var的差別是什麼

青灯夜游
發布: 2022-04-15 19:42:47
原創
2095 人瀏覽過

區別:1、let變數有區塊級作用域,而var變數沒有區塊級作用域;2、var變數存在變數提升(無暫時性死區限制),可以先使用再聲明,而let變數不存在變數提升(有暫時性死區限制),必須先聲明再使用;3、let變數不能重複聲明,而var變數可以。

es6中let與var的差別是什麼

本教學操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。

ES6 新增了let指令,用來宣告局部變數。它的用法類似於var,但是所聲明的變量,只在let命令所在的程式碼區塊內有效(區塊級作用域),而且有暫時性死區的約束。

先看個var的常見變數提升的面試題目:

题目1: var a = 99; // 全局变量a f(); // f是函数,虽然定义在调用的后面,但是函数声明会提升到作用域的顶部。 console.log(a); // a=>99, 此时是全局变量的a function f() { console.log(a); // 当前的a变量是下面变量a声明提升后,默认值undefined var a = 10; console.log(a); // a => 10 } // 输出结果: undefined 10 99
登入後複製

如果以上題目有理解困難的童鞋,請系統的看一下老馬的免費JS高級影片教學。

ES6可以用let定義區塊級作用域變數

在ES6之前,我們都是用var來宣告變數,而JS只有函數作用域和全域作用域,沒有區塊級作用域,所以{}限定不了var宣告變數的存取範圍。
例如:

{ var i = 9; } console.log(i); // 9
登入後複製

ES6新增的let,可以宣告區塊層級作用域的變數。

{ let i = 9; // i变量只在 花括号内有效!!! } console.log(i); // Uncaught ReferenceError: i is not defined
登入後複製

let 配合for迴圈的獨特應用

let非常適合用於for循環內部的區塊級作用域。 JS中的for迴圈體比較特殊,每次執行都是一個全新的獨立的區塊作用域,用let宣告的變數傳入到 for迴圈體的作用域後,不會改變,不受外界的影響。看一個常見的面試題目:

for (var i = 0; i <10; i++) { setTimeout(function() { // 同步注册回调函数到 异步的 宏任务队列。 console.log(i); // 执行此代码时,同步代码for循环已经执行完成 }, 0); } // 输出结果 10 共10个 // 这里面的知识点: JS的事件循环机制,setTimeout的机制等
登入後複製

如果把var改成let宣告:

// i虽然在全局作用域声明,但是在for循环体局部作用域中使用的时候,变量会被固定,不受外界干扰。 for (let i = 0; i < 10; i++) { setTimeout(function() { console.log(i); // i 是循环体内局部作用域,不受外界影响。 }, 0); } // 输出结果: 0 1 2 3 4 5 6 7 8 9
登入後複製

let沒有變量提升與暫時性死區

let宣告的變量,不存在變數提升。而且要求必須 等let宣告語句執行完之後,變數才能使用,不然會報Uncaught ReferenceError錯誤。

例如:

console.log(aicoder); // 错误:Uncaught ReferenceError ... let aicoder = 'aicoder.com'; // 这里就可以安全使用aicoder
登入後複製

ES6 明確規定,如果區塊中存在let和const命令,這個區塊對這些命令聲明的變量,從一開始就形成了封閉作用域。凡是在聲明之前就使用這些變量,就會報錯。
總之,在程式碼區塊內,使用let指令宣告變數之前,變數都是不可用的。這在語法上,稱為「暫時性死區」(temporal dead zone,簡稱 TDZ)。

let變數不能重複宣告

let不允許在相同作用域內,重複宣告同一個變數。否則報錯:Uncaught SyntaxError: Identifier 'XXX' has already been declared

##例如:

let a = 0; let a = 'sss'; // Uncaught SyntaxError: Identifier 'a' has already been declared
登入後複製

總結##ES6的let讓js真正擁有了區塊級作用域,也是往這更安全更規範的路走,雖然加了很多約束,但是都是為了讓我們更安全的使用和寫程式碼。

【相關推薦:

javascript影片教學

web前端

以上是es6中let與var的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!