初学JavaScript对象(四)

最新推荐文章于 2024-02-29 21:26:51 发布

不贰过先生

最新推荐文章于 2024-02-29 21:26:51 发布

阅读量325

点赞数

分类专栏： HTML/JS 文章标签： JS对象 JS字符串对象 JS日期对象 JS数组 JS正则

本文链接：https://blog.csdn.net/u013132035/article/details/56282405

版权

HTML/JS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

学过C++或者Java的人应该都知道对象这个概念，我相信也可以熟练的创建对象。今天介绍的是JavaScript中的对象，JavaScript中所有的事物都是对象，比如数组、字符串、函数、数值、逻辑、正则表达式、算数等等。JS也可以自定义对象。

JavaScript对象的定义和Java类似，但是它是一种弱类型语言，可以在自定义好对象以后自己添加属性和方法，也可以删除属性和方法，下面以一段代码说明(注意方法的参数不要写类型，否则浏览器会显示不了结果)：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS自定义对象</title>
</head>
<body>
	<script type="text/javascript">
	
		//自定义对象
		var p = new Object();
		alert("未定义属性和方法");
		//未定义属性和方法
		alert(p.name);
		alert(p.age);
		
		alert("动态添加属性和方法");
		//动态的添加属性
		p.name = "zhangsan";
		p.age = 25;
		//动态添加方法
		function speak(){
			alert("你好，JS！");
		}
		function say(something){
			alert(something);
		}
		
		p.fun1 = speak;
		p.fun2 = say;
		
		//输出方法和属性
		alert(p.name);
		alert(p.age);
		p.fun1()
		p.fun2("我们可以做朋友么？")
		
		alert("动态删除属性和方法");
		//删除属性和方法
		delete p.name;
		delete p.age;
		delete p.fun1;
		delete p.fun2;
		alert(p.name);
		alert(p.age);
		p.fun1();
		p.fun2("我们可以做朋友么？");
	</script>
</body>
</html>

JavaScript也可以有对象构造方法，代码如下(注意对象的构造方法不需要写出数据类型，只需写出参数个数与名称就可以)：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS对象构造方法</title>
<script type="text/javascript">
	function student(name, age){
		this.names = name;
		this.ages = age;
		function say(something){
			alert(something);
		}
		this.func = say;
	}
	var s1 = new student("zhangsan", 25);
	alert(s1.names);
	alert(s1.ages);
	s1.func("你好，JS！");
</script>
</head>
<body>
</body>
</html>

JS字符串对象：字符串对象一共有5个方法，第一种：如何使用长度属性来计算字符串的长度length。第二种：如何为字符串添加样式。第三种：如何来定位字符串中某一个指定的字符首次出现的位置的indexOf()方法。第四种：如何使用match()来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。第五种：使用replace()方法在字符串中哟某些字符替换掉另一些字符。代码示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS字符串对象</title>
</head>
<body>
	<script type="text/javascript">
		var s1 = "abcdefghigk";
		var s2 = new String("aabbccddeeff");
		document.write("字符串1:"+s1+"<br/>");
		document.write("字符串2:"+s2+"<br/>");
		
		document.write("字符串长度函数length：<br/>");
		document.write("字符串1的长度:"+s1.length+"<br/>");
		document.write("字符串2的长度:"+s2.length+"<br/>");
	
		document.write("字符样式函数:<br/>");
		document.write("<p>Big: " + s1.big() + "</p>")
		document.write("<p>Small: " + s1.small() + "</p>")
		document.write("<p>Bold: " + s1.bold() + "</p>")
		document.write("<p>Italic: " + s1.italics() + "</p>")
		document.write("<p>Blink: " + s1.blink() + " (does not work in IE)</p>")
		document.write("<p>Fixed: " + s1.fixed() + "</p>")
		document.write("<p>Strike: " + s1.strike() + "</p>")
		document.write("<p>Fontcolor: " + s1.fontcolor("Red") + "</p>")
		document.write("<p>Fontsize: " + s1.fontsize(16) + "</p>")
		document.write("<p>Lowercase: " + s1.toLowerCase() + "</p>")
		document.write("<p>Uppercase: " + s1.toUpperCase() + "</p>")
		document.write("<p>Subscript: " + s1.sub() + "</p>")
		document.write("<p>Superscript: " + s1.sup() + "</p>")
		document.write("<p>Link: " + s1.link("http://www.w3school.com.cn") + "</p>")
		
		document.write("定位字符串中某个子串首次出现的位置:<br/>");
		document.write("s2中aabb首次出现的位置:"+s2.indexOf("aabb")+"<br/>");
		document.write("s2中aacc首次出现的位置:"+s2.indexOf("aacc")+"<br/>");
		document.write("s2中eeff首次出现的位置:"+s2.indexOf("eeff")+"<br/>");
		document.write("s2中bbcc首次出现的位置:"+s2.indexOf("bbcc", 4)+"<br/>");
		document.write("s2中bbcc首次出现的位置:"+s2.indexOf("bbcc", 1)+"<br/>");
		
		document.write("字符串中指定子字符串是否匹配:<br/>");
		document.write("s1中bcdf是否匹配:"+s1.match("bcdf")+"<br/>");
		document.write("s1中bcde是否匹配:"+s1.match("bcde")+"<br/>");
		document.write("s2中bcde是否匹配:"+s2.match("bcde")+"<br/>");
		document.write("s2中ccdd是否匹配:"+s2.match("ccdd")+"<br/>");
		
		document.write("字符串替代函数:<br/>");
		document.write(s2.replace("bbcc", "爱")+"<br/>");
		document.write(s1.replace("bcde", "爱")+"<br/>");
	</script>
</body>
</html>

JavaScript日期对象：使用Date()方法获取当前日期。1：getTime()方法，返回1970年1月1日至今的毫秒数。2： getFullYear(),从Date对象以四位数字返回年份。3：getMonth()，从Date对象返回月份(0-11)。4：getDate()，从Date对象返回一个月中的某一天(1-31)。5:getHours(),返回Date对象的小时(0-23)。6：getMinutes(),返回Date对象的分钟(0-59)。7：getSeconds(),返回Date对象的秒数(0-59)。8：getDay(),从Date对象返回一周中的某一天(0-6)。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript日期对象</title>
<script type="text/javascript">
	var date = new Date();
	document.write(date.getTime()+"<br/>");//从1970年1月1日至今的毫秒数
	document.write(date.getFullYear()+"<br/>")//从Date对象以四位数字返回年份
	document.write(date.getMonth()+"<br/>");//从Date对象返回月份（0到11）
	document.write(date.getDate()+"<br/>");//从Date对象中返回一个月中的某一天
	document.write(date.getHours()+"<br/>");//返回Date对象中的小时
	document.write(date.getMinutes()+"<br/>");//返回Date对象中的分钟
	document.write(date.getSeconds()+"<br/>")//返回date对象中的秒数
	document.write(date.getDay()+"<br/>")//从Date对象返回一周中的某一天(0到6)
	document.write(date.getFullYear()+"年  "+(date.getMonth()+1)+"月  "+date.getDate()+"日   "+date.getHours()+"时  "+date.getMinutes()+"分  "+date.getSeconds()+"秒"+"<br/>");
	var day = date.getDay();
	var week;
	switch(day){
		case 0: week="星期日"; break;
		case 1: week="星期一"; break;
		case 2: week="星期二"; break;
		case 3: week="星期三"; break;
		case 4: week="星期四"; break;
		case 5: week="星期五"; break;
		case 6: week="星期六"; break;
		default: week="逆天了!";
	}
	document.write(date.getFullYear()+"年  "+(date.getMonth()+1)+"月  "+date.getDate()+"日   "+week+"  "+date.getHours()+"时  "+date.getMinutes()+"分  "+date.getSeconds()+"秒");
	
</script>
</head>
<body>
</body>
</html>

JavaScript数组，和Java中的数组一样，它也可以进行数组的声明，数组的遍历，数组元素也可以进行排序sort()方法，数组元素组合成字符串join()方法，合并数组元素concat()方法，颠倒数组元素reverse()方法。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript数组</title>
<script type="text/javascript">
	var arr = new Array();//动态生成数组
	arr[0] = "小狗";
	arr[1] = "猫猫";
	arr[2] = "老鹰";
	arr[3] = "猪猪";
	arr[4] = "狗狗";
	
	var arr1 = new Array(3);//静态生成数组
	arr1[0] = 1;
	arr1[1] = 6;
	arr1[2] = 3;
	
	//for遍历循环
	for(var i = 0; i < arr.length; i++){
		document.write(i+" ");
	}
	document.write("<br/>");
	
	
	for(var o in arr1){
		document.write(arr1[o]+" ");
	}
	document.write("<br/>");
	
	document.write("数组排序sort():"+arr.sort()+"<br/>");
	document.write("数组元素组合成字符串join():"+arr1.join()+"<br/>");
	document.write("数组元素组合成字符串join("-"):"+arr1.join("-")+"<br/>");
	document.write("数组合并contact():"+arr.concat(arr1)+"<br/>");
	document.write("反转reverse():"+arr.reverse()+"<br/>")
</script>
</head>
<body>

</body>
</html>

JS只有一种数字类型，可以使用小数点也可以不使用小数点来表示。JS没有不同定义的数值类型，和Java不同，JS中所有数字均为64位，它的精度很大，整数值一般为15位，小数的最大位数为17位。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小数</title>
</head>
<body>
	<script type="text/javascript">
		var nums;
		nums = 12345678901234567890;
		document.write(nums+"<br/>");
		nums = 0.1+0.2;
		document.write("0.1+0.2="+nums+"<br/>");
		document.write("(0.1*10+0.2*10)/10="+(0.1*10+0.2*10)/10);
	</script>
</body>
</html>

JS中的逻辑对象用于将非逻辑值转化为逻辑值。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>逻辑对象</title>
</head>
<body>
	<script type="text/javascript">
		var myB = new Boolean();
		document.write("myB:"+myB+"<br/>");
		var myB1 = new Boolean("");
		document.write("myB1:"+myB1+"<br/>");
		var myB2 = new Boolean(null);
		document.write("myB2:"+myB2+"<br/>");
		var myB3 = new Boolean(0);
		document.write("myB3:"+myB3+"<br/>")
		var myB4 = new Boolean(NaN);
		document.write("myB4:"+myB4+"<br/>");
		var myB5 = new Boolean(false);
		document.write("myB5:"+myB5+"<br/>");
		var myB6 = new Boolean(undefined);
		document.write("myB6:"+myB6+"<br/>");
		document.write("<br/><br/><br/><br/>");
		
		var myB = new Boolean(1);
		document.write("myB:"+myB+"<br/>");
		var myB1 = new Boolean("A");
		document.write("myB1:"+myB1+"<br/>");
		var myB2 = new Boolean(true);
		document.write("myB2:"+myB2+"<br/>");
		var myB3 = new Boolean(3);
		document.write("myB3:"+myB3+"<br/>")
		var myB4 = new Boolean("false");
		document.write("myB4:"+myB4+"<br/>");
		var myB5 = new Boolean("true");
		document.write("myB5:"+myB5+"<br/>");
	</script>
</body>
</html>

JS中有算数对象，它的作用就是处理常见的算数任务。Math对象的任务是执行普通的算数任务。Math对象提供多种算数值类型和函数，使用前无需定义它。Math对象有round()，random(),max(),min()，floor()，abs(),sin(),tan()等方法。它还有一些常算数值。见下图。

代码示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS算数对象</title>
</head>
<body>
	<script type="text/javascript">
		document.write("常数:"+Math.E+"<br/>");
		document.write("圆周率:"+Math.PI+"<br/>");
		document.write("2 的平方根:"+Math.SQRT2+"<br/>");
		document.write("1/2 的平方根:"+Math.SQRT1_2+"<br/>");
		document.write("2 的自然对数:"+Math.LN2+"<br/>");
		document.write("10 的自然对数:"+Math.LN10+"<br/>");
		document.write("以 2 为底的 e 的对数:"+Math.LOG2E+"<br/>");
		document.write("以 10 为底的 e 的对数:"+Math.LOG10E+"<br/>");
		document.write("随机数:"+Math.random()+"<br/>");
		document.write("取整:"+Math.floor(10.678)+"<br/>");
		document.write("取绝对值:"+Math.abs(-19)+"<br/>");
		document.write("取最大值:"+Math.max(10, 7)+"<br/>")
		document.write("取最小值:"+Math.min(10,7)+"<br/>");
	</script>
</body>
</html>

JS正则表达式RegExp对象用于存储检索模式，用于搜索文本中的特定内容。RegExp对象有3个方法，test()：用于检索字符串中的指定的值，返回值为true或false、exec()：检索字符串中的指定值，找到返回指定的值否则返回null、compile()：用于改变RegExp。代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>RegExp</title>
</head>
<body>
	<script type="text/javascript">
		var reg1 = new RegExp("o");
		document.write("exec():"+reg1.exec("abcd0erdf")+"<br/>");
		document.write("exec():"+reg1.exec("iloveyou")+"<br/>");
		document.write("test():"+reg1.test("iloveyou")+"<br/>");
		document.write("test():"+reg1.test("ilveU")+"<br/>");
		
		var reg2=new RegExp("e");
		document.write(reg2.test("IloveYou!")+"<br/>");
		reg2.compile("d");
		document.write(reg2.test("IloveYou!")+"<br/>");
	</script>
</body>
</html>