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

匿名函数:

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

内置方法和对象:

自定义对象,类似于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());  //毫秒并不直接显示

小练习:

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 <){
dMinute="0"+dminute;
}

console.log(dYear+"-"+(dMonth+1)+"-"+dDate+" "+dHour+":"
    +dMinute+" "+dWeek);

}
getNow();

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

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

有需要补充的内容是:

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里面：
直接使用max\min
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