ES6之let

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>let</title>
</head>
<body>
    <script>
        //声明变量
        let a;
        let b,c,d;
        let e = 100;
        let f = 521, g = 'iloveyou', h = [];

        //1. 变量不能重复声明
        let star = '罗志祥';
        let star = '小猪';

        //2. 块儿级作用域    全局, 函数, eval
        // if else while for 
        {
            let girl = '周扬青';
        }
        console.log(girl);
        // 结果是girl is not defined  ；let定义的只能在同一块级作用域内，这和var不同，
        

        //3. 不存在变量提升  就是说不允许在变量定义之前使用。
        console.log(song);
        let song = '恋爱达人';
        // 结果： song is not defined ；因为let不允许在变量定义之前使用。
        // 如果是var的话，输出的结果就会是defined，
        //因为在执行 console.log(song)的时候他会默认自己创建一个var long；然后再执行 console.log(song);

        //4. 不影响作用域链
        {
            let school = '尚硅谷';
            function fn(){
                console.log(school);
            }
            fn();
            // 结果：尚硅谷
        }

    </script>
</body>
</html>
复制代码
 let 关键字
let 关键字用来声明变量，使用 let 声明的变量有几个特点：
1) 不允许重复声明
2) 块儿级作用域
3) 不存在变量提升
4) 不影响作用域链
应用场景：以后声明变量使用 let 就对了
 
示例用法：
复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击 DIV 换色</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/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">点击切换颜色</h2>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <script>
        //获取div元素对象
        let items = document.getElementsByClassName('item');

        //遍历并绑定事件
        for(var i = 0;i<items.length;i++){
            items[i].onclick = function(){
                //修改当前元素的背景颜色
                // this.style.background = 'pink';
                items[i].style.background = 'pink';
            }
        }
        
    </script>
</body>

</html>
复制代码

 上面代码是有问题的，因为for(var i=0,...)

class="item"  元素有3个，所以for循环完成之后i变成3，当点击click事件触发函数的时候，i还是3，但是class="item"  元素只有3个，显然下标超出范围了，所以可以改为

this.style.background = 'pink';

或者使用let做变量声明，因为他是块级作用域的

复制代码
  //获取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';
            }
        }
复制代码

 

 

posted @   安静点--  阅读(24)  评论(0)  编辑  收藏  举报
相关博文：
· ES6使用let实现变量的解构赋值
· TypeScript类型声明
· 关于ES6(一,let和const)
· ES6新增语法
· let关键字
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
历史上的今天：
2021-11-15 jQuery之offset和position
2021-11-15 jQuery之CSS
2021-11-15 jQuery复习
2021-11-15 jQuery属性
点击右上角即可分享
微信分享提示