首頁 > web前端 > js教程 > js中let和var定義變數的差別有哪些?

js中let和var定義變數的差別有哪些?

亚连
發布: 2018-06-06 17:50:40
原創
2195 人瀏覽過

這篇文章主要介紹了js中let和var定義變數的區別,非常不錯,具有參考借鑒價值,需要的朋友可以參考下

javascript 嚴格模式

第一次接觸let關鍵字,有一個要非常非常要注意的概念就是”javascript 嚴格模式”,例如下述的程式碼運行就會報錯:

1

2

let hello = 'hello world.';

console.log(hello);

登入後複製

錯誤訊息如下:

1

2

3

4

let hello = 'hello world.';

^^^

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

 ...

登入後複製

解決方法就是,在檔案頭新增」javascript 嚴格模式」宣告:

1

2

3

'use strict';

let hello = 'hello world.';

console.log(hello);

登入後複製

let和var關鍵字的異同

宣告後未賦值,表現相同

1

2

3

4

5

6

7

'use strict';

(function() {

 var varTest;

 let letTest;

 console.log(varTest); //输出undefined

 console.log(letTest); //输出undefined

}());

登入後複製

使用未宣告的變數,表現不同:

1

2

3

4

5

6

(function() {

 console.log(varTest); //输出undefined(注意要注释掉下面一行才能运行)

 console.log(letTest); //直接报错:ReferenceError: letTest is not defined

 var varTest = 'test var OK.';

 let letTest = 'test let OK.';

}());

登入後複製

重複宣告同一個變數時,表現不同:

1

2

3

4

5

6

7

8

9

'use strict';

(function() {

 var varTest = 'test var OK.';

 let letTest = 'test let OK.';

 var varTest = 'varTest changed.';

 let letTest = 'letTest changed.'; //直接报错:SyntaxError: Identifier 'letTest' has already been declared

 console.log(varTest); //输出varTest changed.(注意要注释掉上面letTest变量的重复声明才能运行)

 console.log(letTest);

}());

登入後複製

變數作用範圍,表現不同

1

2

3

4

5

6

7

8

9

10

11

'use strict';

(function() {

 var varTest = 'test var OK.';

 let letTest = 'test let OK.';

 {

 var varTest = 'varTest changed.';

 let letTest = 'letTest changed.';

 }

 console.log(varTest); //输出"varTest changed.",内部"{}"中声明的varTest变量覆盖外部的letTest声明

 console.log(letTest); //输出"test let OK.",内部"{}"中声明的letTest和外部的letTest不是同一个变量

}());

登入後複製

上面是我整理給大家的,希望今後會對大家有幫助。

相關文章:

詳解解讀在vue專案中引入elementUI元件

在Vue-cli中如何實作為單獨頁面設置背景色

在vue中實作刷新和tab切換

#

以上是js中let和var定義變數的差別有哪些?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
js
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板