zoukankan      html  css  js  c++  java
  • day 51 js-2 函数,对象,正则 (定时器示例)

     本文转载自cnblogs.liwenzhou-----哪吒博客

    先来一个定时器让我们看看函数的效果:

    <script src="/js/jquery-3.2.1.min.js"></script>
    <script>
        function qw(){
                $(".sp").each(function(){
                    $(this).text("");
    });
    }
    setTimeout("op()", 3000);
    </script>    
    
    
    {# 我们来解释一下上面的这段代码,我们的定时器需要有参数,#}
    {#它本身就是一个内置函数,我们的函数都需要参数,这里面需要有三个参数,#}
    {#但是有两个是必须要传入的参数code(代码),delay(时间),#}
    {#我们需要把执行的代码传入到定时器里面,然后设定的时间也要传入到里面去,#}
    {#那么我们就需要先写一个函数,上面的function qw就是我们定义的函数的名字,#}
    {#这个函数的函数体,就是逻辑代码,我们需要这个函数去找到我们所要绑定时间的那些标签,#}
    {#sp就是我们要找的那些标签,我们的标签是一些而不是一个,所以需要使用each内置函数,#}
    {#在each里面我们要调用一个匿名函数,来实现我们的功能,
    ------>找到需要定时的标签#}
    {#然后把它的值在设定好的时间一过就把它清空掉,就类似于我们的for循环把里面的每一个#}
    {#遍历出来,然后拿到每一个的text,就是我们的每一个标签里面的文本内容,#}
    {#我们给这些文本内容清空,那么就是直接给文本里面的原来的内容覆盖掉,#}
    {#用空字符串覆盖掉就可以得到清空的效果所以我们需要在text里面传值,#}
    {#传空字符串,这就是我们的函数所实现的功能,到此为止就可了.剩下的就是我们的定时器的时间了,#}
    {#我们把上面要求的code代码,就是我们的函数放进去,有一个条件是我们的代码必须是字符串,#}
    {#所以我们的函数需要放到字符串里面传入进去,然后就结束了定时器的功能#}

    函数*****(五颗星)

    基本上跟python是差不多的,就是个别的关键字不同

    函数的基本定义:

    关键字function 函数名(参数1,参数2){

    函数体,函数所封装的方法;

    return 返回值;

    }

    函数的调用:

    函数名(参数1,参数2)

    举例

    以下内容写入到js文件中,直接写入即可,然后再html文件中调用它
    
    
    // //简单的基础函数
    // function f1(){
    //     console.log("hello from other world");
    // }
    // f1();
    //
    // //带有参数的函数
    // function f2(book,author){
    //     console.log("书名:"+book,"作者:"+author);
    // }
    // f2("gone with the wind", " fred");
    //
    // //带有返回值的函数
    // function f3(arg1,arg2){
    //     return arg1+arg2;
    // }
    // var s=f3("freedom", "great");
    // console.log(s);
    //
    View Code

    匿名函数:

    python中是用的lambda ---->  lambda参数:返回值,

    js中举例:

    var sum=function f(arg1,arg2){

    return arg1+arg2;

    }

    ret=sum(1,2);

    console.log(ret);

    js中是自执行函数:

    (function(){})(arg);

    for example:

    (function (arg1,arg2){       //=========这里就是把函数名和参数直接用{}包裹起来了

    console.log("雨送黄昏花易落"+(arg1+arg2));    //============这里是函数体,里面执行的是字符拼接

    })(23,12);   //=======直接传参,不用调用函数,这就达到了自执行的效果,省去了调用的过程

    闭包

    基本上跟python一致,内部函数可以访问外部函数的变量

    举例:

    // var city="beijing";
    // function f(){
    //     var city="shanghai";
    //     function inner(){
    //         var city="lasa";
    //         console.log(city);
    //     }
    //     inner();
    // }
    // f();
    执行结果是lasa
    
    
    // var city="daocheng";
    // function bar(){
    //     console.log(city);
    // }
    // function f(){
    //     var city="fenghuang";
    //     return bar;
    // }
    // var ret=f();
    // ret();
    执行结果是daocheng
    
    
    // var city="lijiang";
    //     function f(){
    //     var city="sichuan";
    //     function inner(){
    //         console.log(city);
    //     }
    //     return inner;
    //     }
    // var ret=f();
    // ret();
    执行结果是sichuan
    View Code

    内置方法和对象:

    自定义对象,类似于python中的字典:

    var a = {"name": "Alex", "age": 18};
    console.log(a.name);
    console.log(a["age"]);

    遍历对象中的元素:
    var a = {"name": "Alex", "age": 18};
    for (var i in a){
      console.log(i, a[i]);
    }

    data对象(类似我们学的python里面的time模块):

    常用方法:

    //方法1:不指定参数
    var d1 = new Date();
    console.log(d1.toLocaleString());
    //方法2:参数为日期字符串
    var d2 = new Date("2004/3/20 11:12");
    console.log(d2.toLocaleString());
    var d3 = new Date("04/03/20 11:12");
    console.log(d3.toLocaleString());
    //方法3:参数为毫秒数
    var d3 = new Date(5000);
    console.log(d3.toLocaleString());
    console.log(d3.toUTCString());
    
    //方法4:参数为年月日小时分钟秒毫秒
    var d4 = new Date(2004,2,20,11,12,0,300);
    console.log(d4.toLocaleString());  //毫秒并不直接显示
    View Code

    小练习:

    function getNow(){
        var d4=new Date();
        var dYear=d4.getFullYear();
        var dMonth=d4.getMonth();
        var dDate=d4.getDate();
        var dHour=d4.getHours();
        var dMinute=d4.getMinutes();
        var dWeek=d4.getDay();
    
        switch(dWeek){
        case 1:dWeek="星期一";break;
        case 2:dWeek="星期二";break;
        case 3:dWeek="星期三";break;
        case 4:dWeek="星期四";break;
        case 5:dWeek="星期五";break;
        case 6:dWeek="星期六";break;
        case 0:dWeek="星期日";break;
        default:
            console.log("piss off");
    };
    
    if (dMinute <10){
    dMinute="0"+dminute;
    }
    
    console.log(dYear+"-"+(dMonth+1)+"-"+dDate+" "+dHour+":"
        +dMinute+" "+dWeek);
    
    }
    getNow();
    View Code
    var d = new Date(); 
    //getDate()                 获取日
    //getDay ()                 获取星期
    //getMonth ()               获取月(0-11)
    //getFullYear ()            获取完整年份
    //getYear ()                获取年
    //getHours ()               获取小时
    //getMinutes ()             获取分钟
    //getSeconds ()             获取秒
    //getMilliseconds ()        获取毫秒
    //getTime ()                返回累计毫秒数(从1970/1/1午夜)
    View Code

    month月份是从0开始到11结束,而不是我们通常认为的1-12月

    day是星期,而日期是date,且星期是从0-6,而不是从1~7

    getfullyear是年份,而不是year,这几点区别要注意

    json序列化*****五星知识点

    跟python中类似,有序列化就会有反序列化.

    python中是先import json,然后

    json.dumps(obj)

    json.loads(obj)

    --------------------------------------------------------

    var str1 = '{"name": "Alex", "age": 18}';
    var obj1 = {"name": "Alex", "age": 18};
    // JSON字符串转换成对象
    var obj = JSON.parse(str1);     //关键字是parse,
    // 对象转换成JSON字符串
    var str = JSON.stringify(obj1);    //关键字是stringify,

    正则表达式

    python里面是import re

    2. p1 = re.compile("^[a-zA-Z][a-zA-Z0-9_]{5,11}$")  //解释一下,以1个字母(大小写)开头,然后以5个或者11个数字,字母(大小写),下划线,结尾.
    3. p1.match()
    4. p1.search()
    5. p1.findall()

    匹配模式:

    忽略大小写,  re.l

    贪婪模式

    js   ------两种方式:

    1,RegExp对象方式

    1,var p=new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$","g")

    2,p.test(str)

    2,简写方式

    /正则表达式/匹配模式

    //RegExp对象

    RegExp 对象

    RegExp 对象表示正则表达式,它是对字符串执行模式匹配的强大工具。

    var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$", "g");    ===这里的pattern就是正则表达式,不是字符串,参数就被省略掉了

    在使用RegExp创建对象的时候我们写作以上的方法,在括号里面写两个值,第一个值是pattern,第二个值是attributes,

     参数 pattern 是一个字符串,指定了正则表达式的模式或其他正则表达式

    参数 attributes 是一个可选的字符串,包含属性 "g"(全局匹配)、"i" (区分大小写的匹配)和 "m"(多行匹配)。

    如果 pattern 是正则表达式,而不是字符串,则必须省略该参数。

    //创建正则对象方式1
    // 参数1 正则表达式
    // 参数2 验证模式:g(global)和i(忽略大小写)

    // 用户名只能是英文字母、数字和_,并且首字母必须是英文字母。长度最短不能少于6位 最长不能超过12位。

    // 创建RegExp对象方式
    var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$", "g");

    // 匹配响应的字符串
    var s1 = "bc123";

    //RegExp对象的test方法,测试一个字符串是否符合对应的正则规则,返回值是true或false。
    reg1.test(s1); // true

    // 创建方式2
    // /填写正则表达式/匹配模式
    var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g;

    reg2.test(s1); // true

    // String对象与正则结合的4个方法
    var s2 = "hello world";

    s2.match(/o/g); // ["o", "o"] 查找字符串中 符合正则 的内容//类似于python正则中的findall方法,把所有的结果找到然后返回
    s2.search(/h/g); // 0 查找字符串中符合正则表达式的内容位置,只要找到一个符合要求的就立即返回不继续找后面的内容
    s2.split(/o/g); // ["hell", " w", "rld"] 按照正则表达式对字符串进行切割
    s2.replace(/o/g, "s"); // "hells wsrld" 对字符串按照正则进行替换

    // 关于匹配模式:g和i的简单示例
    var s1 = "name:Alex age:18";

    s1.replace(/a/, "哈哈哈"); // "n哈哈哈me:Alex age:18"
    s1.replace(/a/g, "哈哈哈"); // "n哈哈哈me:Alex 哈哈哈ge:18" 全局匹配
    s1.replace(/a/gi, "哈哈哈"); // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18" 不区分大小写

    gi  ==========不区分大小写

    var s="NAME :Alex Age12"
    undefined
    s.replace(/a/gi,"12popop12");
    "N12popop12ME :12popop12lex 12popop12ge12"

    var s1="name:alex age 12"
    undefined

    s1.replace(/a/g,"晓风干");
    "n晓风干me:晓风干lex 晓风干ge 12"

    s1.replace(/a/,"晓风干");
    "n晓风干me:alex age 12"

    我们在以上例子中可以得到结论,如果不加上g这个全局变量的话,那么匹配第一个符合条件的元素后就不会继续匹配下去了,加上了这个g全局变量之后就会把所有的元素都匹配完才罢休,这里就类似于我们的python正则匹配中的贪婪匹配的概念,

    RegExp对象

     举例:

    //json 序列化和反序列化
    /*
    var w={
        "name":"egon",
        "age":39
    };  //这里是声明一个对象
    var s=JSON.stringify(w);  //把声明的对象序列化成一个字符串string是字符串的意思,
    console.log(w, typeof w); //查看这个对象,以及对象的类型
    console.log(s, typeof s); //查看这个被转化过之后的数组,以及数组的类型
    var obj=JSON.parse(s);  //把序列化的对象反序列化成为字符串
    console.log(obj, typeof obj);//查看反序列化之后的结果以及类型
    */
    
    
    
    var w="alex  894";
    ret=w.search('l');
    ret1=w.search(/[0-9]{4}/g);  //这里是找数字,含有0-9的数字的范围,然后要有4位数,
    // 中括号里面是数字的取值范围,然后后面的大括号里是取多少位数
    console.log(ret);
    console.log(ret1);  //这里是跟我们在python里面一样的,search找不到就会返回结果-1
    View Code

     有需要补充的内容是:

    var a=/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g
    undefined
    a.test("qwe123");
    true    //我们第一次匹配完之后得到的结果是符合逻辑的没有问题的

    a.lastIndex
    6     //但是我们成功匹配完之后我们的最后的索引值会发生改变,此时的索引值就是上次成功匹配的最后的索引值5作为结束,新一轮匹配在5的基础上开始匹配,那么就轮到了6,

    a.test("qwe123");   //所以我们的索引值这里是从6开始匹配的,得到的结果当然就是false,
    false    //得到了false的结果之后我们的最后索引值就会重新归位到0作为起点

    a.lastIndex
    0   //这里就是又变成了0

    a.test(123)   //如果没有成功匹配的话,我们的索引值是不会改变的,
    false
    a.lastIndex    //因为匹配不成功,所以最后的索引值归位为0
    0

    ======================================================================

    js语言本身的bug:

    /undefined/.test()
    true
    /undefined/.test(undefined)
    true
    /undefined/.test("undefined")
    true
    /^undefined$/.test("undefined")
    true
    /^undefined$/.test(undefined)
    true
    /^undefined$/.test()
    true

    它自己本身就会把字符串进行转换之后再匹配,太随便了.........

    Math对象
    Python里面:
    直接使用maxmin
    JS里面:
    通过Math对象来做数学相关操作的
    Math.min()
    Math.max()
    Math.floor()
    ...

     数学方面的常用方法:

    abs(x)      返回数的绝对值。
    exp(x)      返回 e 的指数。
    floor(x)    对数进行下舍入。
    log(x)      返回数的自然对数(底为e)。
    max(x,y)    返回 x 和 y 中的最高值。
    min(x,y)    返回 x 和 y 中的最低值。
    pow(x,y)    返回 x 的 y 次幂。
    random()    返回 0 ~ 1 之间的随机数。
    round(x)    把数四舍五入为最接近的整数。
    sin(x)      返回数的正弦。
    sqrt(x)     返回数的平方根。
    tan(x)      返回角的正切。
    
    Math

    举例:

    Math.abs(-4)
    4
    Math.exp(3)
    20.085536923187668
    Math.floor(3.099887)
    3

    Math.log(4)
    1.3862943611198906
    Math.max(34,-987)
    34

    Math.min(34,56)
    34
    Math.pow(2,3)
    8
    Math.random()
    0.30240178195156453

  • 相关阅读:
    Web前端 --- jQuery
    关于前端 jQuery 面试的知识点
    面试官:讲讲mysql表设计要注意啥
    Python中的单例模式的几种实现方式的及优化
    HTTP协议【详解】——经典面试题
    Web前端 --- BOM和DOM
    基于css文件编写一个简单的html前端页面
    Web前端 --- JavaScript
    Linux 命令(一) find&grep文件查找命令
    线程池
  • 原文地址:https://www.cnblogs.com/2012-dream/p/8126948.html
Copyright © 2011-2022 走看看