ES6-let变量声明以及声明特性

小凡喜编程

已于 2022-11-23 15:57:19 修改

阅读量214

点赞数 1

分类专栏：前端文章标签： es6 前端 javascript

于 2022-11-22 15:35:40 首次发布

本文链接：https://blog.csdn.net/qq_61658398/article/details/127982493

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

let的变量声明：

 <script>
        //声明变量
        let a;
        let b,c,d;
        let e = 100;
        let f = 521, h = [];

 </script>

let的声明特性：

1.变量不能重复声明

2.块级作用域全局，函数，eval

3.不存在变量提升

4.不影响作用域链

 <script>
        //let声明的特性
        //1.变量不能重复声明
        let star = '小凡';
        //let star = '凡凡'；
        
        //2. 块级作用域 全局，函数，eval
        // if else while for
        {
            let girl = '凡凡'
        }
        console.log(girl);    //全局不能读取，let是块级作用域

        //3 不存在变量提升
        console.log(song);    //var可以在未声明前使用
        console.log(sum)      // let则需要在声明后使用
        var song = '快乐达人';
        let sum = 20;

        //4 不影响作用域链
        {
            let school = '小学'
            function fn(){
                console.log(school);
            }
            fn();
        }
 </script>

let实践案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <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(let i=0;i<items.length;i++){
            items[i].onlick = function(){
                //修改当前元素的背景颜色
                //this.style.background = 'pink';
                items[i].style.background = 'pink';
            }
        }
        //console.log(window.i)
    </script>
    
</body>
</html>