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 <10){ 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
