let 和 const 的应用 – PM开源达人

<!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++) {
        //     btns[i].addEventListener(
        //         'click',
        //         function() {
        //             console.log(i);
        //         },
        //         false
        //     );
        // }

        // 2.闭包
        // 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);
        // }


        // 3.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>
ES6

我们要如何帮助您？
