2023/3/6日笔记

少年别浪
87 阅读2分钟

1-1、let和const

1.let和const是什么

  • 声明变量或声明常量
  • var声明变量
  • let代替var,声明变量
  • const声明常量 constant

2.let和const的用法

  • 详见案例

3.什么是变量,什么是常量

  • var/let声明的就是变量,变量一旦初始化之后还可以重新赋值
  • const声明的就是常量,常量一旦初始化,就不能重新赋值了,否则就会报错

代码案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1-1、let和const</title>
</head>
<body>
    <script>
        // 1.let和const是什么
        
        // 2.let和const的用法
        // var一样

        var username = "Alex";
        let age = 18;
        const sex = "男";
        console.log(username,age,sex);

        // 3.什么是变量,什么是常量

        username = "ZS";
        age = 28;
        console.log(username,age);

        // sex = "女";
    </script>
</body>
</html>

1-2、const

1.为什么需要const

  • const 就是为了那些一旦初始化就不希望重新赋值的情况设计的

2.const 的注意事项

  • 2.1使用const声明常量,一旦声明,就必须立即初始化,不能留到以后赋值
  • 2.2 const 声明的常量允许在不重新赋值的情况下修改它的值
  • 如果不知道用什么的时候,最好先用const,等需要修改时再改为let也来得及,如果先用let可能无法及时发现值被更改导致程序运行我们不希望发生的情况

代码案例

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1-2、const</title>
</head>

<body>
    <script>
        // 1.为什么需要const
        // let
        // let sex = "male";
        // // ...
        // sex = "female";
        // console.log(sex);

        // const
        // const sex = "male";
        // // ...
        // sex = "female"
        // console.log(sex);

        // 2.const 的注意事项
        // 2.1使用const声明常量,一旦声明,就必须立即初始化,不能留到以后赋值
        // const sex;
        // sex = "male";

        // const sex = "male";

        // 2.2 const 声明的常量允许在不重新赋值的情况下修改它的值
        // 基本数据类型     基本数据类型只能用重新赋值的方法来去修改它的值
        // const sex = "male";
        // sex = "female";

        // 引用数据类型
        // const person = {username:"Alex"};
        // // person = {};
        // person.username = "ZhangSan";
        // console.log(person);

        // 3.什么时候用const,什么时候用let
        // for (let i = 0; i < 3; i++){};

        const username = "Alex";
    </script>
</body>

</html>

1-3、let、const与var的区别

1.重复声明

  • 已经存在的变量或常量,又声明了一遍就叫做重复声明
  • var 允许重复声明,let/const不允许
  • 函数中的参数也算一次声明

2.变量提升

  • var 会提升变量的声明到当前作用域的顶部
  • let/const 不存在变量提升
  • 养成良好的编程习惯,对于所有的变量或常量,做到先声明,后使用

3.暂时性死区

  • 只要作用域内存在let/const,它们所声明的变量或常量就自动"绑定"这个区域,不再受到外部作用域的影响
  • let/const 存在暂时性死区,var不存在

4.window对象的属性和方法

  • 全局作用域中,var 声明的变量,通过function 声明的函数,会自动变成window对象的属性或方法
  • let/const不会

代码案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1-3、let、const与var的区别</title>
</head>
<body>
    <script>
        // 1.重复声明
        // var a = 1;
        // // ...
        // let a = 2;
        // console.log(a);

        // 函数中的参数也算一次声明,所以这种情况也属于重复声明
        // function func(a) {
        //     let a = 1;
        // }
        // func();

        // 2.变量提升
        // console.log(a);

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

        // 相当于
        // var a;
        // console.log(a);
        // a = 1;
        // console.log(a);

        // console.log(a);
        // let a = 1;

        // 养成良好的编程习惯,对于所有的变量或常量,做到先声明,后使用

        // 3.暂时性死区
        // let/const 存在暂时性死区,var不存在
        // let a = 2;
        // let b = 2;
        // function func() {
        //     // console.log(a);
        //     // let a =1;
        //     console.log(b);
        // }
        // func()

        // 养成良好的编程习惯,对于所有的变量或常量,做到先声明,后使用

        // 4.window对象的属性和方法 
       
        // var/function
        // var age = 18;
        // function add() {};
        // console.log(window.age);
        // console.log(window.add === add);

        // let/const
        let age = 18;
        const add = function (){};
        console.log(window.age);
        console.log(window.add === add);
        // 5.块级作用域
    </script>
</body>
</html>

1-4、块级作用域

什么是块级作用域

  • var 没有块级作用域
  • let/const 有块级作用域

2.作用域链

  • 作用域链:内层作用域->外层作用域->...->全局作用域

3.有哪些块级作用域

  • for(){}
  • while(){}
  • do{}while()
  • if(){}
  • witch(){}
  • 函数属于函数作用域,并不是块级作用域
  • 对象不构成任何作用域
  • 对象里可以构成函数作用域,但是对象本身不构成任何作用域

代码案例

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1-4、块级作用域</title>
</head>

<body>
    <script>
        // 块级作用域
        // 什么是块级作用域
        // var 没有块级作用域
        // for (var i = 0; i < 3; i++) {
        //     console.log(i);
        // }
        // console.log(i);

        // let/const 有块级作用域
        // for (let i = 0; i < 3; i++) {
        //     // i = i+1;
        //     console.log(i);
        // }
        // console.log(i);

        // 2.作用域链
        // function func() {
        //     for (let i = 0; i < 3; i++) {
        //         // console.log(i);
        //     }
        // }
        // func();
        // console.log(i);
        // 作用域链:内层作用域->外层作用域->...->全局作用域

        // 3.有哪些块级作用域
        // {}
        // {
        //     let age = 18;
        //     console.log(age);
        // }
        // console.log(age);

        // for(){}
        // while(){}
        // do{}while()
        // if(){}
        // switch(){}

        // 函数属于函数作用域,并不是块级作用域
        // function(){};
        // 对象不构成任何作用域
        const person = {
            // 对象里可以构成函数作用域,但是对象本身不构成任何作用域
            getAge:function(){},
        };
    </script>
</body>

</html>

1-5、let和const的应用

image.png

image.png

image.png

代码案例

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1-5、let和const的应用</title>
</head>

<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <script>
        // 1.var
        // var btn = document.querySelectorAll("button");

        // for (var i = 0; i < btn.length; i++) {
        //     btn[i].onclick = function() {
        //         alert(i);
        //     };
        // }

        // 2.闭包
        // for (var i = 0; i < btn.length; i++) {
        //     (function(index) {
        //         btn[index].onclick = function() {
        //             alert(index+1);
        //         };                
        //     })(i)

        // }
        
        // 3.let/const  这里主要是let因为这里的i需要是变量,用const会报错
        let btns = document.querySelectorAll("button");

        for (let i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                alert(i+1);
            }
        }
    </script>
</body>

</html>

2-1、模板字符串

1.认识模板字符串

  • 一般字符串 'alex', "alex"
  • 模板字符串 `alex`

2.模板字符串与一般字符串的区别

  • 详见案例

代码案例

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2-1、模板字符串</title>
</head>

<body>
    <script>
        // 1.认识模板字符串

        // 一般字符串
        // "alex"
        // 'alex'

        // 模板字符串
        // `alex`

        // const username1 = 'alex';
        // const username2 = `alex`;

        // console.log(username1,username2,username1 === username2);

        // 2.模板字符串与一般字符串的区别
        // 方便拼接时好写点
        const perone = {
            username: "Alex",
            age: 18,
            sex: "男",
        }
        // const info = "我的名字是：" + 
        // perone.username + "性别：" + 
        // perone.sex + ",今年" + 
        // perone.age + "岁了";
        // console.log(info);

        const info = `我的名字是${perone.username}，性别：${perone.sex},今年${perone.age}岁了`;
        console.log(info);
    </script>
</body>

</html>

2-2、模板字符串的注意事项

1.输出多行字符串

  • 模板字符串中，所有的空格、换行或缩进都会被保留在输出中

2.输出` 和 \ 等特殊字符

  • 利用反斜杠转义它后面的字符来进行输出

3.模板字符串的注入

  • 只要最终可以得出一个值的就可以通过${}注入到模板字符串中

代码案例

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2-2、模板字符串的注意事项</title>
</head>

<body>
    <script>
        // 1.输出多行字符串

        // 一般字符串
        // console.log("第一行\n第二行");

        // 模板字符串
        // console.log(`第一行\n第二行`);
        // console.log(`第一行
        // 第二行`);

        // 模板字符串中，所有的空格、换行或缩进都会被保留在输出中

        // 2.输出` 和 \ 等特殊字符    利用反斜杠转义它后面的字符来进行输出
        console.log(` \` \\ \` \\`);

        // 3.模板字符串的注入
        // ${}
        const username =  'alex';
        const person =  {username:'alex',age:12,sex:"male"};
        const getSex = function (sex) {
            return sex === 'male'?"男":"女";
        }

        console.log(`${username},${person.age + 2},${getSex(person.sex)}`);

        // 只要最终可以得出一个值的就可以通过${}注入到模板字符串中
    </script>
</body>

</html>

2-3、模板字符串的应用

代码案例

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2-3、模板字符串的应用</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
    </style>
</head>

<body>
    <p>学生信息表</p>
    <ul>
        <li>信息加载中</li>
    </ul>
    <script>
        // 数据
        const students = [
            {
                username: "Alex",
                age: 18,
                sex: "male"
            },
            {
                username: "ZhangSan",
                age: 28,
                sex: "male"
            },
            {
                username: "LiSi",
                age: 20,
                sex: "female"
            },
        ];

        const list = document.querySelector("li");

        let html = "";

        for (let i = 0; i < students.length; i++) {
            html += `<li>我的名字是${students[i].username},今年${students[i].age}岁，是${students[i].sex === "male" ? "男生" : "女生"}</li>`
        }

        list.innerHTML = html;
    </script>
</body>

</html>
avatar
文章
阅读
粉丝