当前位置： 云海天教程网 > 技术新闻 > 随笔记录 > 正文

【JavaScript】var、let和const区别

  • 作者： 佚名     来源： 网络转载
  • 时间：2023-03-15

let 和 const 是什么

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

let 和 const 的用法

img

什么是变量，什么是常量

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

img

为什么需要 const

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

const 的注意事项

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

img

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

img

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

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

let、 const 与 var 的区别

1.重复声明

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

img

img

2.变量提升

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

img

  • let、const 不存在变量提升。

img

3.暂时性死区

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

img

4.window 对象的属性和方法

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

img

  • let、const 则不会。

img

5.块级作用域

  • 什么是块级作用域？

img

  • var 没有块级作用域。

img

  • let/const 有块级作用域。

img

  • 有哪些块级作用域？

​ {}， 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>
  1. 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>

原文地址：https://www.cnblogs.com/blanset/p/17220543.html