【JavaScript】var、let和const区别

1|0let 和 const 是什么

var 声明变量。

let 代替 var，声明变量。

const 声明常量。

2|0let 和 const 的用法

3|0什么是变量，什么是常量

var、let声明的就是变量，变量一旦初始化之后，还可以重新赋值。

const 声明的就是常量，常量一旦初始化，就不能重新赋值了，否则就会报错。

4|0为什么需要 const

const 就是为了那些一旦初始化就不希望重新赋值的情况设计的。

5|0const 的注意事项

使用 const 声明常量，一旦声明，就必须立即初始化，不能留到以后赋值。

const 声明的常量，允许在不重新赋值的情况下修改它的值（只适用于引用数据类型）。

6|0什么时候用 const，什么时候用 let

在不确定该使用 const 还是 let 的时候，可以暂时先统一使用const进行常量的声明，这样即使后续需要修改，也可以通过报错信息确定其位置再将const更改为let即可。

7|0let、 const 与 var 的区别

7|11.重复声明

已经存在的变量或常量，又声明了一遍。

var 允许重复声明，let、const 不允许。

只要是已经声明过的变量或常量（不论是用什么方式声明的），let、const 都不能再次声明。

7|22.变量提升

var 会提升变量的声明到当前作用域的顶部。

let、const 不存在变量提升。

7|33.暂时性死区

let、const 存在暂时性死区。

只要作用域内存在 let、const，它们所声明的变量或常量就自动“绑定”这个区域，不再受到外部作用域的影响。

7|44.window 对象的属性和方法

全局作用域中，var 声明的变量和通过 function 声明的函数，会自动变成 window 对象的属性或方法。

let、const 则不会。

7|55.块级作用域

什么是块级作用域？

var 没有块级作用域。

let/const 有块级作用域。

有哪些块级作用域？

{}， for(){}， while(){}， do{}while()， if(){}， switch(){}。

8|0let 和 const 的应用

若不使用let 和 const，而是使用原始的var。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>let 和 const 的应用</title>
    <style>
        body {
            padding: 50px 0 0 150px;
        }
        
        .btn {
            width: 100px;
            height: 100px;
            margin-right: 20px;
            font-size: 80px;
            cursor: pointer;
        }
    </style>
</head>
 
<body>
    <button class="btn">0</button>
    <button class="btn">1</button>
    <button class="btn">2</button>
 
    <script>
        // 1.var+闭包
        var btns = document.querySelectorAll('.btn');
 
        for (var i = 0; i < btns.length; i++) {
            (function(index) {
                btns[index].addEventListener(
                    'click',
                    function() {
                        console.log(index);
                    },
                    false
                );
            })(i)
        }
    </script>
</body>
 
</html>

let/const 不用使用闭包

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>let 和 const 的应用</title>
    <style>
        body {
            padding: 50px 0 0 150px;
        }
        
        .btn {
            width: 100px;
            height: 100px;
            margin-right: 20px;
            font-size: 80px;
            cursor: pointer;
        }
    </style>
</head>
 
<body>
    <button class="btn">0</button>
    <button class="btn">1</button>
    <button class="btn">2</button>
 
    <script>
        // 3.let/const 不用使用闭包，因为let/const本生就是块级作用域
        let btns = document.querySelectorAll('.btn');
 
        for (let i = 0; i < btns.length; i++) {
            btns[i].addEventListener(
                'click',
                function() {
                    console.log(i);
                },
                false
            );
        }
    </script>
</body>
 
</html>

__EOF__

本文作者：blanset
本文链接：https://www.cnblogs.com/blanset/p/17220543.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！