鱼C论坛

 找回密码
 立即注册
查看: 3618|回复: 15

[见证历程] JS学习之路九(基本语法终章~)

[复制链接]
发表于 2021-2-19 14:05:49 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 yanghongchen666 于 2021-2-19 14:07 编辑

JS中的Date对象

/*
            Date对象
            -在Js中使用Date对象来表示一个时间
        */

        //创建一个date对象
        //如果直接使用构造函数一个Date对象,则会封装成为当前执行的时间
        var d = new Date();

        //创建一个指定的时间对象
        //需要在构造函数中传递一个表示时间的字符串,作为参数

        //日期格式: 月份/日/年 时:分:秒
        var d2 = new Date("2/03/2021 11:10:30");

        console.log(d2);

        /*
            getDate()
                -获取当前日期对象是几日
        */
        var date = d.getDate();
        console.log("date = " + date);

        /*
            getDay()
                -获取当前日期对象是周几
                -会返回一个0到6的值
                    0表示周日
                    1表示周一.....
        */
        var day = d.getDay();
        console.log(day);

        /*
            getMonth()
                -获取当前时间对象的月份
                -会返回一个0-11的值
                    0表示1月
                    1表示2月
                    ....
                    11表示12月
        */
        var month = d.getMonth();
        console.log("month = " + month);
        
        /*
            getFullYear()
                -获取当前日期对象的年份
        */
        var year = d2.getFullYear();
        console.log(year);
        

        /*
            getTime()
                -获取当前日期的时间戳
                -时间戳,指的是从格林威治标准时间的1970年1月1日, 0时0分0秒
                    到当前日期的毫秒数(1s=1000ms)
            -计算机底层在保存时间时,都是使用的时间戳
        */

        var time = d2.getTime();
        console.log(time);

        var d3 = new Date("1/1/1970 0:0:0");
        time = d3.getTime();
        console.log(time);

        //利用时间戳来测试代码的执行性能
        //获取当前的时间戳
        var start = Date.now();
        for(var i=0; i<100000; i++){
            console.log(i);
        }
        var end = Date.now();

        console.log(end - start);

        console.log(time);
----------------------------------
JS中Math对象

/*
            Math
                -Math和其他的对象不同,它不是一个构造函数,
                    它属于一个工具类,不用创建对象。它里面封装了数学运算相关的属性和方法
                -比如
                    Math.PI 表示圆周率
        */

        console.log(Math.PI); 

        /*
            abs()可以用来计算一个数的绝对值
        */
       
        console.log(Math.abs(-1));


        /*
            Math.ceil()
                -可以对一个数进行向上取整,小数位只要有值,就自动进1
            Math.floor()
                -对一个数进行向下取整.小数部分会被舍掉
            Math.round()
                -对一个数进行四舍五入取整
        */

        console.log(Math.ceil(1.1));

        console.log(Math.floor(1.5))

        console.log(Math.round(1.4));

        /*
            Math.random()
                -可以用来生成一个0-1之间的随机数
                -生成一个0-10的随机数
                -生成一个0-x之间的随机数
                    Math.round(Math.random()*x)
                
                -生成一个1-10之间的随机数
                -生成一个x-y之间的司机数
                    Math.round(Math.random()*(y-x))+x
        */
        
        //0-10随机数
        console.log(Math.round(Math.random()*10));
        //1-10随机数
        console.log(Math.round(Math.random()*9)+1);
        //生成1-6之间的随机数
        console.log(Math.round(Math.random()*5)+1);


        /*
            Math.max(x,y)
                -可以获取多个数中的最大值
            Math.min(x,y)
                -可以获取多个数中的最小值
        */


        var max = Math.max(10,20,30);
        var min = Math.min(10,30,20);
        console.log(max);

        /*
            Math.pow(x,y)
                -返回x的y次幂
        */

        console.log(Math.pow(2,2));

        /*
            Math.sqrt()
                -对一个数进行开方运算
        */

        console.log(Math.sqrt(4));
----------------------------------------
JS中的包装类

      
/*
            基本数据类型
                String Number Boolean Null Undefined
            引用数据类型
                Object

            在JS中为我们提供了三个包装类,通过三个包装类可以将基本数据类型的数据转换为对象
                String()
                    -可以将一个基本数据类型字符串转换为String对象
                Number()
                    -可以将一个基本数据类型的数字转换为Number对象
                Boolean()
                    -可以将一个基本数据类型的布尔值转换为Boolean对象
            
            注意:
                在实际应用中不会使用基本数据类型的对象
                    如果使用基本数据类型的对象,在做一些比较可能会带来一些不可预料的结果 
        */

        //创建一个Number类型的对象
        //以下的方法不会使用
        var num = new Number(3);
        var str = new String("hello");
        var bool = new Boolean(true);
        var num2 = new Number(3);

        console.log(typeof num);

        //向num中添加一个属性
        num.hello = "abcdefg";

        console.log(num.hello);

        /*
            方法和属性只能添加给对象,不能添加给数据类型
                当我们对一些基本数据类型的值去调用属性和方法时,
                    浏览器会临时使用包装类将其转换为对象,然后再调用对象的属性和方法
                    调用完以后,再将其装换为基本数据类型
        */
        var s = "123";
        
        s = s.toString();

        s.hello = "你好";

        console.log(s);
        console.log(s.hello);//undefined
        console.log(typeof s);
--------------------------------
JS中的字符串的方法

      
//创建一个字符串
        var str = "Hello Atguigu";

        /*
            在底层字符串是以字符数组的形式保存的
            ["H","e","l","l","o"]
        */

        /*
            length属性
                -可以获取字符串的长度
        */

        console.log(str.length);//13
        console.log(str[0]);

        
        /*
            charAt()
                -可以返回字符串中指定位置的字符
                -根据索引获取指定的字符
        */

        str = "Hello Atguigu";

        var result = str.charAt(6);
        //var result = str[6];跟上面效果一样的
        console.log("result = " + result);

        /*
            charCodeAt()
                -获取指定位置字符的字符编码(Unicode编码)
        */

        result = str.charCodeAt(0);
        console.log(result);

        /*
            String.fromCharCode()
                -可以根据字符编码(Unicode)去获取字符
        */

        result = String.fromCharCode(74);
        console.log(result);


        /*
            concat()
                -可以用来连接两个或多个字符串
                -作用和加号(+)一样
        */

        result = str.concat("你好","再见");
        console.log(result);

        /*
            indexOf()
                -该方法可以检索一个字符串中是否含有指定内容
                -如果字符串中含有该内容,则会返回其第一次出现的索引
                    如果没有找到指定的内容,则返回-1
                -可以指定第二个参数,代表开始查找的位置
        */

        str = "hello atguigu";

        result = str.indexOf("l",3);
        console.log(result);//0

        /*
            lastIndexOf()
                -该方法的用法跟indexOf()一样,
                    不同的是,indexOf()是从前往后找,
                    而lastIndexOf()是从后往前找
                -也可以指定第二个参数,指定查找的位置
        */

        result = str.lastIndexOf("h");

        console.log(result)

        /*
            slice()
                -可以从字符串截取指定的内容
                -不会影响原字符串,而是将截取到的内容返回
                -参数:
                    1. 开始位置索引(包括开始位置)
                    2. 结束位置索引(不包括结束位置)
                        -如果省略第二个参数,则会截取后便所有的
                    -也可以传递一个负数作为参数,负数的话将会从后边计算
        */

        str = "avcaghbsd";

        result = str.slice(1,4);
        result = str.slice(1,-1);
        result = str.slice(1);
        console.log(result);

        /*
            substring()
                -可以用来截取一个字符串,跟slice()类似
                -参数:
                    1. 开始截取位置的索引(包括开始位置)
                    2. 结束位置索引(不包括结束位置)
                -不同的是这个方法不能接受负值作为参数,
                    如果传递了一个负值,则默认使用0
                -而且他会自动调整参数的位置,如果第二个参数小于第一个参数
                    则自动交换
        */

        result = str.substring(0,2);
        console.log(result);

        /*
            substr()
                -用来截取字符串
                -参数:
                    1. 截取开始位置的索引
                    2. 截取的长度
                -对原字符串没有影响
        */

        str = "abcdefg";

        result = str.substr(3,2);
        console.log(result);


        /*
            split()
                -可以将一个字符串拆分为一个数组
                -参数:
                    -需要一个字符串作为参数,将会根据该字符串去拆分数组
                -如果传递空串作为参数,则会将每个字符拆分为数组中的一个元素
        */

        str = "abc,bcd,efg,hij";

        result = str.split(",");
        console.log(result);

        /*
            toUpperCase()
                -把字符串转为大写并返回
        */

        str = "abcdefg";
        result = str.toUpperCase();
        console.log(result);

        /*
            toLowerCase()
                -把字符串转换为小写并返回
        */
        str = "ABCDEFG";
        result = str.toLowerCase();
        console.log(result);
--------------------------------------------
正则表达式

      
/*
            正则表达式
                -admin
                -admin@atguigu.com
                -admin@.com
                -邮件的规则:
                    1.前边可以是xxxxx乱七八糟
                    2.跟着一个@
                    3.后边可以使xxxxx乱七八糟
                    4....com获取其他的乱七八糟
            
            -正则表达式用于定义一些字符串的规则
                计算机可以根据正则表达式,来检查一个字符串是否符合规则
                或者将字符串中符合规则的内容提取出来
        */


        //创建正则表达式对象
        /*
            语法:
                var 变量 = new RegExp("正则表达式","匹配模式");
            使用typeof检查正则对象,会返回object
            这个正则表达式可以来检查一个字符串中是否含有a

            在构造函数中可以传递一个匹配模式作为第二个参数:
                可以是
                    i: 忽略大小写
                    g: 全局匹配模式
        */

        var reg = new RegExp("a","i");

        var str = "a";

        /*
            正则表达式的方法:
                test()
                    -使用这个方法可以用来检查一个字符串是否符合正则表达式的规则,
                        如果符合规则则返回true,否则返回false
        */

        var result = reg.test(str);
        //console.log(result);

        console.log(reg.test("bcAbc"));
--------------------------------------
JS中字符串和正则相关的方法

      
var str = "1a2b3c4d5e6f7";

        /*
            split()
                -把字符串拆分为数组
                -方法中可以传递一个正则表达式作为参数,这样方法将会根据正则表达式去拆分字符串
                -这个方法即使不指定全局匹配,也会全部拆分
        */
    
        //根据任意字母来将字符串拆分

        var result = str.split(/[A-z]/);

        console.log(result);


        /*
            search()
                -可以搜索字符串中是否含有指定内容
                -如果搜索到指定内容,则会返回第一次出现的索引
                    如果没有搜索到则会返回-1
                -它可以接受一个正则表达式作为参数,然后会根据正则表达式检索字符串

                -search()只会查找第一个,即使设置全局匹配也没用
        */

        str = "hello abc hello  aec afc";

        //搜索字符串中是否含有abc或aec或afc
        result = str.search(/a[bef]c/);

        console.log(result);


        /*
            match()
                -可以根据正则表达式,从一个字符串中将符合条件的内容提取出来
                -默认情况下我们的match()只会找到第一符合要求的内容,找到以后就会停止检索
                    我们可以设置正则表达式设置为全局匹配模式,这样就会匹配到所有的内容
                -可以为一个正则表达式设置多个匹配模式,且顺序无所谓

                -match()会将匹配到的内容封装到一个数组中返回,即使只查询到一个结果
        */

        str = "1a2b3c4d5e6f7A8B9C";

        result = str.match(/[a-z]/gi);

        console.log(result);


        /*
            replace()
                -可以将字符串中指定内容替换为新的内容
                -参数:
                    1. 被替换的内容,可以接受一个正则表达式作为参数
                    2. 新的内容
                -默认只替换第一个
                -空串默认删除
        */

        str = "1a2a3a4a5e6f7A8B9C";

        //result = str.replace(/[a-z]/gi,"@_@");
        result = str.replace(/[a-z]/gi,"");

        console.log(reuslt);
----------------------------------------
JS中正则表达式语法

     
//创建一个正则表达式检查一个字符串中是否含有aaa
        
        /*
            量词
                -通过量词可以设置一个内容出现的次数
                -量词只对它前面的一个内容起作用
                -{n} 正好出现n次
                -{m,n} 出现m到n次
                -{m,} m次以上
                - + 至少一个,相当于{1,}
                - * 0个或多个,相当于{0,}
                - ? 0个或1个,相当于{0,1}
        */
        var reg = /a{3}/;

        console.log(reg.test("aaabc"));

        //ababab
        reg = /(ab){3}/;

        reg = /ab{3}c/;

        reg = /b{3}/;

        reg = /ab{1,3}c/;

        reg = /ab{3,}c/;

        reg = /ab+c/;

        reg = /ab*c/;

        reg = /ab?c/;

        console.log(reg.test("abbc"));

        /*
            检查一个字符串中是否以a开头\
                - ^ 表示开头
                - $ 表示结尾
        */
        reg = /^a/; //匹配开头a

        reg = /a$/; //匹配结尾a

        console.log(reg.test("abba"));

        /*
            如果在正则表达式中同时使用 ^ $ 则要求字符串必须完全符合正则表达式
        */
        reg = /^a|a$/;

        console.log(reg.test("abc"));


        /*
            检查一个字符串中是否含有 .
                - . 表示匹配任意字符
            在正则表达式中使用\作为转义字符
            \. 表示 .
            \\ 表示 \ 

            注意:
                使用构造函数时,由于参数是字符串,而\是字符串的转义字符,
                如果要使用\则需要使用\\来代替
        */

        var reg = /\./;

        reg = /\\/

        reg = new RegExp("\\.")

        console.log(reg.test("abc"));


        /*
            \w: 任意字母、数字、_(下划线) [A-z0-9_]
            \W: 除了字母、数字、_(下划线) [^A-z0-9_]
            \d: 任意的数字 [0-9]
            \D: 除了数字 [^0-9]
            \s: 空格
            \S: 除了空格
            \b: 单词边界
            \B: 除了单词边界
        */

        reg = /\w/;
        console.log(reg.test("123"));

        reg = /W/;
        console.log(reg.test("!@(^$@"));

        reg = /\d/;
        console.log(reg.test("123"));

        reg = /\D/;
        console.log(reg.test("abc"));

        reg = /\s/;
        console.log(reg.test("abc "));

        reg = /\S/;
        console.log(reg.test("    "));

        //创建一个正则表达式检查一个字符串中是否含有单词child
        reg = /\bchild\b/;
        console.log(reg.test("hello children"));


        //接受用户输入
        //var str = prompt("请输入您的用户名: ")

        str = " hello     "

        //去除掉字符串开头的空格
        var result = str.replace(/^\s*/g, "");
        //去除掉字符串结尾的空格
        var result = str.replace(/\s*$/g, "");

        ///^\s*|\s*$/g 匹配开头和结尾的空格
        str = str.replace(/^\s+|\s+$/g,"");

        console.log(str);
----------------------------------------


试一试:
1.做一个邮箱的正则表达式
提示:   电子邮件
hello @ abc.com.cn   
任意字母数字下划线 . 任意字母数字下划线 @  任意字母数字 .任意字母(2-5位) .任意字母(2-5位)

游客,如果您要查看本帖隐藏内容请回复


写在最后: JS到这里的基本语法已经完全学完了,目前正在学DOM本人不是特别想更新DOM的学习笔记,不是因为懒而是因为麻烦,学过JS的朋友应该知道JS的DOM操作涉及到HTML标签,两句话总结就是 找对象 搞对象,发表帖子会非常麻烦并且很长,所以暂时可能不会更新了~ 下次更新可能会等到学习VUE框架或者Python Django框架啦~感谢大家的陪伴!加油鸭!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-2-19 15:04:29 | 显示全部楼层

回帖奖励 +10 鱼币

这么大方
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-2-19 17:52:43 | 显示全部楼层

回帖奖励 +10 鱼币

老板大气
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2021-2-20 00:03:14 | 显示全部楼层

嘿嘿毕竟VIP不怎么缺,给新来鱼C的小伙伴们发发福利拉~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2021-2-20 00:03:44 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-2-20 08:19:47 | 显示全部楼层

回帖奖励 +10 鱼币

学习
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-2-21 10:29:15 | 显示全部楼层

回帖奖励 +10 鱼币

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-2-21 17:17:25 From FishC Mobile | 显示全部楼层

回帖奖励 +10 鱼币

学习了,歇歇
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-2-21 17:33:39 | 显示全部楼层

回帖奖励 +10 鱼币


学习了,歇歇
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-2-22 09:06:57 | 显示全部楼层

回帖奖励 +10 鱼币

大大大佬
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-2-22 20:58:31 | 显示全部楼层

回帖奖励 +10 鱼币

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-2-23 18:52:53 | 显示全部楼层

回帖奖励 +10 鱼币

谢谢
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-2-24 17:25:19 | 显示全部楼层

回帖奖励 +10 鱼币

蟹蟹
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2021-2-25 03:26:52 | 显示全部楼层
经过深思熟虑后,还是打算继续更新,只不过后续的样式会不同,会发布一些自己学到的用JS制作一些小网页功能的小教程,可能在最近更新~主要是对于JS DOM的使用,希望大家多多支持鸭~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-9-28 09:59:56 | 显示全部楼层
来观摩了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-11-5 10:36:01 | 显示全部楼层
学习了

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-11-23 17:39

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表