6、ES6的let和const

最新推荐文章于 2025-09-12 15:58:40 发布

weixin_34349320

最新推荐文章于 2025-09-12 15:58:40 发布

阅读量85

点赞数

CC 4.0 BY-SA版权

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/kunBlog/blog/1634674

本文详细介绍了JavaScript中let和const关键字的使用方法及其优势。通过具体示例对比了let、const与传统var声明变量的区别，特别是在块作用域、变量提升及常量不可更改等方面的特性。

2019独角兽企业重金招聘Python工程师标准>>>

一、let的作用。

let是用来声明变量的，为了取代var。以后就不要用var了。与var相比有以下优势：

在块作用域内有效。
不能重复声明。
不存在变量提升。

const是用来声明常量的。如果改变了const声明的常量值。运行会报错。

二、例子。回调函数中var变量被改变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>let和const关键字</title>
</head>
<body>
<button> 按钮1</button>
<button> 按钮2</button>
<button> 按钮3</button>

<script type="text/javascript">
    let bts = document.getElementsByTagName("button");

    for(var i = 0;i < bts.length; i++){
        let bt = bts[i];
        //这里3个按钮点击之后，输出的值都会是3，因为onclick是回调函数，变量i全部都变为了3
        bt.onclick = function () {
            console.log(i);
        }
    }
</script>
</body>
</html>

在上面的代码中，3个按钮点击之后，输出的值都会是3，因为onclick是回调函数，for循环执行完成后，变量i全部都变为了3。我们再去点击。就只能输出3。

解决方式1：用闭包的方式解决

如果坚持用var声明变量，只能用闭包的方式解决。把回调函数封装在一个函数中，i作为参数。这样i每次传递的值都不一样。函数内部的参数i又不收到函数外部的影响。才能实现。最终点击每个按钮，都打印按钮的下标。

<script type="text/javascript">
    let bts = document.getElementsByTagName("button");

    //解决方式，用闭包的方式。每次都把i作为参数传递进去。
    for(var i = 0;i < bts.length; i++){
        let bt = bts[i];
        (function (i) {
            bt.onclick = function () {
                console.log(i);
            }
        })(i)

    }

</script>

解决方式2：用let声明i变量

使用let声明i变量，这样每次循环，i的作用域都只是在当前循环。并不会影响其他的循环。

<script type="text/javascript">
    let bts = document.getElementsByTagName("button");

    //解决方式，用闭包的方式。每次都把i作为参数传递进去。
    for(let i = 0;i < bts.length; i++){
        let bt = bts[i];
        bt.onclick = function () {
            console.log(i);
        }

    }

</script>

三、const例子。

const声明的变量不能被修改。其他都和let一样。所以const用来声明常量。

const KEY = "12421414";

 KEY = "DFSDF";

上面的代码就会引起编译器报错，并且运行也会报错。

转载于:https://my.oschina.net/kunBlog/blog/1634674