var、let、const 区别

JavaScriptvar、let和const的区别及应用实例

原创已于 2024-03-07 13:13:09 修改 · 591 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #es6

于 2024-03-07 13:06:31 首次发布

本文详细比较了JavaScript中的var、let和const在声明、作用域、提升和修改性方面的差异，并通过实际应用示例展示了它们在for循环中的行为。

var、let、const 区别

var、let、const的相同点：

在全局声明的变量就是全局变量，在局部声明的变量是局部变量

let和var的不同点：

let声明的变量不能提升
let声明的变量不能重复声明
let声明的变量只在当前块作用域中有效 块作用域： 含有{}的区域
let声明的变量会产生暂时性的死区，只能在当前块作用域中查找

const 和var的不同点

const声明的变量必须赋初值
const声明的变量是常量，不能发生改变
const声明的变量不能提升
const声明的变量不能重复声明
const声明的变量只在当前块作用域中有效
const声明的变量会产生暂时性的死区，只能在当前块作用域中查找

应用

例：首先建立一个html文件，在body里加入两个div，然后点击不同的div来打印值

1、建立好head与body里的内容

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>应用</title>
    <style>
      div {
        width: 50px;
        height: 50px;
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <div></div>
    <div></div>
  </body>
</html>

2、在body下建立script标签，使用var i = 0 进行for循环遍历

无论点击哪个div，都打印2

<script>
    var arr = document.getElementsByTagName('div')
    for (var i = 0; i < arr.length; i++) {
      arr[i].onclick = function () {
        console.log(i)
      }
    }
</script>

3、在body下建立script标签，使用let i = 0 进行for循环遍历

将2中的script注释掉，使用如下代码，点击第一个div，打印0；点击第二个div，打印1

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