快捷導(dǎo)航

ES6新增關(guān)鍵字let和const介紹

更新時(shí)間：2022年03月21日 11:52:55 作者：.NET開(kāi)發(fā)菜鳥(niǎo)

這篇文章介紹了ES6新增的關(guān)鍵字let和const，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、let關(guān)鍵字

let聲明的變量只在let命令所在的代碼塊內(nèi)有效。

1、基本語(yǔ)法

let a='123'

2、let和var的區(qū)別

var也是用來(lái)聲明變量，let和var有什么區(qū)別呢？區(qū)別主要是以下三點(diǎn)：

2.1、同一作用域內(nèi)let不能重復(fù)定義同一個(gè)名稱(chēng)，var可以重復(fù)定義

看下面的例子：

// 同一個(gè)作用域內(nèi)let不能重復(fù)定義同一個(gè)名稱(chēng)
let a='123';let a='456'; // 錯(cuò)誤
// var可以重復(fù)定義
var a=10;
var a=20;

2.2、兩者作用域不同

let屬于塊級(jí)作用域，只在當(dāng)前塊內(nèi)有效。

var屬于全局作用域。

看下面的示例：

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>ES6</title>
        <meta charset="utf-8" />
        <script>
            window.onload=function(){
                // 同一個(gè)作用域內(nèi)let不能重復(fù)定義同一個(gè)名稱(chēng)
                // let a='123';let a='456'; // 錯(cuò)誤
                // var可以重復(fù)定義
                var a=10;
                var a=20;
                // 有著嚴(yán)格的作用域，變量隸屬于當(dāng)前作用域
                // let塊級(jí)作用域{}，var函數(shù)作用域
                function testVar(){
                    if(true){
                        var str='123';
                    };
                    console.log(str);
                }
                // 調(diào)用函數(shù)
                testVar(); // 輸出123
                // 定義函數(shù)
                function testLet(){
                    if(true){
                        let str1='456';
                    }
                    console.log(str1);
                };
                // 調(diào)用函數(shù)
                testLet(); // 報(bào)錯(cuò)
            }
        </script>
</head>
</html>

效果：

打印str1的時(shí)候會(huì)報(bào)錯(cuò)，因?yàn)槌隽藄tr1的作用域。

2.3、不存在變量提升

var聲明的變量存在變量提升，即可以在變量聲明之前就使用該變量，值為undefined;而let不存在變量提升，必須先聲明變量才能使用?？聪旅娴睦樱?/p>

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>ES6</title>
        <meta charset="utf-8" />
        <script>
            window.onload=function(){
                // 1、同一個(gè)作用域內(nèi)let不能重復(fù)定義同一個(gè)名稱(chēng)
                // let a='123';let a='456'; // 錯(cuò)誤
                // var可以重復(fù)定義
                // var a=10;
                // var a=20;
                // 2、有著嚴(yán)格的作用域，變量隸屬于當(dāng)前作用域
                // let塊級(jí)作用域{}，var函數(shù)作用域
                function testVar(){
                    if(true){
                        var str='123';
                    };
                    //console.log(str);
                }
                // 調(diào)用函數(shù)
                testVar(); // 輸出123
                // 定義函數(shù)
                function testLet(){
                    if(true){
                        let str1='456';
                    }
                    console.log(str1);
                };
                // 調(diào)用函數(shù)
                //testLet(); // 報(bào)錯(cuò)
                //3、不存在變量提升
                // var命令會(huì)發(fā)生‘變量提升'（可以在聲明前使用，值為undefined）
                // let不存在變量提升
                console.log(a); // undefined
                var a=12;
                console.log(b); // 報(bào)錯(cuò):b is not defined
                let b='123';
            }
        </script>
</head>
</html>

效果：

二、const

const與let的相同點(diǎn)：都是塊級(jí)作用域。

不同點(diǎn)：const聲明的是一個(gè)只讀的常量，聲明之后就不允許改變。意味著，聲明的同時(shí)必須初始化?？聪旅娴睦樱?/p>

const pi='3.1415926';
pi='3.1415927'

查看控制臺(tái)結(jié)果：

聲明的同時(shí)必須初始化，看示例：

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>ES6</title>
        <meta charset="utf-8" />
        <script>
            window.onload=function(){
                // 1、同一個(gè)作用域內(nèi)let不能重復(fù)定義同一個(gè)名稱(chēng)
                // let a='123';let a='456'; // 錯(cuò)誤
                // var可以重復(fù)定義
                // var a=10;
                // var a=20;
                // 2、有著嚴(yán)格的作用域，變量隸屬于當(dāng)前作用域
                // let塊級(jí)作用域{}，var函數(shù)作用域
                function testVar(){
                    if(true){
                        var str='123';
                    };
                    //console.log(str);
                }
                // 調(diào)用函數(shù)
                testVar(); // 輸出123
                // 定義函數(shù)
                function testLet(){
                    if(true){
                        let str1='456';
                    }
                    console.log(str1);
                };
                // 調(diào)用函數(shù)
                //testLet(); // 報(bào)錯(cuò)
                //3、不存在變量提升
                // var命令會(huì)發(fā)生‘變量提升'（可以在聲明前使用，值為undefined）
                // let不存在變量提升
                // console.log(a); // undefined
                // var a=12;
                // console.log(b); // 報(bào)錯(cuò):b is not defined
                // let b='123';

                // const 只讀常量
                // 相同：與let都是塊級(jí)作用域
                // const pi='3.1415926';
                // pi='3.1415927' // 不允許修改
                const b; // 錯(cuò)誤：聲明的時(shí)候必須初始化
            }
        </script>
</head>
</html>

控制臺(tái)結(jié)果：

注意：

const 如何做到變量在聲明初始化之后不允許改變的？其實(shí) const 其實(shí)保證的不是變量的值不變，而是保證變量指向的內(nèi)存地址所保存的數(shù)據(jù)不允許改動(dòng)。此時(shí)，你可能已經(jīng)想到，簡(jiǎn)單類(lèi)型和復(fù)合類(lèi)型保存值的方式是不同的。是的，對(duì)于簡(jiǎn)單類(lèi)型（數(shù)值 number、字符串 string 、布爾值 boolean）,值就保存在變量指向的那個(gè)內(nèi)存地址，因此 const 聲明的簡(jiǎn)單類(lèi)型變量等同于常量。而復(fù)雜類(lèi)型（對(duì)象 object，數(shù)組 array，函數(shù) function），變量指向的內(nèi)存地址其實(shí)是保存了一個(gè)指向?qū)嶋H數(shù)據(jù)的指針，所以 const 只能保證指針是固定的，至于指針指向的數(shù)據(jù)結(jié)構(gòu)變不變就無(wú)法控制了，所以使用 const 聲明復(fù)雜類(lèi)型對(duì)象時(shí)要慎重。

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>ES6</title>
        <meta charset="utf-8" />
        <script>
            window.onload=function(){
                // 1、同一個(gè)作用域內(nèi)let不能重復(fù)定義同一個(gè)名稱(chēng)
                // let a='123';let a='456'; // 錯(cuò)誤
                // var可以重復(fù)定義
                // var a=10;
                // var a=20;
                // 2、有著嚴(yán)格的作用域，變量隸屬于當(dāng)前作用域
                // let塊級(jí)作用域{}，var函數(shù)作用域
                function testVar(){
                    if(true){
                        var str='123';
                    };
                    //console.log(str);
                }
                // 調(diào)用函數(shù)
                testVar(); // 輸出123
                // 定義函數(shù)
                function testLet(){
                    if(true){
                        let str1='456';
                    }
                    console.log(str1);
                };
                // 調(diào)用函數(shù)
                //testLet(); // 報(bào)錯(cuò)
                //3、不存在變量提升
                // var命令會(huì)發(fā)生‘變量提升'（可以在聲明前使用，值為undefined）
                // let不存在變量提升
                // console.log(a); // undefined
                // var a=12;
                // console.log(b); // 報(bào)錯(cuò):b is not defined
                // let b='123';

                // const 只讀常量
                // 相同：與let都是塊級(jí)作用域
                // const pi='3.1415926';
                // pi='3.1415927' // 不允許修改
                // const b; // 錯(cuò)誤：聲明的時(shí)候必須初始化
                // 數(shù)組
                const arr=[];
                arr.push('123');
                console.log(arr);
                // 對(duì)象
                const obj={};
                obj.name='abc';
                console.log(obj);
            }
        </script>
</head>
</html>

控制臺(tái)結(jié)果：