前端之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);
//

//自执行函数（比较常用
(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];
}

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秒

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

日期和时间的转换:

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

练习

将当前日期按“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()

//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);    //

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 次方.