• 前端之JavaScript 02


    一、函数

    // 最基础的函数定义
    function f1() {
        console.log('hello world!');
    }
    f1();
    //  hello world!
    
    
    
    // 带参数的函数
    function f2(name,age) {
        console.log("姓名 : " + name + "  年龄:" + age);
    }
    f2("jassin",18);
    //  姓名 : jassin  年龄:18
    
    
    
    
    // 带返回值的函数
    function f3(arg1,arg2) {
        return arg1 + arg2;
    }
    
    
    
    var s = f3("jassin", "dulala");
    console.log(s);
    //  jassindulala
    
    
    
    // 匿名函数
    var sum = function(arg1,arg2){
        return arg1 + arg2;
    };
    ret = sum(1,2);
    console.log(ret);
    // 3
    
    
    //自执行函数(比较常用
    (function (arg1,arg2) {
        console.log("自执行函数" + (arg1 +arg2));
    })(10,20);
    // 自执行函数30

    函数的定义

    function 函数名 (参数){
<br>    函数体;
        return 返回值;
    }

    功能说明:

    可以使用变量、常量或表达式作为函数调用的参数
    函数由关键字function定义
    函数名的定义规则与标识符一致,大小写是敏感的
    返回值必须使用return
    Function 类可以表示开发者定义的任何函数。

    用 Function 类直接创建函数的语法如下:

    var 函数名 = new Function("参数1","参数n","function_body");

    虽然由于字符串的关系,第二种形式写起来有些困难,但有助于理解函数只不过是一种引用类型,它们的行为与用 Function 类明确创建的函数行为是相同的。

    函数的全局变量和局部变量

    局部变量:

    在JavaScript函数内部声明的变量(使用var)是局部变量,所以只能在函数内部访问它(该变量的作用域使是函数内部)。只要函数运行完毕,本地变量就会被删除。

    全局变量:

    在函数外声明的变量是全局变量,网页上所有脚本和函数都能访问它。

    变量生存周期:

    JavaScript变量的生命期从它们被声明的时间开始。

    局部变量会在函数运行以后被删除

    全局变量会在页面关闭后删

    // 1、
    //  不推荐使用
    (function (arg1,arg2) {
        n = 100;  // 相当于定义了一个全局变量
        var m = 100;
        console.log(" i can forget to you " + (arg1 + arg2));
    })(10,20);
    
    // 2、可以使用
    var n;  // 提前声明要使用的全局变量
    
    (function (arg1,arg2) {
        n = 100;
        var m = 100;
        console.log(" i can forget to you " + (arg1 + arg2));
    })("can","  youcan");

    作用域

    首先在函数内部查找变量,找不到则到外层函数查找

    执行函数一定要去找函数定义的位置

    例子:

    //   执行函数一定要去找函数定义的位置
    // 自己用找自己
    var city = "beijing";
    function f() {
        var city = "shanghai";
        function inner() {
            var city = "shenzhen";
            console.log(city);
        }
        inner();
    }
    f();
    sehnzhen
    
    //  自己没有找上一级
    var city = "beijing";
    function bar() {
        console.log(city);
    }
    function f() {
        var city = "shanghai";
        return bar;
    }
    var ret = f();
    ret();
     beijing

    闭包

    // 闭包
    // 内部函数可以访问外部函数
    var city = "beijing";
    function f() {
        var city = "shanghai"
        function inner() {
            console.log(city);
        }
        return inner;
    }
    var ret = f();
    ret();
    
    // shanghai

    二、Date对象

    1、创建Date对象

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

     Date对象的方法—获取日期和时间(更多

    获取日期和时间
    getDate()                 获取日
    getDay ()                 获取星期
    getMonth ()               获取月(0-11)
    getFullYear ()            获取完整年份
    getYear ()                获取年
    getHours ()               获取小时
    getMinutes ()             获取分钟
    getSeconds ()             获取秒
    getMilliseconds ()        获取毫秒
    getTime ()                返回累计毫秒数(从1970/1/1午夜)

    例子:

    function getCurrentDate(){
            //1. 创建Date对象
            var date = new Date(); //没有填入任何参数那么就是当前时间
            //2. 获得当前年份
            var year = date.getFullYear();
            //3. 获得当前月份 js中月份是从0到11.
            var month = date.getMonth()+1;
            //4. 获得当前日
            var day = date.getDate();
            //5. 获得当前小时
            var hour = date.getHours();
            //6. 获得当前分钟
            var min = date.getMinutes();
            //7. 获得当前秒
            var sec = date.getSeconds();
            //8. 获得当前星期
            var week = date.getDay(); //没有getWeek
            // 2014年06月18日 15:40:30 星期三
            return year+"年"+changeNum(month)+"月"+day+"日 "+hour+":"+min+":"+sec+" "+parseWeek(week);
        }
    
    alert(getCurrentDate());
    
    //解决 自动补齐成两位数字的方法
        function changeNum(num){
        if(num < 10){
            return "0"+num;
        }else{
            return num;
        }
    
    }
    //将数字 0~6 转换成 星期日到星期六
        function parseWeek(week){
        var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
        //             0      1      2      3 .............
        return arr[week];
    }
    View Code

    Date对象的方法—设置日期和时间

    //设置日期和时间
    //setDate(day_of_month)       设置日
    //setMonth (month)                 设置月
    //setFullYear (year)               设置年
    //setHours (hour)         设置小时
    //setMinutes (minute)     设置分钟
    //setSeconds (second)     设置秒
    //setMillliseconds (ms)       设置毫秒(0-999)
    //setTime (allms)     设置累计毫秒(从1970/1/1午夜)
        
    var x=new Date();
    x.setFullYear (1997);    //设置年1997
    x.setMonth(7);        //设置月7
    x.setDate(1);        //设置日1
    x.setHours(5);        //设置小时5
    x.setMinutes(12);    //设置分钟12
    x.setSeconds(54);    //设置秒54
    x.setMilliseconds(230);        //设置毫秒230
    document.write(x.toLocaleString( )+"<br>");
    //返回1997年8月1日5点12分54秒
    
    x.setTime(870409430000); //设置累计毫秒数
    document.write(x.toLocaleString( )+"<br>");
    //返回1997年8月1日12点23分50秒
    View Code

    Date对象的方法—日期和时间的转换

    日期和时间的转换:
    
    getTimezoneOffset():8个时区×15度×4分/度=480;
    返回本地时间与GMT的时间差,以分钟为单位
    toUTCString()
    返回国际标准时间字符串
    toLocalString()
    返回本地格式时间字符串
    Date.parse(x)
    返回累计毫秒数(从1970/1/1午夜到本地时间)
    Date.UTC(x)
    返回累计毫秒数(从1970/1/1午夜到国际时间)
    View Code

    练习

    将当前日期按“2017-12-27 11:11 星期三”格式输出。

    // 2017-12-27 11:11 星期三
    function d() {
        // 创建Date 对象
        var date = new Date();
    
        // 获取当前年份
        var year = date.getFullYear();
    
        // 获取当前月份
        var month = date.getMonth()+1;
    
        // 获取日
        var day = date.getDate();
    
        // 获取小时
        var hour = date.getHours();
    
        // 获取分钟
        var minute = date.getMinutes();
    
        // 获取星期
        var week = date.getDay();
    
        var weekStr = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
    
        if (month < 10){
            month = "0" + month;
        }
    
        console.log(year+"-"+month+"-"+day+" "+hour+":"+minute+" "+weekStr[week])
    }
    d();
    answer

    三、序列化和反序列化(重要)

    基础

    // JSON对象有两个方法: JSON.parse()和JSON.stringify()方法,
    // 前者是将一个字符串解析为JSON对象,后者是将一个JSON对象转换为一个字符串。
    
    var o= {
        "name":"jassin","age":18
    };
    // 序列化
    var s = JSON.stringify(o);
    console.log(o,typeof o);  // Object "object"
    console.log(s, typeof s);  // {"name":"jassin","age":18} string
    
    
    // 反序列化
    var obj =JSON.parse(s);
    console.log(obj, typeof obj); // {name: "jassin", age: 18} "object"
    
    
    
    
    
    //在使用JSON.stringify()时,
    // 如果对象中的值是function或是undefined,则在序列化为字符串时会会忽略掉这个键值对。如:
    var person = {
        "name":"jassin",
        "age" : 18,
        "brother":undefined,
        "say": function () {
            alert("hello")
        }
    };
    console.log(JSON.stringify(person));
    
    //  {"name":"jassin","age":18}
    // JSON.stringify()方法除要序列化的JavaScript 对象外,还可以接收另外两个参数,
    这两个参数用于指定以不同的方式序列化JavaScript 对象。第一个参数是个过滤器,可以是一个数组,
    也可以是一个函数;第二个参数是一个选项,表示是否在JSON 字符串中保留缩进。单独或组合使用这两个参数,
    可以更全面深入地控制JSON 的序列化。
    
    //  1、如果过滤器参数是数组,那么JSON.stringify()的结果中将只包含数组中列出的属性。如下:
    var person = {
        "name":"lishi",
        "age":21,
        "brother":[
            {"name":"lili","age":18},{"name":"yan","age":22}
        ],
        "sex" :"女",
        "birthday": new Date(1996,12,20)
    };
    var personStr = JSON.stringify(person,["name","brother","sex"]);
    console.log(personStr);
    
    
    // {"name":"lishi","brother":[{"name":"lili"},{"name":"yan"}],"sex":"女"}
    
    // 2、如果第二个参数是函数,行为会稍有不同。传入的函数接收两个参数,属性(键)名和属性值。
    // 根据属性(键)名可以知道应该如何处理要序列化的对象中的属性。属性名只能是字符串,
    // 而在值并非键值对儿结构的值时,键名可以是空字符串。为了改变序列化对象的结果,
    // 函数返回的值就是相应键的值。不过要注意,如果函数返回了undefined,那么相应的属性会被忽略。
    // 如下:
    
    var person = {
        "name": "莉莉",
        "age":21,
        "sister":["妹妹","我也不知道"]
    }
    
    var personStr = JSON.stringify(person,function (key,value) {
        switch (key){
            case "sister":
                return value.join(",");
            case "age":
                return value + 1;
            default:
                return value;
        }
    });
    console.log(personStr);
    
    //  {"name":"莉莉","age":22,"sister":"妹妹,我也不知道"}
    
    
    
    // 3、JSON.stringify()方法的第三个参数用于控制结果中的缩进和空白符。
    // 如果这个参数是一个数值,那它表示的是每个级别缩进的空格数。最大缩进空格数为10,
    // 所有大于10 的值都会自动转换为10。如果缩进参数是一个字符串而非数值,
    // 则这个字符串将在JSON 字符串中被用作缩进字符(不再使用空格)。
    // 缩进字符串最长不能超过10 个字符长。如果字符串长度超过了10 个,结果中将只出现前10 个字符。如
    // :
    var person = {
        "name" : "lili",
        "age" : 20,
        "sister" : ["哆啦A梦","皮卡丘"]
    };
    // var personStr = JSON.stringify(person,null,4);
    // console.log(personStr);
    // {
    //     "name": "lili",
    //     "age": 20,
    //     "sister": [
    //         "哆啦A梦",
    //         "皮卡丘"
    //     ]
    // }
    
    var personStr = JSON.stringify(person,null,"***");
    console.log(personStr);
    // {
    // ***"name": "lili",
    // ***"age": 20,
    // ***"sister": [
    // ******"哆啦A梦",
    // ******"皮卡丘"
    // ***]
    // }
    探索

    四、RegExp对象(正则)

                    1. Python里面:
                        1. import re
                        2. p1 = re.compile("^[a-zA-Z][a-zA-Z0-9_]{5,11}$")
                        3. p1.match()
                        4. p1.search()
                        5. p1.findall()
    View Code
    //RegExp对象
    
    //创建正则对象方式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
    
    
    //方式一
    var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$", "g");
    var s1 = "ba1223";
    var s2 = "123alex";
    console.log(reg1.test(s1));
    console.log(reg1.test(s2));
    
    // true
    // false
    
    // 简写模式
    var r2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g;
    console.log(r2.test(s1));
    console.log(r2.test(s2));
    
    
    // String对象与正则结合的4个方法
    var s2 = "hello world";
    
    s1 = s2.match(/o/g);
    console.log(s1);    //  ["o", "o"]
    
    s3 = s2.search(/h/g);
    console.log(s3);    // 0
    
    s4 = s2.split(/o/g);
    console.log(s4);    // ["hell", " w", "rld"]
    
    s5 = s2.replace(/o/g,"s");
    console.log(s5);    // hells wsrld
    
    
    // 关于匹配模式:g和i的简单示例
    var s1 = "name:lishi  age:18";
    s1 = s1.replace(/a/,"哈哈哈");
    console.log(s1);
    // n哈哈哈me:lishi  age:18
    
    s2 = s1.replace(/a/g,"哈哈哈");
    console.log(s2);
    //  n哈哈哈me:lishi  哈哈哈ge:18
    
    s3 = s1.replace(/a/gi,"哈哈哈");
    console.log(s3);
    //  n哈哈哈me:lishi  哈哈哈ge:18

     

    五、Math对象

    //该对象中的属性方法 和数学有关.
       
    
    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)    返回角的正切。
    
    //方法练习:
            //alert(Math.random()); // 获得随机数 0~1 不包括1.
            //alert(Math.round(1.5)); // 四舍五入
            //练习:获取1-100的随机整数,包括1和100
                 //var num=Math.random();
                 //num=num*10;
                 //num=Math.round(num);
                 //alert(num)
            //============max  min=========================
            /* alert(Math.max(1,2));// 2
            alert(Math.min(1,2));// 1 */
            //-------------pow--------------------------------
            alert(Math.pow(2,4));// pow 计算参数1 的参数2 次方.
  • 相关阅读:
    Java基础50道经典练习题(33)——杨辉三角
    Java基础50道经典练习题(32)——左移右移
    团队第二阶段冲刺04
    团队第二阶段冲刺03
    团队第二阶段冲刺02
    团队第二阶段冲刺01
    团队意见汇总
    各组意见汇总
    团队第一阶段冲刺07
    绩效评估01
  • 原文地址:https://www.cnblogs.com/jassin-du/p/8120561.html
Copyright © 2020-2023  润新知