ES6 let知识

let声明变量
let变量不可重复利用
块级作用域
不存在变量提升
不影响作用域链
点击变色的案例

ES6学习笔记

let声明变量

<script>
    // 声明变量
    let a;
    let b, c, d;
    let e = 333;
    // 变量可以是数字 字符串 数组
    let f = 521,g = "我叫史迪奇",h = [];
</script>

let变量不可重复利用

<script>
    // 声明变量
    let sdq = "史迪奇";
    // let sdq = "史迪仔"
</script>

块级作用域

<script>
    //  全局 函数 eval都属于块级作用域
    // 像if else while for 都属于块级 都不支持let
    {
        // {}也是块级
        let sdq = '史迪奇';
    }
    console.log(sdq);
</script>

不存在变量提升

<script>
    console.log(sdz);
    let sdz = '史迪仔'; 
</script>

不影响作用域链

<script>
    let sdq = '史迪奇';
    function SDQ(){
        console.log(sdq);
    }
    SDQ()
</script>

点击变色的案例

<body>
    <div class="container">
        <h2 class="page-header">变色</h2>
        <div class="Stitch">史迪奇</div>
        <div class="Reuben">鲁本</div>
        <div class="Angel ">安琪</div>
    </div>
    <script>
        //获取div元素对象
        let sdqs = document.getElementsByClassName('sdq');

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

作者: 我叫史迪奇
本文来自于: https://sdq3.link/ES6-let.html博客内容遵循署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议