【es6】01let和const的练习和使用

jwhxxlxl

已于 2023-12-12 20:17:31 修改

阅读量30

点赞数

文章标签： javascript 前端 vue.js es6

于 2023-12-06 11:23:29 首次发布

本文链接：https://blog.csdn.net/jwhxxlxl/article/details/134790183

版权

输入html会出现小框选择html:5按回车

注意运行报错要把var改为let

点击黑色块是会变为红色

const在计算机科学中是一个非常重要的关键字，它用于定义常量。常量是具有固定值的变量，它们在程序执行期间不会改变。以下是一些关于const的应用：

常量声明：使用const关键字可以声明程序中的常量，这样在整个程序中使用该常量时，可以避免意外的赋值或修改。
防止变量修改：有时，我们希望在程序的某个地方定义变量，但又不希望在后面的代码中更改该变量的值。在这种情况下，可以使用const使该变量成为只读变量。这可以提高程序的可维护性和可读性。
数组的长度：在C/C++中，数组的长度必须是一个常量，因此可以使用const来定义数组的长度常量。
函数参数：在函数定义中使用const关键字可以确保不会修改传递给函数的参数。这可以防止副作用和意外的修改问题。
枚举常量：在C/C++中，枚举常量通常定义为const常量，这样可以确保它们在程序中具有唯一的值，且不能被更改。

总之，const在计算机科学中的应用非常广泛，可以在保证程序正确性和可维护性的情况下，提高程序的性能和可读性。

在前端开发中，点击事件是由用户在页面上进行点击操作而产生的。当用户点击页面上的某个元素时，浏览器会捕获这个事件，并将其封装成一个事件对象。然后，浏览器会自动触发与该元素相关联的事件处理函数。

事件处理函数可以通过添加事件监听器来注册，这样当用户触发事件时就会调用该函数。事件监听器可以通过JavaScript的addEventListener()方法来添加，传入的参数包括事件类型（如click）、事件处理函数以及可选的一些配置选项。

在事件处理函数中，我们可以操作页面元素进行一些响应操作，例如更新文本内容、修改样式、发送网络请求等。

<!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>
        .div {
            width: 100px;
            height: 100px;
            background-color: black;
            float: left;
            margin-left: 20px;
        }
    </style>
</head>

<body>
    <!-- 页面上右三个块，高宽都为100px，背景色为黑色， -->
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
    <script>
        //给div元素添加点击事件
        let div = document.getElementsByClassName("div");
        console.log(div)
        //运行报错。需要把var改为let
        for (let i = 0; i < div.length; i++) {
            // this.style.backgroundColor="red";
            // div[i],style.backgroundColor="red";
            div[i].onclick = function () {
                let co = div[i].style.backgroundColor;
                if (co == "red") {
                    div[i].style.backgroundColor = "black";
                } else {
                    div[i].style.backgroundColor = "red";
                }
            }
        }
    </script>
</body>

</html>

最后效果是这样的

不允许重复声名会报错

var a=1;
var a=2;
console.log(a);
let a=1;
let a=2;
console.log(a);

块级作用域

        {
            let a=1;
        }
        console.log(a);

不存在变量提示

        console.log(a);//undiefind
        var a=1;
        console.log(a);//1

let定义变量，必须先定义再使用

        console.log(b);//报错
        let b=2;
        console.log(b);//2

不影响作用域链

        let a=1;
        {
            console.log(a);//1
            console.log(b);报错
        }
        let b=2;

暂时性死区(TDZ)

        let a=1;
        {
            console.log(a);//报错
            let a=2;
            console.log(a);//2
        }

不与顶层对象挂钩

        console.log(this)//windown
        var a=1;//与顶层对象挂钩
        console.log(a==window.a)//true
        let b=2;//不与顶层挂钩
        console.log(b==window.b)//false
        console.log(window.b)//undefinde
        const a=function(){
            console.log(this);//windown
        }
        a();

声明必须赋初始值

标识符一般为大写

不允许重复声明

值不允许修改

        const a={
            name:"狐",
            age:20
        }
        a.name="狐狸"
        console.log(a.name)//块级作用域

更详细的内容还在编写中

jwhxxlxl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫