目录

特性:

let 关键字用来声明变量，使用 let 声明的变量有几个特点：

  • 不允许重复声明
  • 块儿级作用域（局部变量）
  • 不存在变量提升
  • 不影响作用域链

let创建变量代码示例

// let关键字使用示例：
let a; // 单个声明
let b,c,d; // 批量声明
let e = 100; // 单个声明并赋值
let f = 521, g = 'iloveyou', h = []; // 批量声明并赋值

一、不允许重复声明

代码实现

// 1. 不允许重复声明；
let dog = "狗";
let dog = "狗";
// 报错：Uncaught SyntaxError: Identifier 'dog' has already been
declared

运行结果

image-20210311171139262

二、块儿级作用域（局部变量）

代码实现

// 2. 块儿级作用域（局部变量）；
{
	let cat = "猫";
	console.log(cat);
}
	console.log(cat);
	// 报错：Uncaught ReferenceError: cat is not defined
}

运行结果

image-20210311171615066

三、不存在变量提升

什么是变量提升:

就是在变量创建之前使用（比如输出：输出的是默认值），let不存在，var存在

代码实现

// 3. 不存在变量提升；
// 什么是变量提升：就是在变量创建之前使用（比如输出：输出的是默认值），let不存在，var存在；
console.log(people1); // 可输出默认值
console.log(people2); // 报错：Uncaught ReferenceError: people2 is no
defined var people1 = "大哥"; // 存在变量提升
let people2 = "二哥"; // 不存在变量提升

运行结果

image-20210311172338246

四、不影响作用域链

代码实现

// 4. 不影响作用域链；
// 什么是作用域链：很简单，就是代码块内有代码块，跟常规编程语言一样，上级代码块中
的局部变量下级可用
{
	let p = "大哥";
	function fn(){
		console.log(p); // 这里是可以使用的
	}
	fn();
}

运行结果

image-20210311172613296

六、全部演示代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>let</title>
</head>

<body>
    <script>
        // let 关键字使用示例
        let a; // 单个声明
        let b, c, d; // 批量声明
        let e = 100; // 单个声明并赋值
        let f = 521, g = 'iloveyou', h = []; // 批量声明并赋值
        // let 关键字特性
        // 1. 不允许重复声明；
        // let dog = "狗";
        // let dog = "狗";
        // 报错：Uncaught SyntaxError: Identifier 'dog' has already been declared
        // 2. 块儿级作用域（局部变量）；
        // {
        // let cat = "猫";
        // console.log(cat);
        // }
        // console.log(cat);
        // 报错：Uncaught ReferenceError: cat is not defined
        // 3. 不存在变量提升；
        // 什么是变量提升：就是在变量创建之前使用（比如输出：输出的是默认值），let不存在，var存在；
        // console.log(people1); // 可输出默认值
        // console.log(people2); // 报错：Uncaught ReferenceError: people2 is not defined
        // var people1 = "大哥"; // 存在变量提升
        // let people2 = "二哥"; // 不存在变量提升
        // 4. 不影响作用域链；
        // 什么是作用域链：很简单，就是代码块内有代码块，跟常规编程语言一样，上级代码块中的局部变量下级可用
// {
//      let p = "大哥";
//      function fn(){
//      console.log(p); // 这里是可以使用的
// }
//      fn();
// } 
    </script>
</body>

</html>

应用场景：

以后声明变量使用 let 就对了

七、let案例：点击div更改颜色

代码实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>let案例：点击div更改颜色</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitterbootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .item {
            width: 100px;
            height: 50px;
            border: solid 1px rgb(42, 156, 156);
            float: left;
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2 class="page-header">let案例：点击div更改颜色</h2>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <script>
        // 获取div元素对象
        let items = document.getElementsByClassName('item');
        // 遍历并绑定事件
        for (let i = 0; i < items.length; i++) {
            items[i].onclick = function () {
                // 修改当前元素的背景颜色
                // this.style.background = 'pink'; // 写法一：常规写法一般无异常
                items[i].style.background = 'pink'; // 写法二
                // 写法二：需要注意的是for循环内的i必须使用let声明
                // 如果使用var就会报错，因为var是全局变量，
                // 经过循环之后i的值会变成3，items[i]就会下标越界
                // let是局部变量
                // 我们要明白的是当我们点击的时候，这个i是哪个值
                // 使用var相当于是：
                // { var i = 0; }
                // { var i = 1; }
                // { var i = 2; }
                // { var i = 3; }
                // 下面的声明会将上面的覆盖掉，所以点击事件每次找到的都是3
                // 而使用let相当于是：
                // { let i = 0; }
                // { let i = 1; }
                // { let i = 2; }
                // { let i = 3; }
                // 由于let声明的是局部变量，每一个保持着原来的值
                // 点击事件调用的时候拿到的是对应的i
            }
        }
    </script>
</body>

</html>

运行结果

image-20210311173608354

版权声明：本文为bleso原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/bleso/p/14519393.html