let和const

王昭没有君啊

已于 2022-02-08 18:35:16 修改

阅读量1k

点赞数 5

分类专栏： JavaScript 文章标签： javascript html5 开发语言

于 2022-01-13 21:25:16 首次发布

本文链接：https://blog.csdn.net/weixin_58448088/article/details/122480467

版权

JavaScript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

前言

let 和 cons t是ES6新增的声明变量的关键词

var 变量 = 表达式;

let 变量 = 表达式；

const 变量 = 表达式;

1.let

1.1 var 定义的变量可以预解析提前调用结果是 undefined

let 定义的变量不能预解析提前调用结果是报错

//提前调用 预解析
console.log(int1); //100
console.log(int2); //报错

//定义变量
var int1 = 100;
let int2 = 200;

1.2 var 定义的变量变量名称可以重复效果是重复赋值的效果

let 定义的变量变量名称不能重复如果变量名称重复执行结果是报错

//定义变量
var int1 = 100;
let int2 = 200;

//变量名称重复

var int1 = '北京'; 
console.log(int1); //北京

let int2 = '武汉';
console.log(int2); //报错

1.3 var 定义的变量作用域是全局作用域 / 局部作用域

let 定义的变量如果是在 { } 中只能 { } 中调用

let b;
if (true) {
   var a = 100;
  
   //let 声明的变量 在 { } 中可以调用
   //let b = 200 ;
   
   //对 {} 外定义的变量 进行赋值操作
   b = 200;
   console.log(b);
}
//let 声明的变量 在 { } 外 不能调用 
//console.log(b);

1.4 在循环语句中使用 var 定义的循环变量和使用 let 定义的循环变量

执行原理和执行效果不同

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <ul>
        <li>我是第一个li</li>
        <li>我是第二个li</li>
        <li>我是第三个li</li>
        <li>我是第四个li</li>
        <li>我是第五个li</li>
    </ul>

    <script>
         
        //给li绑定事件 点击标签 弹出 索引下标
         
        //获取标签对象
        var oLis = document.querySelectorAll('ul>li');

        //通过for循环给li标签绑定事件
        for (var i = 0; i < oLis.length; i++) {
           //i是索引下标 oLis[i]是li标签对象
           oLis[i].addEventListener('click',function() {
               //点击标签 弹出 索引下标
               console.log(i);
           });
        }

    </script>
</body>
</html>

for循环用var声明变量i;var 在整个循环的过程中只定义生成了一个循环变量i，每次循环都会对这一个循环变量进行重新赋值，也就是之后的循环变量数值覆盖之前的循环变量数值，当循环结束时循环变量i 只有一个存储的是最终的循环变量数值；

也就是说通过循环给 li 绑定点击事件，第一次循环给第一个 li 绑定点击事件,第二次循环给第二个 li 绑定点击事件，本来第一个 li 输出的应该是 0，第二个 li 输出的是1，只不过是因为我们var 在整个循环的过程中只定义生成了一个循环变量i，那么第二个 li 输出的 1 就会把第一个 li 输出的 0会覆盖掉，导致点击第一个 li 会输出 1 ，点击第二个 li 本来也会输出 1 ，那么循环五次，分别给五个 li 都绑定了事件，当 i=5时，不满足执行循环的条件，for循环也不会执行，最终的i=5会覆盖掉之前循环 i 的值，所以分别点击五个 li，会输出五个5；

我们的出发点是给 li 绑定事件点击标签弹出索引下标，很明显这么写，不会达到我们想要的结果，怎么办呢，其实，我们只需要将 for (var i = 0; i < oLis.length; i++){}里的 i,改为用let声明，for (let i = 0; i < oLis.length; i++){}就可以实现我们想要的效果，看下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <ul>
        <li>我是第一个li</li>
        <li>我是第二个li</li>
        <li>我是第三个li</li>
        <li>我是第四个li</li>
        <li>我是第五个li</li>
    </ul>

    <script>
         
        //给li绑定事件 点击标签 弹出 索引下标
         
        //获取标签对象
        var oLis = document.querySelectorAll('ul>li');

        //通过for循环给li标签绑定事件
        for (let i = 0; i < oLis.length; i++) {
           //i是索引下标 oLis[i]是li标签对象
           oLis[i].addEventListener('click',function() {
               //点击标签 弹出 索引下标
               console.log(i);
           });
        }

    </script>
</body>
</html>

for循环用let声明变量i;在整个循环过程中每次循环都相当于触发执行了一个 { }，每一个 { } 对于 let定义的变量就是一个独立的作用域，也就是说每次循环 let声明的循环变量都是一个独立作用域中的循环变量，每次循环 let 声明的循环变量都相当于是一个独立的变量，它就不会像var声明的 i 覆盖之前的循环变量，它就会按照我们设想的那样输出0，1，2，3，4

2.const

2.1 var 定义的变量可以预解析提前调用结果是 undefined

const 定义的变量不能预解析提前调用结果是报错

2.2 var 定义的变量变量名称可以重复效果是重复赋值的效果

const 定义的变量变量名称不能重复如果变量名称重复执行结果是报错

2.3 var 定义的变量作用域是全局作用域 / 局部作用域

const 定义的变量如果是在 { } 中只能 { } 中调用

2.4 const 定义的变量存储的数值数据不能改变

也就是 const 定义的变量不能重复赋值

<script>
    const arr = [1, 2, 3, 4, 5];
    // 只是修改引用数据类型中,数据单元存储的数据
    // 没有修改 arr变量中 存储的引用数据类型的内存地址
    arr[0] = '北京';
    console.log(arr);
</script>