ES6新特性之let变量声明特性及其案例

最新推荐文章于 2024-07-30 10:56:44 发布

哈哈小猿

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量480

点赞数

分类专栏： ES6新特性文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_42251357/article/details/125285334

版权

ES6新特性专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

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

代码演示:

1. 不允许重复声明

 	// 1.变量不能重复声明
 	let beautifulGirl = "小刘同学"
    let beautifulGirl = "刘同学"
    // 报错:Cannot redeclare block-scoped variable 'beautifulGirl'

2. 块儿级作用域（局部变量）

  	{
        var girl = "小刘同学"
    }
    console.log(girl);
    // 打印结果: 小刘同学

  	{
        let girl = "小刘同学"
    }  
    console.log(girl);
    // 报错:Uncaught ReferenceError: girl is not definedat

注意：在 `if` `else` `while` `for` 中使用`let`都是块级作用域

3. 不存在变量提升

使用var (存在变量提升)

	console.log(girl);
    var  girl = "小刘同学"
 	// 打印结果:undefined

使用let (不存在变量提升)

 	console.log(girl);
    let  girl = "小刘同学"
    // 报错:ncaught ReferenceError: Cannot access 'girl'

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

4.不影响作用域链

{
    let beautifulGirl = "小刘同学";
    function fn(){
        console.log(beautifulGirl);
    }
    fn()
    // 打印结果:小刘同学
}

注：作用域链是代码块内有代码块，跟常规编程语言一样，上级代码块中的局部变量下级可用

let使用案例：

html代码

   <style>
        .item {
            width: 100px;
            height: 50px;
            border: solid 1px rgb(42, 156, 156);
            float: left;
            margin-right: 10px;
        }
    </style>
    
	<body>
	    <div class="container">
	        <h2 class="page-header">let案例：点击div更改颜色</h2>
	        <div class="item"></div>
	        <div class="item"></div>
	        <div class="item"></div>
	    </div>
	</body>

JavaScript代码

// 获取class名为item的元素
let items = document.querySelectorAll(".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使用var相当于是:
    { let i = 0; }
    { let i = 1; }
    { let i = 2; }
    { let i = 3; }
    
    // 由于let声明的是局部变量，每一个保持着原来的值
    // 点击事件调用的时候拿到的是对应的 i