JS: var 与let 之间的区别

98 阅读 0 评论 65 点赞

我是靠谱客的博主平常豌豆，最近开发中收集的这篇文章主要介绍JS: var 与let 之间的区别，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

var：声明变量,没有指定的作用域,取决于在哪声明
let：也是声明变量,是块级作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <label>头像:</label>
            <img src="./image/1.png" alt="">
            <img src="./image/6.jpg" alt="">
            <img src="./image/8.jpg" alt="">
            <img src="./image/11.jpg" alt="">
        </div>
    </div>

    <script>
        // var: var声明变量,没有指定的作用域,取决于在哪声明
        // let: let也是声明变量,是块级作用域

        // ------------------------------------------------------
        // {
        //     var a = 'xiaowang' // 用var声明是全局作用域(因为是在全局声明的)
        //     let b = 'xiaozhang' // 用let声明是块级作用域
        // }

        // console.log(a)
        // console.log(b)

        
        // ------------------------------------------------------
        // var声明变量可以多次声明,多次声明相当于替换
        // let不能重复声明,直接报错
        // var str = ''
        // let str1 = ''
        // var str = '字符串' // 多次声明,相当于替换
        // let str1 = 'let字符串'

        // console.log(str)


        // ------------------------------------------------------
        var imgs = document.querySelectorAll('img')

        // for (var i = 0; i < imgs.length; i++) {
        //     imgs[i].onclick = function () {
        //         // console.log(imgs[i])
        //         console.log(this)
        //     }
        // }

        // for (let i = 0; i < imgs.length; i++) {
        //     imgs[i].onclick = function () {
        //         // console.log(imgs[i])
        //         console.log(this)
        //     }
        // }

        for (var i = 0; i < 10; i ++) {
            setTimeout(() => {
                console.log(i)
            }, 100)
        }

        for (let i = 0; i < 10; i ++) {
            setTimeout(() => {
                console.log(i)
            }, 100)
        }
    </script>
</body>
</html>