前言:此Javascri基础学习笔记是需要有其他语言的基础(C/C++/Java等),与其他语言重复或类似的部分不在此学习笔记中。且仅为基础学习。
六.函数基础
<!-- 函数基础 --> <!-- 用户登录 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> function checklogin(username,password) { if(username==="admin"&&password==="123"){ return true; } else{ return false; } } console.log(checklogin("123","admin")); </script> </body> </html>
七.对象
<!-- 对象 --> <!-- 对象的分类 自定义对象:封装 内置对象:(例如Date,获取当前时间) 宿主对象(document) 第三方库的对象(JQuery Vue) --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> var cat={ name:"TOM", age:3, sayName:function(){ console.log("I am "+this.name) } } console.log(cat.name); console.log(cat["age"]); cat.name="邦邦" cat.sayName(); </script> </body> </html>
八.数组
<!-- 数组 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> var list1=[1,2,3,4,5]; //可以存放不同类型数据 var list2= new Array("a","b","c"); var list3=["java","c","c++"]; var list4=[1,3,6,5,2,7,9]; // var length=list1.length; // console.log(length); // for in遍历(i为索引) for(var i in list1){ console.log(list1[i]); } // for of遍历(i为值) for(var j of list2){ console.log(j); } //map方法循环 list3.map(function(value,index){ console.log(value); }); //push方法 ,增加元素到数组中 list1.push(6); console.log(list1); //sort方法 排序 list4.sort(); console.log(list4); //filter方法 过滤 var newList=list1.filter(function(item){ if(item>=3) return item; }) console.log(newList); //join方法 连接数组成为字符串 var str=list2.join(""); console.log(str); //String的split方法 字符串分为数组 var str1="2022-2-12"; var list5=str1.split("-"); console.log(list5); // 结合数组与对象 var list6=[ {name:"张三",age=1} {name:"李四",age=2} {name="王五",age=3} ] // 获取数据:list[0].name </script> </body> </html>
九.内置对象
<!-- 内置对象,使用现成的功能 Math部分--> <!-- Array 数组 Math 数学 Date 日期 RegExp 正则表达式 --> <!-- Math.floor: 向下取整 Math.random():0-1随机数 Math.abs():绝对值 Math.sqrt():开方 Math.pow(2,4):乘方 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> var number1=3.14; var ret1 =Math.floor(number1); var ret2 =Math.pow(2,4); //2的4次方 var number2=Math.floor(Math.random()*10+1); //0-10的随机数 console.log(number2); var list=["Java","C","C++","Php","Javascript"]; var index=Math.floor(Math.random()*list.length); console.log(list[index]); </script> </body> </html>
<!-- 内置对象 Date部分 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // var d=new Date(); // var year =d.getFullYear(); // var month=d.getMonth(); //0-11月 // var date=d.getDate(); // var day=d.getDay(); //获取星期 // var hours=d.getHours(); // var minutes=d.getMinutes(); // var seconds=d.getSeconds(); var ret =d.getTime(); //时间戳格林威治时间起至现在的总毫秒数 console.log(ret); // 计时器方法setinterval setInterval(function(){ var d=new Date(); var hours=d.getHours(); var minutes=d.getMinutes(); var seconds=d.getSeconds(); console.log(hours+":"+minutes+":"+seconds); },1000) </script> </body> </html>
十.正则表达式
<!-- 正则表达式用来匹配字符串 --> <!-- 通过正则表达式,实现字符串的截取或按规则替换和验证字符串内容--> <!-- 1.验证邮箱格式 2.字符串"2020-01-01",将数字部分截取出来 3."123a456b789c",去掉字符串中的所有字母(replace("a","1"))--> <!-- 正则表达式的语法 ^:开头 $:结尾 []:范围 {}:位数 ():分组 +:匹配1位或多位,同{1,} ?:0位或1位,同{0,1} .:匹配所有 \:转义 \d:数字 同[0-9] \w:数字,字母,下划线 \s:空格或换行 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> var reg1=new RegExp("123");//创建正则表达式 var reg=/123/ var str1="123"; var result1 =reg1.test(str1); //返回值为布尔 console.log(result1); //中括号表示范围 一位小写字母 var reg2 =/^[a-z]$/; //规定固定的格式 var str2="a"; var result2=reg2.exec(str2); //返回值为匹配的内容/null console.log(result2); var reg3=/^[0-9]{11}$/; //{11}为位数 var str3="18888888888"; var result3=reg3.test(str3); console.log(result3); var reg4=/^[a-z0-9]+$/; //字母数字 var str4="en8535"; var result4=reg4.test(str4); console.log(result4); var reg5=/^\w$/; //相当于/^[a-z0-9A-Z_]$/ 字母数字大小写下划线 var reg6=/^.+$/; //一位或多位 匹配所有 var reg7=/^1\+$/ //+表示普通加号,非表示一位或多位 </script> </body> </html>