前端编程语言——JS语言结构、函数、数组、字符串、日期、对象、定时器（2）

0、前言：

这篇文章记录的是我自己的学习笔记。
在python中通过input来获取输入，在JS中用prompt()，来获取输入。
写JS代码要记得每个代码结束要加上分号。

1、JS编程语言结构：

顺序结构：从上往下依次执行
分支结构：if、switch（switch和case要搭配break使用，还得有default兜底）
循环结构：while、do-while、for、for-in（只能从头遍历到尾）、for-of、foreach、重点掌握while和for循环。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // if单分支
        if (10){
            console.log(10);
            console.log(10);
        }
        // if双分支
        // a = prompt('请输入你的年龄')
        // if (a>18){
        //     console.log('你已成年了');
        // }
        // else{
        //     console.log('你还未成年');
        // }
        // if多分支
        var score = 90;
        if (score >= 90){
            console.log('优秀');
        }
        else if(score >= 60){
            console.log('合格');
        }
        else{
            console.log('不合格');
        }
        // ---------------------
        // ★while循环，计算1+2+···+100
        var i = 1, s = 0;
        while(i<=100){
            s = s+i;
            i += 1;
        }
        console.log(s); // 5050
        // ★for循环
        var m = 0;
        for(var i=1; i<=100; i++){
            m = m+i;
        }
        console.log('for循环结果：',m); // 5050
        // for-in循环
        var a = [1,2,3,4,5];
        var sum = 0;
        for(var i in a){
            sum = a[i] + sum;
        }
        console.log(sum); // 15
    </script>
</body>
</html>

2、JS当中的函数：

JS当中函数的概念：把特定功能的代码抽取出来，使之成为程序中的一个独立实体。
使用函数的好处：提高程序的复用性，减少代码量，便于维护。

// 函数格式：
function 函数名(参数1, 参数2, ...){
	执行语句；
	return 返回值；
}

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function addition(a,b){
            return a+b
        }
        console.log(addition(3,5))
    </script>
</body>
</html>

JS中匿名函数的写法：在JS中匿名含数就相当于把正常函数的函数名去掉，然后把函数赋值给一个变量，这个变量就相当于函数名。匿名含数一般会被当中参数，传入到另外一个函数当中，因此匿名函数就涉及到函数的嵌套，而函数嵌套就涉及到闭包的内容（闭包就是指在外函数中定义一个内函数，并将内函数作为外函数的返回值，闭包可以为内函数提供一个相对隐秘的封装环境）

var fn = function(a,b){
	console.log('匿名函数:',a,b)
}
fn(1,2) // 匿名函数: 1 2

函数的特点是，不调用不执行，调用才执行，可以重复调用，JS当中的函数不需要提前声明，就可以在定义函数的前面调用，但是JS当中的匿名函数不具有这种性质。
JS当中函数的参数：JS当中的参数是传进去之后，传入到一个叫arguments的数组当中，可以在函数中通过console.log把arguments打印出来看一看，arguments可以用来接收不同长度的参数。在ES6的语法中，可以给函数设置默认参数，但是不能像python一样传递关键字参数，传递参数还是通过位置参数来传参。
ES6版本中的箭头函数：箭头函数只有一个参数的时候可以省略参数外面的括号，否则都得加括号。如果函数体有多行代码，就要给代码外面加花括号，代码之间用分号隔开，花括号外面也要加分号。如果返回值是一个字典，就应该在字典的花括号外面再加一个圆括号。

<script>
    // 用箭头函数实现a+b
    var fn = (a,b) => a+b;
    console.log(fn(1,2)) // 3
    var fx = (name,age) => ({name:name, age:age})
    console.log(fx('豆豆', 18)) // 返回的是object
    var fa = (a, b) => {a = a*2; b = b-1; return a+b}
    console.log(fa(3,2)) // 7
</script>

回调函数：把一个函数作为参数输入到另一个函数当中，如下面代码中 f1 就是一个回调函数。

<script>
    function f1(f,a){
        f(a);
    }
    function f2(a){
        console.log('callback', a)
    }
    f1(f2,100) // callback 100
</script>

自运行函数（拓展）：用一个括号包裹函数体，再用一个括号调用函数：（函数体）（参数···）
注意：函数作用域表明，函数内部的变量是局部变量，函数外部定义的变量是全局变量，注意在函数中定义变量时，如果没有加var，这个变量就会变成全局变量；在 if 或者 for 当中 let 定义的变量具有作用域，var 定义的变量是全局的；

3、JS当中的数组（相当于python中的列表）：

传统定义JS当中数组的方法是用 new Array 的方法，现在都是用类似python列表定义的方式，注意数组中可以存放多种类型的数据。
数组元素的访问，用下标从0开始访问。
数组遍历，用for循环。
创建好数组之后，可以用 length 属性，获取数组长度。
数组中没有和python一样的切片操作，但是有对应的方法，可以实现切片：
- push()：接收任意数量的参数，把它们逐个添加到数组的末尾，并返回修改之后的数组长度。
- pop()：从数组末尾移除最后一个元素，减少数组的 length 值，然后返回移除的元素。
- sort()：从小到大排序，原数组被修改，但是要实现数字排序，就要在sort中加函数。
- reverse()：逆向排序，原数组也被修改。
- slice()：切片，不修改原数组，将原数组指定区域的数据提取出来，返回一个新数组，不改变原数组，可以通过该方法实现数组复制。
- splice()：截取原数组中指定的数据，会改变原数组。
- indexof()：获取数组中第一个出现指定元素的下标，如果不存在则返回-1。
- join()：将数组中的元素用指定的字符连接，连接成为一个字符串。
- 注意：在 console.log 中打印一个数组时，后面会有 Prototype 在其中就可以看到数组相关的方法。

4、JS当中的字符串：

字符串定义：var str = “内容” （可以用双引号或者单引号）。
字符串可以通过下标取其中的单个字符。
字符串不可以修改
注意JS中写在 “/“ 与 “/” 之间的就是正则表达式
字符串中常用方法：字符串的方法有很多，以下只简单列举一些较为常用的
- 通过“+”可以拼接字符串
- str.indexOf(‘b’)：查找字符串’b’第一次出现在str字符串中的位置
- str.replace(‘b’,‘m’)：将字符串str中第一个字符b替换为m
- ★★ str.substring(‘1’,‘3’)：截取字符串中第1位到第3位的字符串，不包含第3位
- console.log(‘hello world’.split(‘o’))：打印结果为[‘hell’, ’ w’, ‘rld’]，这个代码表示，通过字符o，切分字符串 ‘hello world’ 。
- console.log(‘Hello WorLd’.toLowerCase())：打印结果为hello world，表示将字符串整体转换为小写。
- console.log(‘Hello WorLd’.toUpperCase())：打印结果为HELLO WORLD，表示将字符串整体转换为大写。
- JS中占位符的写法：相当于python中 f"{}" 的写法，如下是JS中占位符的写法，注意用占位符的时候，就不能用引号了，用的是 ` 。

<script>
    var str = 'abcsa'
    console.log(`JS:${str}`)  // JS:abcsa
</script>

5、JS当中的日期：

创建日期对象：
- 使用 new 运算符和构造函数 Date 即可，注意JS中的构造函数不等同于python中的构造函数。
- var d = new Date(); 这个代码中没有往Date中传参数，就会自动获取当前时间，常用的传递时间的格式如下：2023/08/22 或者 2030-03-22 或者其他时间格式。通过传递时间的格式就能把时间设置为一个你设定好的时间，但是要注意传递设定时间时，要给你设定的时间加上引号（单引号，双引号都可以）。
日期对象当中常用的方法：
- getFullYear()：获取日期对象中的年
- getMonth()：获取日期对象中的月
- getDate()：获取日期对象中的日
- getDay()：获取日期对象所在的星期
- getHours()：获取日期对象中的时
- getMinutes()：获取日期对象中的分
- getSectonds()：获取日期对象中的秒
- 注意：也可以通过set~方法修改日期对象，例如 setMonth() 就可以设置日期对象的月份。
时间戳：
- 在JavaScript中，时间戳是指自1970年1月1日（UTC/GMT的午夜）以来所经过的秒数或毫秒数。可以使用Date.now()方法获取当前时间的时间戳（以毫秒为单位），或者通过new Date().getTime()创建一个新的Date对象并获取其时间戳。
- 通过 getTime() 可以获取当前日期对象的时间戳，通过 setTime() 可以修改当前对象的时间戳。

5、JS当中的对象：

不同于其他语言中的对象，JS当中的对象可以充当python中的字典。是一种引用数据类型，可以用于存储变量和函数。
创建对象：

<script>
    // 创建对象的方法1
    var obj = new Object();
    obj.name = 'Brush';
    obj.age = 19;
    obj.dance = function(action){
        console.log(`${obj.name} can ${action}`);
    };

    console.log(obj.name, obj['name']);
    obj.dance('papa');

    // 创建对象的方法2(推荐使用这种方式)
    var name_1 = 'lala'
    var obj1 = {
        name : 'youyou',
        age : 20,
        runu : function(){
            return 'running..';
        },

        // 属性简写(前提是前面已经定义过)
        name_1,
        // 方法简写
        zouLu(s){
            console.log(`${name_1}在${s}的走路`);
        }
    };
    console.log(obj1.name, obj1.name_1);
    obj1.zouLu('快乐');

    // 删除对象中的属性或者方法
    delete obj1.zouLu;
    delete obj1.name;
</script>

在这里插入图片描述

补充：JS当中的构造函数就相当于python当中的类，但不完全一样，如下所示。

<script>
    // 创建构造函数（类）
    function User(number, interesting){
        // 初始化属性
        this.number = number;
        this.interesting = interesting;
        // 方法
        this.action = function(){
            console.log(`${number} love ${interesting}`);
        };
    };

    // 使用new之后，上面的User才能成为构造函数
    var user = new User(1,'running');
    console.log(user.number,user.interesting);
    user.action();
</script>

6、★★★JS中定时器的应用

python中没有定时器的功能，JS中这个功能就有点像嵌入式当中的定期器了。
1、周期性定时器（setInterval）搭配关闭定时器（clearInterval），在 setInterval() 中有两个参数，一个是函数，一个是间隔时间，注意间隔时间的单位是毫秒。第一个参数应该是一个不包含参数的函数；使用方式一般是把周期定时器赋值给一个变量，然后通过给clearInterval() 中传入定时器变量，来终止定时器，注意clearInterval() 可以写在定时器里面（通过计数次数来终止），也可以在定时器外面通过其他条件激活（通过事件来终止）。要注意写在JS代码中的定时器与它后面的代码是异步的。

<script>
    //
    n = 0
    name = 'zhangsan' 
    var timer = setInterval(function(){
        console.log(`${name}3秒到了`)
        name+='- ';
        n += 1;
        if (n > 4){
            clearInterval(timer)
        }
    },1000);
    console.log('如果我在定时器前面显示，就说明定时器在代码执行中，与其他代码是异步的')
</script>

在这里插入图片描述

2、延时器（setTimeout）搭配关闭延时器（clearTimeout），延时到指定时间后，执行一次操作，一般不用专门去关闭延时器。

<script>
    // 实现秒表功能
    setTimeout(
        function(){
            console.log('两秒之后执行')
        }, 2000
    );
    console.log('如果我在延时器前面显示，就说明延时器在代码执行中，与其他代码是异步的');
</script>

在这里插入图片描述

下面的示例代码使用延时器做一个定时器，结合下面的例子，可以看看JS如何与HTML交互，注意：在JS中用class是没法选择到对象的，需要用id选择对象。
- 逻辑：先通过点击事件引发JS当中的函数，然后在函数中写周期性定时器，为了用按键控制停止，所以把周期性定时器赋值给一个变量。注意下面代码中超前使用了DOM相关知识。

<script>
    var n = 0;
    var timer = null; // 定时器写成全局变量，这样就能控制开始和停止了。

    // 定时器实现秒表功能
    beg.onclick = function(){
        if(!timer){
            timer = setInterval(
                function(){
                    n += 1;
                    // 更新秒表时间
                    var h = parseInt(n / (60 * 60));
                    var m = parseInt(n/60) % 60;
                    var s = parseInt(n % 60);
                    
                    // 通过DOM操作更新页面内容
                    hour.innerText = h<10?'0'+h:h;
                    minu.innerText = m<10?'0'+m:m;
                    sec.innerText = s<10?'0'+s:s;
                }, 1000
            );   
        }
        
    };

    // 停止按钮
    stop1.onclick = function(){
        clearInterval(timer)
        setTimeout(function(){
            n = 0;
            // 更新秒表时间
            var h = parseInt(n / (60 * 60));
            var m = parseInt(n/60) % 60;
            var s = parseInt(n % 60);
            // 通过DOM操作更新页面内容
            hour.innerText = h<10?'0'+h:h;
            minu.innerText = m<10?'0'+m:m;
            sec.innerText = s<10?'0'+s:s;
        },5000)
    }
</script>