前端编程语言——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>

在这里插入图片描述

  • 总给:这个定时器有个问题,就是点击停止计时之后,5秒它就会自动复位。

7、练习:

  • 写一个判断是否为闰年的函数
  • 给定一个数组,打印其最大值与最小值
  • 让数组首尾两个元素交换位置
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值