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

更新時間：2022年03月21日 11:52:55 作者：.NET開發(fā)菜鳥

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

一、let關(guān)鍵字

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

1、基本語法

let a='123'

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

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

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

看下面的例子：

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

2.2、兩者作用域不同

let屬于塊級作用域，只在當(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(){
                // 同一個作用域內(nèi)let不能重復(fù)定義同一個名稱
                // let a='123';let a='456'; // 錯誤
                // var可以重復(fù)定義
                var a=10;
                var a=20;
                // 有著嚴(yán)格的作用域，變量隸屬于當(dāng)前作用域
                // let塊級作用域{}，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(); // 報錯
            }
        </script>
</head>
</html>

效果：

打印str1的時候會報錯，因為超出了str1的作用域。

2.3、不存在變量提升

var聲明的變量存在變量提升，即可以在變量聲明之前就使用該變量，值為undefined;而let不存在變量提升，必須先聲明變量才能使用。看下面的例子：

<!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、同一個作用域內(nèi)let不能重復(fù)定義同一個名稱
                // let a='123';let a='456'; // 錯誤
                // var可以重復(fù)定義
                // var a=10;
                // var a=20;
                // 2、有著嚴(yán)格的作用域，變量隸屬于當(dāng)前作用域
                // let塊級作用域{}，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(); // 報錯
                //3、不存在變量提升
                // var命令會發(fā)生‘變量提升'（可以在聲明前使用，值為undefined）
                // let不存在變量提升
                console.log(a); // undefined
                var a=12;
                console.log(b); // 報錯:b is not defined
                let b='123';
            }
        </script>
</head>
</html>

效果：

二、const

const與let的相同點：都是塊級作用域。

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

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

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

聲明的同時必須初始化，看示例：

<!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、同一個作用域內(nèi)let不能重復(fù)定義同一個名稱
                // let a='123';let a='456'; // 錯誤
                // var可以重復(fù)定義
                // var a=10;
                // var a=20;
                // 2、有著嚴(yán)格的作用域，變量隸屬于當(dāng)前作用域
                // let塊級作用域{}，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(); // 報錯
                //3、不存在變量提升
                // var命令會發(fā)生‘變量提升'（可以在聲明前使用，值為undefined）
                // let不存在變量提升
                // console.log(a); // undefined
                // var a=12;
                // console.log(b); // 報錯:b is not defined
                // let b='123';

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

控制臺結(jié)果：

注意：

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

<!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、同一個作用域內(nèi)let不能重復(fù)定義同一個名稱
                // let a='123';let a='456'; // 錯誤
                // var可以重復(fù)定義
                // var a=10;
                // var a=20;
                // 2、有著嚴(yán)格的作用域，變量隸屬于當(dāng)前作用域
                // let塊級作用域{}，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(); // 報錯
                //3、不存在變量提升
                // var命令會發(fā)生‘變量提升'（可以在聲明前使用，值為undefined）
                // let不存在變量提升
                // console.log(a); // undefined
                // var a=12;
                // console.log(b); // 報錯:b is not defined
                // let b='123';

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

控制臺結(jié)果：