JavaScript入门<2>JavaScript常用内置对象实例详解

最新推荐文章于 2024-07-19 22:17:45 发布

xiu2016

最新推荐文章于 2024-07-19 22:17:45 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/xiu2016/article/details/52829826

版权

1、什么是JavaScript对象？

1）javaScript是一种基于对象的语言，对象是JS中最重要的元素

2）JavaScript中包含多种对象：内置对象、自定义对象、浏览器对象、HTML DOM对象、ActiveX对象

2、如何使用JavaScript对象？

1）对象由属性和方法封装而成，所以属性的引用是使用“.”运算符，通过上下标的方式引用

2）对象方法的引用：ObjectName.methods()。

3、JavaScript有哪些常用内置对象？

  1）简单数据对象：String、Number、Boolean
  2）组合对象：Array、Date、Math
  3）复杂对象：Function、RegExp

一）String对象

1）创建字符串对象

  方式一：var str1 = "hello world";
  方式二：var str2 = new String("hello world");
2）String对象的属性：length，例如：alert(str1.length);
3）String对象的方法：
  ①大小写转换：toLowerCase()：转为小写；toUpperCase()：转为大写。

    //测试大小写转换函数
  var str1="AbcdEfgh";
  var str2=str1.toLowerCase();alert(str2);//结果为 abcdefgh
  var str3=str1.toUpperCase();alert(str3);//结果为 ABCDEFGH

  ②获取指定字符：charAt(index)：返回指定位置index的字符；
      charCodeAt(index)：返回指定位置index的字符的Unicode编码
   注意事项：下标index从0开始。

	//测试获取指定字符函数
   var str1="JavaScript网页教程";
   var str2=str1.charAt(12);alert(str2);//结果为 教
   var str3=str1.charCodeAt(12);alert(str3);//结果为 25945

③查询指定字符串：
indexOf(findstr,index)：从前往后，从位置index开始查找指定的字符串findstr，并返回出现的首字符的位置。
lastIndexOf(findstr)：从后往前，查找指定的字符串findstr，并返回出现的首字符的位置。
 注意事项：index可省略，代表从0开始找。如果没有找到则返回-1。

	//测试指定字符串函数
    var str1="JavaScript网页教程";
 	var str2=str1.indexOf("a");alert(str2);//结果为 1
	var str3=str1.lastindexOf("a");alert(str3);//结果为 3

④获取子字符串：substring(start,end)：从start开始，到end结束，不包含end。

例如：var str1="abcdefgh";

varstr2=str1.substring(2,4);alert(str2);//结果为 cd

⑤替换子字符串：replace(oldstr,newstr)：返回替换后的字符串。

例如：var str1="abcde";

varstr2=str1.replace("cd","aaa");alert(str2);//结果为 abaaae

⑥拆分子字符串：split(bystr)：用bystr分割字符串，并返回分割后的字符串数组。

例如：var str1="一,二,三,四,五,六,日";

varstrArray=str1.split(",");

alert(strArray[1]);//结果为二

二）String对象与正则表达式

1、什么是正则表达式

正则表达式就是一种格式化的匹配方式，与普通的查找方式相比，可以用一句话匹配出所有格式统一或类似的子串，而不用逐一列出每一种可能的情况，可以大幅降低程序的复杂度，提高程序的可靠性，减少处理遗漏。

  String对象有几个方法可以结合正则表达式使用。
1）方法：
  ①replace(regexp,"replacestr")：返回替换后的结果。
  ②match(regexp)：返回匹配字符串的数组。
  ③search(regexp)：得到匹配字符串的“首“字符位置的索引。
2）JavaScript中使用正则表达式：使用②匹配模式：g：global，全局匹配；m：multilin，多行匹配；i：忽略大小写匹配。个斜杠， / 表达式 / 匹配模式
  ①正则表达式回顾：\d 或者 [a-z]{3,5}。就是纯文本的表达式，用来表示某种匹配模式。在不同的语言环境下，提供了不同的类，执行或者使用正则表达式，实现文本的各种处理。
  ②匹配模式：g：global，全局匹配；

m：multilin，多行匹配；

i：忽略大小写匹配。

	//测试匹配模式
  var str1="abc123def";
  var str2=str1.replace(/\d/g,"*");alert(str2);//abc***def，如果不用全局匹配则只替换一个数字
  var array=str1.match(/\d/g);//1,2,3
  var index=str1.search(/\d/);alert(index);//3

3）案例

eg1：查找并替换文本框中录入的子字符串 js 为 *

	//测试查找替换，本文代码皆不完整
<input type="text" id="txtString" />
<input type="button" value="过滤特殊字符（js）" οnclick="searchStringAndReplace();" />
function searchStringAndReplace() {	
    var str = document.getElementById("txtString").value;
	var count = 0;	
	var index = str.indexOf("js", 0);
	while (index > -1) {
		 str = str.replace("js","*"); 
		 index = str.indexOf("js", index + 1);	 
	 }
	 document.getElementById("txtString").value = str;			            }

eg2：字符查询与过滤（使用正则表达式）

	//测试使用正则表达式进行字符查询与过滤
<input type="text" id="txtString" /><br />
<input type="button" value="查找字符并过滤" οnclick="stringByRegex();" />
function stringByRegex() {
	var str = document.getElementById("txtString").value;
	var result = str.match(/js/gi);
	document.getElementById("txtString").value = str.replace(/js/gi, "*");
	alert("共替换了" + result.length + "处。");					
}

三）Array对象

Array表示一列有多个数据，JavaScript中只有数组没有集合。

1）创建方式
  方式一：var arr = ["mary",10,true];//用中括号！不是大括号；常用；声明的同时并赋值。
  方式二：var arr = new Array("mary",10,true);//声明的同时并赋值。
  方式三：var arr = new Array();或var arr = new Array(7);//可有长度也可没有长度。即便写了长度，也能把第8个数据存入！先声明后赋值。
  例如：arr[0] = "mary"; arr[1] = 10; arr[2] = true; alert(arr[3]);//undefined
2）数组的属性：length
3）创建二维数组：通过指定数组中的元素为数组的方式可以创建二维甚至多维数组。

	//测试二维数组
   var week=new Array(7);   
     for(var i=0;i<=6;i++){
     	week=[i]=new Array(2);
     	}
   week[0][0]="星期日";week[0][1]="Sunday"; 
   week[6][0]="星期六";week[6][1]="Saturday";

4）方法：数组转换为字符串
①join(bystr)：以bystr作为连接数组中元素的分隔字符，返回拼接后的数组。
②toString()：输出数组的内容（以逗号隔开）。
例如：var arr1=[1,2,3,4];

alert(arr1.toString()); //1,2,3,4

alert(arr1.join("-"));//1-2-3-4
5）方法：连接数组，concat(value,…)：value作为数组元素连接到数组的末尾（数组连接），返回连接后的数组。

例如：var a=[1,2,3]; var b=a.concat(4,5);

alert(a.toString());//1,2,3
alert(b.toString());//1,2,3,4,5

注意事项：concat方法并不改变原来数组的内容！

6）方法：获取子数组，slice(start,end)：截取从start开始到end结束（不包含end）的数组元素。end省略代表从start开始到数组结尾。

	//测试获取子数组
     var arr1=['a','b','c','d','e','f','g','h',];
     var arr2=arr1.slice(2,4);alert(arr2.toString());//c,d
     var arr3=arr1.slice(4);alert(arr3.toString());//e,f,g,h

7）方法：数组反转，reverse()：改变原数组元素的顺序。
例如：var arr1=[32,12,111,444];

   alert(arr1.reverse());//444,111,12,32
8）方法：数组排序
  ①sort()：数组排序，默认按照字符串的编码顺序进行排序。
  ②sort(sortfunc)：sortfunc用来确定元素顺序的函数名程。

	//测试数组排序
	var arr1=[32,12,111,444];
	arr1.sort();alert(arr1.toString());//111,12,32,444
      function sortFunc(a,b){
      	return a-b;
     	}
      arr1.sort(sortFunc);
      alert(arr1.toString());//12,32,111,444

9）案例
eg1：数组倒转与排序

<!DOCTYPE html>
<html>
  <head>
    <title>数组测试</title>
	<script type="text/javascript">
	  function operateArray(t) {	
	     //拆分为数组
	     var array = document.getElementById("txtNumbers").value.split(",");
	     switch (t) { 
	            case 1:   array.reverse();     break;
			 	case 2:	  array.sort();	         break;
		  	    case 3:   array.sort(sortFunc);   break;	
		  	         }	
       	 alert(array.toString());				         
        }
     function sortFunc(a, b) {	
     	return a - b;	
       }

	</script>
  </head>
  <body>
          这是一个数组倒转与排序的测试哦！<br>
    <input type="text" id="txtNumbers" value="12,4,3,123,51" />
     <input type="button" value="数组倒转" οnclick="operateArray(1);" />
     <input type="button" value="数组排序（文本）" οnclick="operateArray(2);" />
     <input type="button" value="数组排序（数值）" οnclick="operateArray(3);" />   
  </body>
</html>

eg2：统计文本框中录入的各个字符的各数（使用二维数组）

<html>
<head>
<title>arr02.html</title>
<script type="text/javascript">
	function countString(str) {
		var result = new Array();
		for ( var i = 0; i < str.length; i++) {//直接循环str
			var curChar = str.charAt(i);//得到当前字符
			var isHas = false;//声明一个变量，标识char在结果中是否出现过
			for ( var j = 0; j < result.length; j++) { //循环判断当前字符是否在result中出现过
		//如果出现过，则设置标识为true，并增加数量，最后跳出循环
				if (curChar == result[j][0]) {
					isHas = true;
					result[j][1]++;
					break;
				}
			}
			if (!isHas)//循环result完毕，没有出现过，则加入result
				result.push(new Array(curChar, 1));
		}
		alert(result.toString());

	}
</script>
</head>
<body>
	这是用来测试文本框录入字符个数的哦！<br>
	<h2>统计文本框中录入的各字符的个数</h2>
	<input type="text" οnblur="countString(this.value);" />
</body>
</html>

eg3：彩票双色球生成器

<!DOCTYPE html>
<html>
<head>
<title>arr03.html</title>
<script type="text/javascript">
	function randomNumber(min, max) {//随机数，包含下限，不包含上限
		var n = Math.floor(Math.random() * (max - min)) + min;
		return n;
	}
	function doubleBall() {//彩票双色球
		var result = new Array();//声明一个数组，用于存放结果
		var i = 0;
		while (i < 6) {//先产生6个红球
			var curCode = randomNumber(1, 34);//先生成一个1到33之间的号码
			var isHas = false;//判断该号码是否出现过
			for ( var j = 0; j < result.length; j++) {
				if (result[j] == curCode) {
					isHas = true;
					break;
				}
			}
			if (!isHas) {//没有出现过，则加入且计数器加1
				result.push(curCode);
				i++;
			}
		}
		result.sort(sortFunc);//产生完6个红球后，先排序，再产生一个蓝球
		var info = result.toString();
		var blueBall = randomNumber(1, 17);
		alert(info + "——>蓝球： " + blueBall); //返回结果
	}
	function sortFunc(a, b) {
		return a - b;
	}//排序用的方法
</script>
</head>
<body>
	<h2>彩票双色球生成器,随机生成</h2>
	<input type="button" value="机选" οnclick="doubleBall();" />
</body>
</html>

四）Math对象

  用于执行相关的数学计算。
1）没有构造函数Math()。
2）不需要创建，直接把Math作为对象使用就可以调用其所有属性和方法。如：不需要创建var data=Math.PI; 直接使用Math.PI;像Java中的静态类一样。
3）常用属性：都是数学常数，如：Math.E（自然数）、Math.PI（圆周率）、Math.LN2（ln2）、Math.LN10（ln10）等
4）常用方法：
  ①三角函数：Math.sin(x)、Math.cos(x)、Math.tan(x)等
  ②反三角函数：Math.asin(x)、Math.acos(x)等
  ③计算函数：Math.sqrt(x)、Math.log(x)、Math.exp(x)等
  ④数值比较函数：Math.abs(x)、Math.max(x,y,...)、Math.random()、Math.round(x)等
   注意事项：
   Math.random()：是一个 >=0 且 <1 的正小数
   Math.floor(x)：地板，小于等于x，并且与它最接近的整数。注意：将负数舍入为更小的负数，而不是向0进行舍入。
   Math.ceil(x)：天花板，返回大于等于x，并且与它最接近的整数。注意：不会将负数舍人为更小的负数，而是向0舍入。
5）案例
eg：随机得到3-9之间的一个整数（包含3，不包含9）
  分析：① * (9-3)则得到0-6之间的小数。

② +3则得到3-9之间的小数。

function getRandom(){	
   var min = 3;	
   var max = 9;	
   var seed = Math.random();
   var n = Math.floor( seed * (max-min) + min);	
   alert(n);		
   	}

五）Number对象

Number对象是原始数值的包装对象。
1）创建Number对象
  方式一：var myNum=new Number(value);
  方式二：var myNun=Number(value);
2）常用方法
  ①toString：数值转换为字符串。

2>toFixed(n)：数值转换为字符串，并保留小数点后n位数，多了就截断，四舍五入。少了就用0补足，常用作数值的格式化。比如：

var data=23.56789; alert(data.toFixed(2));//23.57
data=23.5; alert(data.toFixed(2));//23.50

六）RegExp正则表达式对象

1）创建正则表达式对象
  方式一：var reg1=/^\d{3,6}$/;
  方式二：var reg2=new RegExp("^\d{3,6}$");
2）JavaScript中，正则表达式的应用分为两类：
  一类：和String对象的三个方法结合使用，实现对string的操作，如：replace/match/search
  二类：调用正则表达式对象的常用test方法测试，RegExpObject.test(string)：如果字符串string中含有与RegExpObject匹配的文本，则返回true，否则返回false

3）案例：输入验证

<html>
<head>
<title>reg01.html</title>
<script type="text/javascript">
	function validateUserName(name) {//验证用户名
		var reg = /^[a-zA-Z0-9]{3,6}$/;//reg是一个对象
		var isRight = reg.test(name);
		if (!isRight) {
			alert("录入错误！");
		}
	}
	function validateUserPhone(phone) {//验证电话号码
		var reg = /^\d{6}$/;
		var isRight = reg.test(phone);
		if (!isRight) {
			alert("录入错误！");
		}
	}
</script>
</head>
<body>
	用户名（3到6位字母数字的组合）：
	<input type="text" οnblur="validateUserName(this.value);" />
	<br /> 电话号码（6位数字）：
	<input type="text" οnblur="validateUserPhone(this.value);" />
	<br />
	<!--this代表当前对象-->
</body>
</html>

七）Date对象

Data对象用于处理日期和时间。
1）创建Data对象
  方式一：var now = new Date();//当前日期和时间
  方式二：var now = new Date("2013/01/01 12:12:12");
2）常用方法
  ①读取日期的相关信息：getDay()、getDate()、getMonth()、getFullYear()…
  ②修该日期：setDay()、setDate()、setMonth()、setHours() ……
  ③转换为字符串：得到某种格式的字符串显式，常用于页面显式，如：toString()、toDateString()、toLocaleTimeString()
3）案例：计算查询时段

<html>
<head>
<title>date.html</title>
<script type="text/javascript">
	function getDateRange(days) {//时间的查询
		var end = new Date();//得到当前日期
		var endString = end.toLocaleDateString();
		end.setDate(end.getDate() - days + 1);//修改日期
		var s = "开始日期为：" + end.toLocaleDateString() + "\n";//显示结果
		s += "结束日期为：" + endString;
		alert(s);
	}
</script>
</head>
<body>
	这是一个计算日期查询时段的测试
	<br>
	<input type="radio" οnclick="getDateRange(3);" name="date" />三天内
	<input type="radio" οnclick="getDateRange(7);" name="date" />一周内

</body>
</html>

八）函数与Function对象

1）函数的概述：函数（方法）是一组可以随时随地运行的语句。Function对象可以表示开发者定义的任何函数。函数实际上是功能完整的对象。
2）函数的定义：function 函数名(参数){ 函数体; return; }
   注意事项：
       由关键字function定义。
       函数名的定义规则与标识符一致，大小写敏感。
       可以使用变量、常量或表达式作为函数调用的参数。
       返回值必须使用return。
3）函数的调用：函数可以通过其名字加上括号中的参数进行调用。如果有多个参数，则参数之间用逗号隔开。如果函数有返回值，则可以声明变量等于函数的结果即可。

比如： functionsum(n1,n2){ return n1+n1; } varresult=sum(1,1); alert(result);//2
4）JavaScript中，如何创建一个方法
方式一：使用function关键字明文的声明一个方法（最常用，用于功能相关的方法）
例如：function AA(a,b){ alert(a+b); }

方式二：使用Function对象创建函数，语法：

var functionName=new Function(arg1,...argN,functionBody);

最后一个参数是方法体，前面的其它参数是方法的参数。例如：

<input type="button" value="使用Function对象创建函数" οnclick="testFunction();" />
function testFunction(){
var f = new Function("a","b","alert(a+b);");
f(10,20);
}

   注意事项：
       需求：有些方法不需要显式的存在，只是为其他方法里所使用（类似于java中的内部类）。
       缺陷：方法体不能复杂。
  方式三：创建匿名函数，语法：
  var func=function(arg1,...argN){ func_body; return value; }

例如： var f = function(a,b){ alert(a+b); }

5）案例：数组按数值排序（使用Function对象和匿名函数）

<html>
<head>
<title>fun.html</title>
<script type="text/javascript">
	function sortArray() {//使用 Function 对象
		var array = [ 34, 2, 14, 56, 43 ];
		array.sort(new Function("a", "b", "return a-b;"));
		alert(array.toString());
	}
	function sortArray2() {//使用匿名函数
		var array = [ 12, 3, 45, 9 ];
		var f = function(a, b) {	return a - b;  };
		array.sort(f);
		alert(array.toString());
	}
</script>
</head>
<body>
	这是一个使用Function对象和匿名函数做的数组排序测试<br>
	<input type="button" value="排序" οnclick="sortArray();" />
</body>
</html>

九）全局函数

全局函数可用于所有内建的JavaScript对象。常用的全局函数有：

1）decodeURI/encodeURI

①encodeURI(str)：把字符串作为URI进行编码（大写i）。

②decodeURI(str)：对encodeURI()函数编码过的URI进行解码。

例如：function test(){

vars="http://sss.jsp?name=张三&code=李四";

varr1=encodeURI(s);

var r2=decodeURI(r1);

alert(r1); alert(r2); }

2）parseInt/parseFloat

①parseInt(str)：强制转换成整数，如果不能转换，则返回NaN。

例如：parseInt("6.12")=6（无四舍五入）

②parseFloat(str)：牵制转换成浮点数，如果不能转换，则返回NaN。

例如：parseFloat("6.12")=6.12

3）isNaN(str)：is not a number，判断文本是否为数值，false为数值，true为非数值。

4）eval(str)：用于计算某个字符串，以得到结果；或者用于执行其中的JavaScript代码。

注意事项：eval(str)只接受原始字符串作为参数，如果参数中没有合法的表达式和语句，则抛出异常

例如：var str="2+3"; alert(str);//2+3 alert(eval(str));//5

5）案例：简单计算器

<!DOCTYPE html>
<html>
<head>
<title>all.html</title>
<script type="text/javascript">
	function calculater(s) {
		if (s == "=") {//如果单击的是=则计算，否则拼接
			var s1 = document.getElementById("txtNumber").value;
			var r = eval(s1);
			document.getElementById("txtNumber").value = r;
		} else {
			document.getElementById("txtNumber").value += s;
		}
	}
</script>
</head>
<body>
	简易计算器测试！<span style="font-family: Arial, Helvetica, sans-serif;">如果单击的是=则计算，否则拼接</span><br>
	<input type="button" value="1" οnclick="calculate(this.value);" />
	<input type="button" value="2" οnclick="calculate(this.value);" />
	<input type="button" value="3" οnclick="calculate(this.value);" />
	<input type="button" value="4" οnclick="calculate(this.value);" />
	<input type="button" value="+" οnclick="calculate(this.value);" />
	<input type="button" value="-" οnclick="calculate(this.value);" />
	<input type="button" value="=" οnclick="calculate(this.value);" />
	<br />
	<input type="text" id="txtNumber" />
</body>
</html>

十）Argument对象

1）arguments是一种特殊对象，在函数代码中，代表当前方法被传入的所有的参数，形成一个数组。

2）在函数代码中，可以使用arguments访问所有参数。

①arguments.length：函数的参数个数；

②arguments.[i]：第i个参数

3）JavaScript中，没有传统意义上的重载（方法名相同，但是参数不同），即：如果方法名相同，则以最后一次定义的为准。如果想在JavaScript中实现类似于重载的效果，就需要使用arguments对象。

4）案例：模拟一个方法的重载

<!DOCTYPE html>
<html>
<head>
<title>arg.html</title>
<script type="text/javascript">
	//Javascript 代码中，相同名称的方法如果重复定义，将会用新定义的方法覆盖已有的同名方法，
	//因此，只能创建一个名为 myMethod 的方法，且不需要为该方法定制参数。
	function myMethod() {
		if (arguments.length == 1) {//计算平方
			var n = parseInt(arguments[0]);//避免隐式转换，主动显式转换
			alert(n + " 的平方为：" + n * n);
		} else if (arguments.length == 2) {//计算和
			var n = parseInt(arguments[0]);
			var m = parseInt(arguments[1]);
			var result = n + m;
			alert(n + " 与 " + m + " 的和为：" + result);
		}
	}
</script>
</head>
<body>
	点击计算平方和计算加法，弹出测试页面.<br>
	<input type="button" value="计算平方" οnclick="myMethod(12);" />
	<input type="button" value="计算加法" οnclick="myMethod(12,45);" />
</body>
</html>

真多，手麻！