ES6入門教程之let和const命令詳解
前言
在javascript中，我們都知道使用var來聲明變量。javascript是函數(shù)級作用域，函數(shù)內(nèi)可以訪問函數(shù)外的變量，函數(shù)外不能訪問函數(shù)內(nèi)的變量。
函數(shù)級作用域會導(dǎo)致一些問題就是某些代碼塊內(nèi)的變量會在全局范圍內(nèi)有效，這我們是非常熟悉的：
for (var i = 0; i < 10; i++) {
console.log(i); // 0,1,2...,9
}
console.log(i); //10
if(true){
var s = 20;
}
console.log(s); //20
在es6中增加了let(變量)和const(常量)來聲明變量，使用的是塊級作用域，變量聲明只在代碼塊內(nèi)有效，下面來看看詳細的介紹：
let命令
ES6新增了let命令用于聲明變量。它的用處和var很相似，只不過let所聲明的變量只在let命令所在的代碼塊內(nèi)有效。
看下下面代碼：
{
let a = 10;
var b = 9;
}
alert( a ); // ReferenceError: a is not defined
alert( b ); //9
再看看下面代碼：
var a = [];
for(var i = 0; i < 10; i++) {
var c = i;
a[i] = function() {
console.log( c );
};
}
a[6](); //9
而如果使用let聲明的話，最后輸出的值是“6”。代碼如下：
var a = [];
for (var i = 0; i < 10; i++) {
let c = i;
a[i] = function() {
console.log( c );
};
}
a[6](); //6
此外，let聲明的變量不會提升。看下下面的代碼片段。
function do_someting() {
console.log( a ); //ReferenceError
let a = 2;
}
最后，let不允許在相同的作用域內(nèi)，重復(fù)聲明同一個變量。
// 報錯
{
let a = 10;
var a = 1;
}
// 報錯
{
let a = 10;
let a = 1;
}
let實際上是JavaScript增加的塊級作用域。
function foo() {
let n = 6;
if (true) {
let n = 10;
}
console.log( n ); //6
}
上面代碼有兩個代碼塊，都聲明了n變量，運行后輸出的是6。這表明外層代碼塊不受內(nèi)層代碼塊的影響。如果，改成使用var定義變量n的話，最后輸出的就是10.
另外，ES6還規(guī)定，函數(shù)本身的作用域在其所在的代碼塊作用域之內(nèi)。
function f() { console.log("I am outside"); }
(function () {
if (false) {
//重復(fù)聲明一次函數(shù)f
function f() {
console.log("I am inside");
}
}
f();
}());
上面的代碼片段，在ES5中運行會得到“Iam inside”, 但是在ES6中運行，則會得到“Iam outside”。
const命令
const是用來聲明常量的。一旦聲明，其值就不能改變。
const PI = 3.1415; console.log( PI ); //PI PI = 3; console.log( PI ); //3.1415 const PI = 3.1; console.log( PI ); //3.1415
有一點需要我們注意的是，對常量的重復(fù)定義不會報錯，它只會默默的失敗。
const的作用域與let命令相同：即只在聲明所在的塊級作用域內(nèi)有效。
if（condition） {
const MAX = 5;
}
// 常量MAX在此處不可見（或者說不可得）
此外，const常量也不可重復(fù)聲明。
var message = "Hello!"; let age = 25; //以下兩行都會報錯 const message = "Goodbye!"; const age = 30;
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
這篇文章主要介紹了理解JavaScript中的適配器模式,適配器模式即Adapter Pattern，是作為兩個不兼容的接口之間的橋梁。這種類型的設(shè)計模式屬于結(jié)構(gòu)型模式，下文更多相關(guān)介紹需要的小伙伴可以參考一下2022-08-08
這篇文章主要為大家詳細介紹了javascript實現(xiàn)隨機抽獎功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
Object.keys() 和 Object.getOwnPropertyNames() 的區(qū)別詳解
這篇文章主要介紹了Object.keys() 和 Object.getOwnPropertyNames() 的區(qū)別詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
對于uni-app中的組件,可以通過修改它們的樣式來自定義它們的外觀,下面這篇文章主要給大家介紹了關(guān)于uni-app如何用JS動態(tài)修改scss樣式變量的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了JS實現(xiàn)新浪微博效果帶遮罩層的彈出框代碼,涉及JavaScript響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
JavaScript實現(xiàn)的多個圖片廣告交替顯示效果代碼
這篇文章主要介紹了JavaScript實現(xiàn)的多個圖片廣告交替顯示效果代碼,涉及javascript數(shù)組遍歷及頁面元素動態(tài)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
django admin 使用SimpleUI自定義按鈕彈窗框示例
Django 后臺admin有大量的屬性和方法,擁有強大的功能和自定義能力，這篇文章主要介紹了django admin 使用SimpleUI自定義按鈕彈窗框示例,需要的朋友可以參考下2023-04-04
有時候需要刪除網(wǎng)站的cookies，一個一個太麻煩，這個可以批量的刪除所有的cookies，需要的朋友可以參考下。2010-11-11
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)同時上傳多張圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了javascript中數(shù)組的定義及使用方法,實例分析了數(shù)組的定義及使用技巧,非常具有實用價值,需要的朋友可以參考下2015-01-01