ES6_let声明变量以及声明特性01

最新推荐文章于 2024-08-03 17:05:14 发布

Be_nurturing

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量101

点赞数

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

本文链接：https://blog.csdn.net/Be_nurturing/article/details/120972515

版权

ES6 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

基础入门
1.let声明变量以及声明特性
1.1 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 start = '小猪';
        // let start = '罗志祥';  
        //换成var 声明是可以的
        var start = '小猪';
        var start = '罗志祥';
    </script>
</body>
</html>

1.2 块级作用域全局，函数，eval

<!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>
        //2.块级作用域 全局，函数，eval
        // {
        //     let girl = '周扬青';
            // var girl = '周扬青'; var没有块级作用于，所以是全局作用域，代码块以外是可以调用的
        // }
        //      console.log(girl);
    </script>
</body>
</html>

1.3 不存在变量提升

<!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>
        //3.不存在变量提升
        console.log(song);   //在变量声明之前调用会有下面两种情况
        // var song = '恋爱达人';  //1.页面提示undefined
        // let song = '恋爱达人';  //2.页面会提示错误
    </script>
</body>
</html>

1.4 不影响作用域链

<!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>
        //4.不影响作用域链
        {
            let school = '学校';
            function  fun(){
                console.log(school);
            }
            fun();
        }
    </script>
</body>
</html>

1.5let实践练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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>
        let items = document.getElementsByClassName('item');
        
        //遍历并绑定事件
        for(let i = 0; i < items.length;i++){
            items[i].onclick = function(){
            	//此种方是var 声明i
               // this.style.background = 'pink';
               //此种方式是let声明i
               items[i].style.background = 'pink';
            }
        }     
    </script>
</body>
</html>

Be_nurturing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6_let声明变量以及声明特性01

基础入门1.let声明变量以及声明特性1.1 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></hea
复制链接

扫一扫

专栏目录