前端之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]; }
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();
三、序列化和反序列化（重要）
基础
// 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); // 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 次方.
