let、const与var的区别详解

石头剪刀布左

已于 2022-04-02 21:24:03 修改

阅读量247

点赞数 1

文章标签： javascript vue.js 前端 html5

于 2022-03-04 20:33:26 首次发布

本文链接：https://blog.csdn.net/m0_67624022/article/details/123283504

版权

let

作用：声明变量的关键字
语法：let 变量名； let 变量名 = 变量值；

const

作用：声明常量，ES6中默认公约使用大写形式定义常量名。
语法：const 变量名=赋值;

let与const共有的特点：

块级作用域

    <script>
        {
            var a = 20;
        }
        console.log(a);//a的结果是20
    </script>

<script>
        {
            let a = 20;
        }
        console.log(a);//a is not defined
</script>

不存在变量提升：暂时性死区(Temporal Dead Zone，TDZ)：本质，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。
```
    <script>
        {
            console.log(a);//undefined
            var a=30;
        }
    </script>
```
```
<script>
    console.log("----a的死区---");
    console.log(a);//报错
    console.log("----a的死区---");
    let a = 30;
 </script>
```

同一作用域，不能重复声明同一变量

<script>
        {
            var a = 20;
            var a = 30;
            console.log(a);//30
        }
</script>

<script>
        {
            let a = 20;//编辑器报错
            let a = 30;//编辑器报错
            console.log(a);//dentifier 'a' has already been declared
        }
</script>

const的特点：在let特点的基础上，还拥有以下特点

声明变量的同时需要立即初始化

<script>
// 错误示例：
        const b;//编辑器报错
        b = 10;
// ---------------------------------------
        
// 正确代码如下：
        const a = 10;
        console.log(a);//10
</script>

当数据类型为数值、字符串、布尔值类型时，其值是不可改变的，但是为对象或数组的时候，其值是可以改变，因为声明的变量相当于指向的那个内存地址。
```
<script>
        const a = 10;
        a = 20;
        console.log(a);//报错

        const b = [1,2,3,4,5,6];
        b[3] = 10;
        console.log(b);// [1, 2, 3, 10, 5, 6]
</script>
```
应用场景：

循环中使用：

<script>
        // var声明
        for(var i=0;i<10;i++){

        }
        console.log(i);//10

        // let声明
        for(let j=0;j<10;j++){
            
        }
        console.log(j);//报错j is not defined
</script>

按钮事件案例需求：点击按钮，答应对应的编号

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <script>
        let btns=document.getElementsByTagName("button");
        // var声明
        for(var j = 0;j < btns.length;j++){
            btns[j].onclick = function(){
                console.log(j+1);//点击按钮1，按钮2，按钮3，全都打印4
            }
        }

        // let声明
        for(let j = 0;j < btns.length;j++){
            btns[j].onclick = function(){
                console.log(j+1);//点击按钮1，按钮2，按钮3，分别打印1，2，3
            }
        }
    </script>
</body>

let、const与var的区别

var是函数作用域，let是块级作用域（块级作用域就是用{ }包裹起来的部分）
var声明的变量会挂载在window上，而let和const声明的变量不会
var声明变量存在变量提升，let和const不存在变量提升
同一作用域下let和const不能重复声明，否则let暂存死区，var可以重复声明

石头剪刀布左

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
let、const与var的区别详解

let与const详解
复制链接

扫一扫