FallonXu

var、let、const异同点及区分

2022/08/16 20:21:20

JavaScript——var、let、const异同点及区分

相同点：三者皆可声明变量

区分：

循环中let和var声明的循环变量的区别

事件的绑定

通过for循环给标签绑定事件，也就是一打开执行界面，事件绑定就结束了，也就是循环已经结束了，也就是触发事件时循环已经结束了。

循环变量存储的数据数值

var声明的循环变量

在整个循环变量过程中只定义了一个循环变量i，每次循环都对这一个循环变量i进行重复赋值，也就是之后的循环变量数值会覆盖之前的循环变量数值，当循环结束后只有一个循环变量i，存储的是最终的循环变量数值。

let声明的循环变量

在整个循环过程中每次循环都相当于触发执行了一个{ }，每一个{ }对于let定义的变量就是一个独立的作用域，也就是每次循环let声明的循环变量都是一个人独立作用域中的循环变量，每一次循环中循环变量都会存储不同的数据数值，互相之间不会影响，不会覆盖，也就是每次循环let声明的循环变量都相当于是一个独立的变量，不会覆盖之前的数据数值。

示例代码：

<ul>
    <li>我是第一个li</li>
    <li>我是第二个li</li>
    <li>我是第三个li</li>
    <li>我是第四个li</li>
    <li>我是第五个li</li>
</ul>

<script>
    // 给 li 绑定事件 点击 li标签 弹出 索引下标
    // 获取标签对象
    const oLis = document.querySelectorAll('ul>li');

    // 通过 for循环 给 li标签 绑定事件
    for( var i = 0 ; i <= oLis.length -1 ; i++ ){
        // i 是 索引下标 oLis[i] 是 li标签对象
        oLis[i].addEventListener( 'click' , function(){

            // 点击时输出索引下标
            console.log( `我是var循环的i ${i}` );
        })
    }
    for( let j = 0 ; j <= oLis.length -1 ; j++ ){
        // i 是 索引下标 oLis[i] 是 li标签对象
        oLis[j].addEventListener( 'click' , function(){

            // 点击时输出索引下标
            console.log( `我是let循环的i ${j}` );
        })
    }
</script>