亚洲欧美日韩综合系列在线_91精品人妻一区二区_欧美大肥婆一级特大AA片_九色91视频免费观看_亚洲综合国产精品_av中文字幕在线不卡_久久精品色综合网_看黄色视频的软件_无卡无码高清中文字幕码2024_亚洲欧美日韩天堂网

javascript 聲明變量var、let、const詳解及示例

來源:一樓 發(fā)布時(shí)間:2018-09-19 14:37:13 閱讀量:1228

1. var、let、const概述

ES6發(fā)布前,Javascript只能通過var聲明變量的方式,常量、塊級(jí)變量、函數(shù)變量這些概念的差別都不能很好的體現(xiàn)出來,于此同時(shí),加入你要使用或者提供一個(gè)api,var聲明的變量可隨時(shí)被修改和重新分配的問題,會(huì)讓你時(shí)刻擔(dān)心代碼是否能正常運(yùn)行。

ES6為我們帶來了let、const,我們先來了解一下三個(gè)標(biāo)識(shí)符的特征:

var: var定義一個(gè)變量,這個(gè)變量可以被重新分配、可能會(huì)被用于整個(gè)函數(shù)(Function Scope)let: let定義一個(gè)變量,這個(gè)變量可以被重新分配,但let可以被用于塊級(jí)作用域(Block Scope),不存在變量提升 const: const定義一個(gè)常量,不可以被重新分配

下面,我們將從作用域、變量提升、變量重新分配幾個(gè)方面講解var、let、const的差別以及用法實(shí)踐。

2. 作用域

var的作用域

當(dāng)var定義的變量在函數(shù)內(nèi)部時(shí),通過函數(shù)外部調(diào)用變量,會(huì)導(dǎo)致 Uncaught ReferenceError: i is not defined 錯(cuò)誤:

function doSomeThing () {
    var i = 1;}console.log(i); // Uncaught ReferenceError: i is not defined

但是,在if、for、while這樣的塊級(jí)語句內(nèi)通過var聲明變量,仍然可以在塊語句外部訪問:

if (true) {
    var i = 1;}console.log(i); // 1

let的作用域

let定義了一個(gè)擁有塊級(jí)作用域?qū)傩缘淖兞?,同樣的代碼我們用let聲明變量可以看看結(jié)果:

if (true) {
    let j = 1;}console.log(j); // Uncaught ReferenceError: j is not defined

const的作用域

const的作用域規(guī)則和let類似,同樣的代碼我們用const聲明變量可以看看結(jié)果:

if (true) {
    const k = 1;}console.log(k); // Uncaught ReferenceError: k is not defined

3. 變量提升

先說結(jié)論:var聲明的變量存在變量提升,let和const則不會(huì)

來一個(gè)例子體會(huì)一下:

console.log(m); // undefinedvar m = 1;console.log(n); // Uncaught ReferenceError: n is not definedlet n = 1;console.log(v);const v = 1; // Uncaught ReferenceError: v is not defined

推薦使用let和const理由之一,就是可以避免在使用后面聲明的變量時(shí)出現(xiàn)未知錯(cuò)誤。

4. let、const用法示例

明白var、let、const的區(qū)別,有助于我們用更簡潔易懂的方式表達(dá)我們的代碼。

先看看什么情況下你才用var?

通過上面的介紹,我們大概了解到var區(qū)別于let、const的地方在是:函數(shù)作用域、可被修改、變量提升,所以在函數(shù)聲明優(yōu)先于變量聲明,但是函數(shù)調(diào)用在變量聲明之后的邏輯里可以用到var。

var f = {
    doThings: function () {
        console.log(i);
    }}var i = 1; // 聲明變量// 函數(shù)調(diào)用f.doThings(); // 1

使用let的場景?

let一般用于for(while)循環(huán)和數(shù)學(xué)表達(dá)式計(jì)算中

for (let i = 0, len = 100; i < len; i++) {
    console.log(i);}

那么有個(gè)問題,上面的for循環(huán)用var聲明i變量也是可以的???

再來看一段代碼:

for (var i = 0; i < 100; i++) {
    setTimeout(function() {
        console.log(i);
    }, i * 1000);}// 控制臺(tái)會(huì)一直輸出100// 改成 letfor (let i = 0; i < 100; i++) {
    setTimeout(function() {
        console.log(i);
    }, i * 1000);}

解釋一下為什么會(huì)這樣:let的作用局的塊級(jí)作用局,即每次循環(huán)的i的作用域就是本次循環(huán),下一次循環(huán)重新定義變量i。

const的使用場景?

const聲明了一個(gè)常量,推薦將const常量用于別名,降低常量的記憶難度。

const COLOR_RED = "#F00";const COLOR_GREEN = "#0F0";const COLOR_BLUE = "#00F";const COLOR_ORANGE = "#FF7F00";

結(jié)束

建議在”use strict”模式下,使用let和const替代var,以保證代碼的整潔和可讀。


標(biāo)簽: JS
分享:
評(píng)論:
你還沒有登錄,請(qǐng)先