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

tuomao 發(fā)布于2019-08-22 18:07 / 2702人閱讀

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

1. var、let、const概述

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

ES6為我們帶來了let、const，我們先來了解一下三個標識符的特征：

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

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

2. 作用域

var的作用域

當var定義的變量在函數(shù)內(nèi)部時，通過函數(shù)外部調(diào)用變量，會導致 Uncaught ReferenceError: i is not defined 錯誤：

function doSomeThing () {
    var i = 1;
}

console.log(i); // Uncaught ReferenceError: i is not defined

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

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

let的作用域

let定義了一個擁有塊級作用域?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則不會

來一個例子體會一下：

console.log(m); // undefined
var m = 1;

console.log(n); // Uncaught ReferenceError: n is not defined
let n = 1;

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

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

4. let、const用法示例

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

先看看什么情況下你才用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ù)學表達式計算中

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

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

再來看一段代碼：

for (var i = 0; i < 100; i++) {
    setTimeout(function() {
        console.log(i);
    }, i * 1000);
}

// 控制臺會一直輸出100
// 改成 let

for (let i = 0; i < 100; i++) {
    setTimeout(function() {
        console.log(i);
    }, i * 1000);
}

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

const的使用場景？

const聲明了一個常量，推薦將const常量用于別名，降低常量的記憶難度。

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

結(jié)束

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

云服務器 GPU云服務器變量及數(shù)據(jù)詳解變量var 聲明變量 javascript中var

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/95524.html

JavaScript聲明變量詳解

摘要：命令用于規(guī)定模塊的對外接口，命令用于輸入其他模塊提供的功能所以在一定程度上來說，也具有聲明變量的功能。當沒有聲明，直接給變量賦值時，會隱式地給變量聲明，此時這個變量作為全局變量存在。前言如果文章中有出現(xiàn)紕漏、錯誤之處，還請看到的小伙伴多多指教，先行謝過在ES5階段，JavaScript 使用 var 和 function 來聲明變量， ES6 中又添加了let、const、imp...

paulquei 2019-08-26 13:39 評論0 收藏0
ES6 變量聲明與賦值：值傳遞、淺拷貝與深拷貝詳解

摘要：變量聲明與賦值值傳遞淺拷貝與深拷貝詳解歸納于筆者的現(xiàn)代開發(fā)語法基礎與實踐技巧系列文章。變量聲明在中，基本的變量聲明可以用方式允許省略，直接對未聲明的變量賦值。按值傳遞中函數(shù)的形參是被調(diào)用時所傳實參的副本。 ES6 變量聲明與賦值：值傳遞、淺拷貝與深拷貝詳解歸納于筆者的現(xiàn)代 JavaScript 開發(fā)：語法基礎與實踐技巧系列文章。本文首先介紹 ES6 中常用的三種變量聲明方式，然后討論了...

snowLu 2019-08-21 11:55 評論0 收藏0
深入理解ES6 - var-let-const

摘要：聲明變量不存在變量提升。臨時死區(qū)，而且不能在聲明之前訪問它。禁止重復聲明相同的變量，否則報錯。不存在變量提升，一旦執(zhí)行快外就會立即銷毀。聲明不允許修改綁定，但允許修改值，也就是說用創(chuàng)建對象后，可以修改該對象的屬性值。知識點 var 聲明變量： 1、存在變量提升，實際上var無論在哪里聲明，都會被當做當前的作用域頂部聲明變量。 2、可以重復聲明，后聲明的變量會覆蓋前聲明的變量。 let...

alexnevsky 2019-08-22 17:34 評論0 收藏0
ES5和ES6作用域詳解

摘要：允許在塊級作用域內(nèi)聲明函數(shù)。上面代碼中，存在全局變量，但是塊級作用域內(nèi)又聲明了一個局部變量，導致后者綁定這個塊級作用域，所以在聲明變量前，對賦值會報錯。 ES5的作用域變量起作用的范圍，js中能創(chuàng)建作用域的只能是函數(shù) { let a = 1; var b = 2; } console.log(a); // a is not defined console.log(b); //...

Dr_Noooo 2019-08-21 17:30 評論0 收藏0
ES6語法詳解(一)

摘要：凍結(jié)對象可以使用方法。對象的解構(gòu)賦值必須要屬性名相同，順序毫無影響。數(shù)組解構(gòu)賦值默認值，當?shù)忍栍疫叺闹禃r，默認值生效。 let變量 let聲明的變量在let命令所在的代碼塊中有效。不存在變量提升，只能先聲明后使用。暫存死區(qū) 如果區(qū)塊中存在let和const命令，這個區(qū)塊對這些命令聲明的變量，從一開始就形成了封閉作用域。凡是在聲明之前就使用這些變量。 var a = 1; { ...

wendux 2019-08-26 11:53 評論0 收藏0