一、JavaScript对象
JavaScript对象:字符串对象 、数组对象 、日期对象 、 Math
BOM对象:browser object model浏览器模型对象
window对象:定时器
DOM对象:文档对象模型
1、String字符串对象
关键字:
new关键字,用于创建实例对象
string属性:length:计算字符串的长度
string方法:
toLowerCase:字符串的字符全部转为小写。
toupperCase:字符串的字符全部转为大写
trim:去除两边的空格
charAt:根据索引查找字符
indexOf:根据字符查找索引
lastindexOf:从右到左根据字符查找索引
match:返回匹配字符串的数组,如果没有匹配就会返回null
search:返回字符串的首字母位置索引
substr:截断,找到开始截断的位置,然后在定义截取长度
substring:阶段,找打开始阶段的位置,在截取到结束截断的位置,骨头不顾尾
slice:切片,加上两个值,开始位置和结束位置,骨头不顾尾
replace:替换
split:分割,分割成一个数组类型
concat:字符串的拼接。
字符串对象的创建
字符串创建(两种方式)
① 变量 = “字符串”
② 字串对象名称 = new String (字符串)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var a=new String(‘HEllo ‘); console.log(a.length); console.log(a.toLowerCase()); console.log(a.toUpperCase()); console.log(a.trim()); console.log(a.charAt(3)); console.log(a.indexOf("l")); console.log(a.lastIndexOf("l")); console.log(a.match(‘lo‘)); console.log(a.search(‘l‘)); console.log(a.substr(1,3)); console.log(a.substring(1,3)); console.log(a.slice(1,4)); console.log(a.replace(‘l‘,‘q‘)); console.log(a.split(‘l‘)); console.log(a.concat(‘word‘)) </script> </body> </html>
字符串对象的属性和函数
//属性 x.length ----获取字符串的长度 //函数 x.toLowerCase() ----转为小写 x.toUpperCase() ----转为大写 x.trim() ----去除字符串两边空格 ----字符串查询方法 x.charAt(index) ----str1.charAt(index);----获取指定位置字符,其中index为要获取的字符索引 x.indexOf(findstr,index)----查询字符串位置 x.lastIndexOf(findstr) x.match(regexp) ----match返回匹配字符串的数组,如果没有匹配则返回null x.search(regexp) ----search返回匹配字符串的首字符位置索引 示例: var str1="welcome to the world of JS!"; var str2=str1.match("world"); var str3=str1.search("world"); alert(str2[0]); // 结果为"world" alert(str3); // 结果为15 ----子字符串处理方法 x.substr(start, length) ----start表示开始位置,length表示截取长度 x.substring(start, end) ----end是结束位置 x.slice(start, end) ----切片操作字符串 示例: var str1="abcdefgh"; var str2=str1.slice(2,4); var str3=str1.slice(4); var str4=str1.slice(2,-1); var str5=str1.slice(-3,-1); alert(str2); //结果为"cd" alert(str3); //结果为"efgh" alert(str4); //结果为"cdefg" alert(str5); //结果为"fg" x.replace(findstr,tostr) ---- 字符串替换 x.split(); ----分割字符串 var str1="一,二,三,四,五,六,日"; var strArray=str1.split(","); alert(strArray[1]);//结果为"二" x.concat(addstr) ---- 拼接字符串
2、Array数组对象
关键字:
join:链接,将列表中的字符拼接成一个字符串
concat:一个列表添加多个元素
toString:元类,将其他所有的类型都可以转换成字符串类型
reverse和sort:数组排序,reverse反转数组;sort:按照第一个字符的ascii进行比较,如果一样,在比较下一个。
数组切片:slice,根据索引进行切片
删除和添加子数组:splice,根据指定的数组进行删除和添加。deleteCount删除整组元素的个数。value:表示在删除位置插入的数组元素,value可以省略。
push和pop:push,压栈,向数组的最后一个位置追加一个元素,pop,弹栈,删除数组最后的一个元素,他们属于先进后出的操作。
shift和unshift:shift删除一个元素,从第一个位置删除;unshift添加元素,从第一个位置开始添加。如果同时添加多个元素,会从后面的开始添加。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var arr=[‘hello‘,‘word‘,‘egon‘]; console.log(arr.join(‘ ‘)); console.log(arr.concat([‘alex‘,‘yuanhao‘])); console.log(arr.toString()); console.log(arr.reverse()); console.log(arr.sort()); console.log(arr.slice(0,2)); console.log(arr.splice(1,1,‘alex‘,‘egon‘)); console.log(arr.push(‘wupeiqi‘)); console.log(arr.pop()); console.log(arr.shift()); console.log(arr.unshift(‘alex‘,‘wupeiqi‘)); </script> </body> </html>
创建数组的三种方式:
//创建方式1: var arrname = [元素0,元素1,….]; // var arr=[1,2,3]; //创建方式2: var arrname = new Array(元素0,元素1,….); // var test=new Array(100,"a",true); //创建方式3: var arrname = new Array(长度); // 初始化数组对象: var cnweek=new Array(7); cnweek[0]="星期日"; cnweek[1]="星期一"; ... cnweek[6]="星期六";
创建二维数组:
var cnweek=new Array(7); for (var i=0;i<=6;i++){ cnweek[i]=new Array(2); } cnweek[0][0]="星期日"; cnweek[0][1]="Sunday"; cnweek[1][0]="星期一"; cnweek[1][1]="Monday"; ... cnweek[6][0]="星期六"; cnweek[6][1]="Saturday";
二维数组
数组对象的属性和方法
join方法
x.join(bystr) ----将数组元素拼接成字符串 var arr1=[1, 2, 3, 4, 5, 6, 7]; var str1=arr1.join("-"); alert(str1); //结果为"1-2-3-4-5-6-7"
concat方法
x.concat(value,...) ---- 合并数组或值 var a = [1,2,3]; var b=a.concat(4,5) ; console.log(a); //返回结果为[1,2,3] console.log(a); //返回结果为[1,2,3,4,5] alert(a.toString()); //返回结果为1,2,3 alert(b.toString()); //返回结果为1,2,3,4,5
注:toString方法是将数组转成字符串
数组排序-reverse sort
//x.reverse() //x.sort() var arr1=[32, 12, 111, 444]; //var arr1=["a","d","f","c"]; arr1.reverse(); //颠倒数组元素 alert(arr1.toString()); //结果为444,111,12,32 arr1.sort(); //排序数组元素 alert(arr1.toString()); //结果为111,12,32,444 //------------------------------ arr=[1,5,2,100]; //arr.sort(); //alert(arr); //如果就想按着数字比较呢? function intSort(a,b){ if (a>b){ return 1;//-1 } else if(a<b){ return -1;//1 } else { return 0 } } arr.sort(intSort); alert(arr); function IntSort(a,b){ return a-b; }
数组排序
数组切片操作
//x.slice(start, end) // //使用注解 // //x代表数组对象 //start表示开始位置索引 //end是结束位置下一数组元素索引编号 //第一个数组元素索引为0 //start、end可为负数,-1代表最后一个数组元素 //end省略则相当于从start位置截取以后所有数组元素 var arr1=[‘a‘,‘b‘,‘c‘,‘d‘,‘e‘,‘f‘,‘g‘,‘h‘]; var arr2=arr1.slice(2,4); var arr3=arr1.slice(4); var arr4=arr1.slice(2,-1); alert(arr2.toString()); //结果为"c,d" alert(arr3.toString()); //结果为"e,f,g,h" alert(arr4.toString()); //结果为"c,d,e,f,g"
数组切片操作
删除子数组
//x. splice(start, deleteCount, value, ...) //使用注解 //x代表数组对象 //splice的主要用途是对数组指定位置进行删除和插入 //start表示开始位置索引 //deleteCount删除数组元素的个数 //value表示在删除位置插入的数组元素 //value参数可以省略 var a = [1,2,3,4,5,6,7,8]; a.splice(1,2); alert(a.toString());//a变为 [1,4,5,6,7,8] a.splice(1,1); alert(a.toString());//a变为[1,5,6,7,8] a.splice(1,0,2,3); alert(a.toString());//a变为[1,2,3,5,6,7,8]
删除子数组
数组的push和pop
//push pop这两个方法模拟的是一个栈操作 //x.push(value, ...) 压栈 //x.pop() 弹栈 //使用注解 // //x代表数组对象 //value可以为字符串、数字、数组等任何值 //push是将value值添加到数组x的结尾 //pop是将数组x的最后一个元素删除 var arr1=[1,2,3]; arr1.push(4,5); alert(arr1); //结果为"1,2,3,4,5" arr1.push([6,7]); alert(arr1) //结果为"1,2,3,4,5,6,7" arr1.pop(); alert(arr1); //结果为"1,2,3,4,5"
数组的push和pop
数组的shift和unshift
//x.unshift(value,...) //x.shift() //使用注解 //x代表数组对象 //value可以为字符串、数字、数组等任何值 //unshift是将value值插入到数组x的开始 //shift是将数组x的第一个元素删除 var arr1=[1,2,3]; arr1.unshift(4,5); alert(arr1); //结果为"4,5,1,2,3" arr1. unshift([6,7]); alert(arr1); //结果为"6,7,4,5,1,2,3" arr1.shift(); alert(arr1); //结果为"4,5,1,2,3"
数组的shift和unshift
总结js的数组特性
// js中数组的特性 //java中数组的特性, 规定是什么类型的数组,就只能装什么类型.只有一种类型. //js中的数组特性1: js中的数组可以装任意类型,没有任何限制. //js中的数组特性2: js中的数组,长度是随着下标变化的.用到多长就有多长. var arr5 = [‘abc‘,123,1.14,true,null,undefined,new String(‘1213‘),new Function(‘a‘,‘b‘,‘alert(a+b)‘)]; /* alert(arr5.length);//8 arr5[10] = "hahaha"; alert(arr5.length); //11 alert(arr5[9]);// undefined */
特性
3、Date时间对象
关键字:
Date:默认当前时间对象,还可以传入具体的时间对象。
toLocaleString:本地时间字符串
toUTCString:国际时间字符串
getDate:获取天
getDay:获取星期
getMonth:获取月,默认从0-11
getFullYear:获取完整年份
getYear:获取年
getHours:获取小时
getMinutes:获取分钟
getSeconds:获取秒
getMilliseconds:获取毫秒
getTime:返回累计的毫秒数,从1970年1月1日午夜开始计算
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var date=new Date(); console.log(date); console.log(date.toLocaleString()); console.log(date.toUTCString()); console.log(date.getDate()); console.log(date.getDay()); console.log(date.getMonth()); console.log(date.getFullYear()); console.log(date.getYear()); console.log(date.getHours()); console.log(date.getMinutes()); console.log(date.getSeconds()); console.log(date.getMilliseconds()); console.log(date.getTime()); </script> </body> </html>
Date实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> function date_time(){ //定义当前时间 var date=new Date(); //获取完整年份 var year=date.getFullYear(); //获取月份 var month=date.getMonth()+1; //获取天 var date_day=date.getDate(); //获取时 var hours=date.getHours(); //获取分 var minutes=date.getMinutes(); //获取秒 var seconds=date.getSeconds(); //获取星期 var day=date.getDay(); //打印字符串时间 date=year+‘年‘+month_day(month)+‘月‘+month_day(date_day)+‘日‘+‘ ‘+hours+‘时‘+minutes+‘分‘+seconds+‘秒‘+‘ ‘+week_day(day); console.log(date) } date_time() //自动补齐月份和日 function month_day(num) { if (num < 10){ //小于10的前面自动补0 return ‘0‘+num; } else { return num } } //将星期转成汉字 function week_day(num){ var arr_week = [‘星期日‘,‘星期一‘,‘星期二‘,‘星期三‘,‘星期四‘,‘星期五‘,‘星期六‘]; //根据传入的数字取出列表中相对应的值 return arr_week[num]; } </script> </body>
如果将get换成set,还可以设置时间
时间对象的创建
//方法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( ));//毫秒并不直接显示
获取日期和时间方法
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]; }
设置日期和时间的方法
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秒
练习实例
转换日期和时间的方法
getTimezoneOffset():8个时区×15度×4分/度=480; 返回本地时间与GMT的时间差,以分钟为单位 toUTCString() 返回国际标准时间字符串 toLocalString() 返回本地格式时间字符串 Date.parse(x) 返回累计毫秒数(从1970/1/1午夜到本地时间) Date.UTC(x) 返回累计毫秒数(从1970/1/1午夜到国际时间)
4、Math数学计算对象
关键字:
Math对象:提佛那个的是一个已经实例好了的对象,不需要再去实例化了
abs:返回数的绝对值
exp:返回e的多少指数(次方)
floor:对数字下舍入,向下取整
ceil:向上取整
log:返回数的自然对数,底为e
random:随机数
max:返回最大值
min:返回最小值
pow:返回一个数的多少次方
round:把一个数四舍五入到一个最接近的整数
random:返回0~1之间的随机数
sin:返回数的正弦
sqrt:返回一个数的平方根
tan:返回角的正切
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> console.log(Math.abs(10)); console.log(Math.exp(4)); console.log(Math.floor(32.423442)); console.log(Math.ceil(32.423442)); console.log(Math.log(20)); console.log(Math.random()); console.log(Math.max(2,3,5,2,1,50)); console.log(Math.min(32,4,32,423,1,43)); console.log(Math.pow(3,4)); console.log(Math.round(21.32342)); console.log(Math.sin(2)); console.log(Math.sqrt(16)); console.log(Math.tan(5)); </script> </body> </html>
//方法练习: //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 次方.