let和const

let和const是什么var声明变量。let代替var，声明变量。const声明常量。let和const的用法什么是变量，什么是常量var、let声明的就是变量，变量一旦初始化之后，还可以重新赋值。const声明的就是常量，常量一旦初始化，就不能重新赋值了，否则就会报错。为什么需要constconst就是为了那些一旦初始化就不希望重新赋值的情况设计的。const的注意事项使用const声明常量.

小豪boy

15367人浏览 · 2021-09-20 22:20:56

小豪boy · 2021-09-20 22:20:56 发布

let 和 const 是什么

var 声明变量。
let 代替 var，声明变量。
const 声明常量。

let 和 const 的用法

什么是变量，什么是常量

var、let声明的就是变量，变量一旦初始化之后，还可以重新赋值。
const 声明的就是常量，常量一旦初始化，就不能重新赋值了，否则就会报错。

为什么需要 const

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

const 的注意事项

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

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

什么时候用 const，什么时候用 let

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

let、 const 与 var 的区别

1.重复声明

已经存在的变量或常量，又声明了一遍。
var 允许重复声明，let、const 不允许。
只要是已经声明过的变量或常量（不论是用什么方式声明的），let、const 都不能再次声明。

2.变量提升

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

let、const 不存在变量提升。

3.暂时性死区

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

4.window 对象的属性和方法

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

let、const 则不会。

5.块级作用域

什么是块级作用域？

var 没有块级作用域。

let/const 有块级作用域。

有哪些块级作用域？

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

let 和 const 的应用

点击按钮，控制台输出按钮上对应的数字。

1.若不使用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>

2.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>