博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端之JavaScript 02
阅读量:6720 次
发布时间:2019-06-25

本文共 9841 字,大约阅读时间需要 32 分钟。

一、函数

// 最基础的函数定义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 函数名 (参数){

函数体; 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);    //设置年1997x.setMonth(7);        //设置月7x.setDate(1);        //设置日1x.setHours(5);        //设置小时5x.setMinutes(12);    //设置分钟12x.setSeconds(54);    //设置秒54x.setMilliseconds(230);        //设置毫秒230document.write(x.toLocaleString( )+"
");//返回1997年8月1日5点12分54秒x.setTime(870409430000); //设置累计毫秒数document.write(x.toLocaleString( )+"
");//返回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);    // 0s4 = 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:18s2 = s1.replace(/a/g,"哈哈哈");console.log(s2);//  n哈哈哈me:lishi  哈哈哈ge:18s3 = 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 次方.

 

转载于:https://www.cnblogs.com/jassin-du/p/8120561.html

你可能感兴趣的文章
天启android5.1系统无法在非1650批次号的rk3288w芯片上启动
查看>>
C#.net书籍列表
查看>>
将IRepository接口进行抽象,使它成为数据基类的一个对象,这样每个子类都可以有自己的最基础的CURD了...
查看>>
IIS7.5 错误代码0x8007007e HTTP 错误 500.19 - Internal Server Error
查看>>
数论17——反演定理(二项式反演)
查看>>
第十八章 用于大型程序的工具
查看>>
ASP.NET 2.0学习笔记之Object Tag Syntax
查看>>
Redis 配置文件
查看>>
Jmeter Smock Test规范设计
查看>>
MurmurHash算法:高运算性能,低碰撞率的hash算法
查看>>
Download error: unknown url type: https
查看>>
vagrant虚拟机共享目录在windows宿主下的禁忌
查看>>
数据表操作类
查看>>
[v9] 列表页 调用 正文内容 或 自定义 字段(moreinfo的调用方法)
查看>>
php截取指定字符串之间的字符串的类
查看>>
C# 根据Excel模版导出文件
查看>>
Oracle与DB2的区别
查看>>
bzoj 2500 幸福的道路 树上直径+set
查看>>
新iPad未到 老iPad价格反弹
查看>>
[转载] 建党伟业
查看>>