欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ES6新增關鍵字let和const介紹

 更新時間：2022年03月21日 11:52:55   作者：.NET開發(fā)菜鳥  
這篇文章介紹了ES6新增的關鍵字let和const，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

ES6新增加了兩個重要的JavaScript關鍵字：let和const

一、let關鍵字

let聲明的變量只在let命令所在的代碼塊內有效。

1、基本語法

let a='123'

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

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

2.1、同一作用域內let不能重復定義同一個名稱，var可以重復定義

看下面的例子：

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

2.2、兩者作用域不同

let屬于塊級作用域，只在當前塊內有效。

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(){
                // 同一個作用域內let不能重復定義同一個名稱
                // let a='123';let a='456'; // 錯誤
                // var可以重復定義
                var a=10;
                var a=20;
                // 有著嚴格的作用域，變量隸屬于當前作用域
                // let塊級作用域{}，var函數作用域
                function testVar(){
                    if(true){
                        var str='123';
                    };
                    console.log(str);
                }
                // 調用函數
                testVar(); // 輸出123
                // 定義函數
                function testLet(){
                    if(true){
                        let str1='456';
                    }
                    console.log(str1);
                };
                // 調用函數
                testLet(); // 報錯
            }
        </script>
</head>
</html>

效果：

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

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、同一個作用域內let不能重復定義同一個名稱
                // let a='123';let a='456'; // 錯誤
                // var可以重復定義
                // var a=10;
                // var a=20;
                // 2、有著嚴格的作用域，變量隸屬于當前作用域
                // let塊級作用域{}，var函數作用域
                function testVar(){
                    if(true){
                        var str='123';
                    };
                    //console.log(str);
                }
                // 調用函數
                testVar(); // 輸出123
                // 定義函數
                function testLet(){
                    if(true){
                        let str1='456';
                    }
                    console.log(str1);
                };
                // 調用函數
                //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'

查看控制臺結果：

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

<!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、同一個作用域內let不能重復定義同一個名稱
                // let a='123';let a='456'; // 錯誤
                // var可以重復定義
                // var a=10;
                // var a=20;
                // 2、有著嚴格的作用域，變量隸屬于當前作用域
                // let塊級作用域{}，var函數作用域
                function testVar(){
                    if(true){
                        var str='123';
                    };
                    //console.log(str);
                }
                // 調用函數
                testVar(); // 輸出123
                // 定義函數
                function testLet(){
                    if(true){
                        let str1='456';
                    }
                    console.log(str1);
                };
                // 調用函數
                //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>

控制臺結果：

注意：

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

<!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、同一個作用域內let不能重復定義同一個名稱
                // let a='123';let a='456'; // 錯誤
                // var可以重復定義
                // var a=10;
                // var a=20;
                // 2、有著嚴格的作用域，變量隸屬于當前作用域
                // let塊級作用域{}，var函數作用域
                function testVar(){
                    if(true){
                        var str='123';
                    };
                    //console.log(str);
                }
                // 調用函數
                testVar(); // 輸出123
                // 定義函數
                function testLet(){
                    if(true){
                        let str1='456';
                    }
                    console.log(str1);
                };
                // 調用函數
                //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; // 錯誤：聲明的時候必須初始化
                // 數組
                const arr=[];
                arr.push('123');
                console.log(arr);
                // 對象
                const obj={};
                obj.name='abc';
                console.log(obj);
            }
        </script>
</head>
</html>

控制臺結果：

到此這篇關于ES6新增關鍵字let和const的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

最新評論