ECMAScript_6新特性学习__let和const关键字

最新推荐文章于 2024-04-24 09:22:16 发布

hakusai22

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量203

点赞数

分类专栏： # ECMAScript_6新特性文章标签： javascript

https://github.com/hakusai22

本文链接：https://blog.csdn.net/weixin_45480785/article/details/113096398

版权

ECMAScript_6新特性专栏收录该内容

10 篇文章 0 订阅

订阅专栏

let和const关键字

一. let 关键字
二. const 关键字

一. let 关键字

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

不允许重复声明
块儿级作用域
不存在变量提升
不影响作用域链

应用场景：以后声明变量使用 let 就对了

简单测试一下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);

        //3. 不存在变量提升
        console.log(song);
        //不能在定义之前使用
        let song = '恋爱达人';

        //4. 不影响作用域链
        {
            let school = '戏子666';
            function fn(){
                console.log(school);
            }
            fn();
        }

    </script>
</body>
</html>

在这里插入图片描述

简单测试一下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(let i = 0;i<items.length;i++){
            items[i].onclick = function(){
                //修改当前元素的背景颜色
                // this.style.background = 'pink';
                items[i].style.background = 'pink';
            }
        }
        // console.log(i)

    </script>
</body>

</html>

在这里插入图片描述

二. const 关键字

const 关键字用来声明常量，const 声明有以下特点

声明必须赋初始值
标识符一般为大写
不允许重复声明
值不允许修改
块儿级作用域
注意: 对象属性修改和数组元素变化不会出发 const 错误
应用场景：声明对象类型使用 const，非对象类型声明选择 let

简单测试一下const关键字的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>const 定义常量</title>
</head>
<body>
    <script>
        //声明常量
        const SCHOOL = '戏子';

        //1. 一定要赋初始值
        // const A;
        //2. 一般常量使用大写(潜规则)
        const a = 100;
        //3. 常量的值不能修改
        // SCHOOL = '戏子';
        //4. 块儿级作用域
        {
            const PLAYER = 'UZI';
        }
        // console.log(PLAYER);
        //5. 对于数组和对象的元素修改, 不算做对常量的修改, 不会报错
        const TEAM = ['UZI','MXLG','Ming','Letme'];
        TEAM.push('Meiko');
        console.log(TEAM)


    </script>
</body>
</html>

在这里插入图片描述

hakusai22

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ECMAScript_6新特性学习__let和const关键字

let和const关键字一. let 关键字二. const 关键字一. let 关键字let 关键字用来声明变量，使用 let 声明的变量有几个特点：不允许重复声明块儿级作用域不存在变量提升不影响作用域链应用场景：以后声明变量使用 let 就对了简单测试一下let关键字的属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met
复制链接

扫一扫