精简代码

最新推荐文章于 2024-04-12 01:27:08 发布

缓月

最新推荐文章于 2024-04-12 01:27:08 发布

阅读量282

点赞数 1

分类专栏：捣腾 JavaScript

本文链接：https://blog.csdn.net/qq_42893625/article/details/101313849

版权

捣腾同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

JavaScript

14 篇文章 0 订阅

订阅专栏

今天看到几行代码，只是将var更改为let就删减了好几行代码，觉得很值得学习一下，记录一下吧，希望自己的代码也可以越来越简练。
实现的结果是这样的：
在这里插入图片描述
初始代码如下：

<!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>Document</title>
    <script>
        window.onload = function () {
            let aBtn = document.getElementsByTagName('input');
             for(var i=0;i<aBtn.length;i++){
                (function(i){      
                    aBtn[i].onclick=function(){
                        alert(i);
                    };
                })(i)
            }
        }
    </script>
</head>

<body>
    <input type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
</body>

</html>

优化代码如下：（script部分的代码）

for (let i = 0; i < aBtn.length; i++) {
                aBtn[i].onclick = function () {
                    alert(i);
                }
            }

这里就涉及到let和var的知识点了。
js中其实是没有块级作用域的。let是ES6中新增的语法命令，用来声明局部变量，所声明的变量，只在let命令所在的代码块内有效。
而上面的代码中，如果将let写为var，且没有用function（i）{ }闭包来包一下程序会出现不管点击哪一个按钮弹窗出现的数字全部都是3的错误。用了let的话就会使函数的作用域存在于for循环里面。

缓月

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
精简代码

今天看到几行代码，只是将var更改为let就删减了好几行代码，觉得很值得学习一下，记录一下吧，希望自己的代码也可以越来越简练。实现的结果是这样的：初始代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vie...
复制链接

扫一扫

专栏目录