JavaScript基本介绍02-Array对象、自定义对象、原型

最新推荐文章于 2025-07-23 14:27:17 发布

perfectmatch_G

最新推荐文章于 2025-07-23 14:27:17 发布

阅读量331

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/perfectmatch_G/article/details/89172673

JS 专栏收录该内容

6 篇文章

订阅专栏

补充：
事件编程中事件的分类：
1.鼠标点击事件：单击：onclick / 双击：ondbclick
2.和焦点相关的事件：聚焦事件：onfocus / 失去焦点事件：onblur
3.选项卡发生变化的事件：onchange事件
4.鼠标经过 / 移出事件：onmouseover / onmouseout
5.页面加载事件：body中的内容加载完毕之后会执行的事件 onload

js之Array对象

js中定义数组注意事项：
1.在js中定义数组，不用担心数组越界问题，会自动扩容；
2.在js中，数组是可以定义任何数据类型的;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Array对象</title>
		<script>
		/*1.指定数组长度
		var arr = new Array(3);*/
		//需要给数组中的元素进行赋值
		
		/*2.不指定数组长度
		 var arr = new Array();*/
		
		/*3.指定具体元素内容*/
		 var strArray = ["java","python","c++"];
		
		 //两个方法
		 //1.join（str）：通过指定字符串，将数组中的内容用该字符串拼接
		 //2.reverse（）：将数组中的内容进行反转
		var str = strArray.join("-");
		 document.write(str);
		</script>
	</head>
	<body>
	</body>
</html>

js自定义对象

有参方式：类似于java中的有参构造

    function 对象（形参）{
    	追加属性
     	  追加方法
    }
    创建对象：var 对象名 = new 对象（实参）；

2.无参构造：类似于java中的参数构造

   function 对象（）{
   	
   }
   创建对象
   var 对象名 = new 对象（）；
   追加属性
   追加方法

创建Object对象：在js中Object对象代表了所有对象，是一个模板对象

var p = new Object;
//追加属性
p.name = "susan";
p.age = 18;
//追加方法
p.say = function(){
	alert("调用了say方法");
	}

字面量的方式：json格式

var p ={
	"key1":"value1";
	"name":"susan";
	"age":"18";
	//追加方法
	"say":function(){
		alert("调用了say方法");
	}
	...
};

练习：
需求：
设计一个工具对象ArrayUtil-
添加一个search（array，target）-在array数组中查找target元素的位置；
添加max（array）：获取最大值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js自定义对象</title>
		<script src = "ArrayUtil.js"></script>
		<script>
			//定义一个数组
			var arr = [8,67,15,65,98,10];
			var arrayUtil = new ArrayUtil();
			var index = arrayUtil.search(arr,15);
			document.write("15的位置是"+index+"<br/>");
			var max = arrayUtil.max(arr);
			document.write("最大值是"+max+"<br/>");
		</script>
	</head>
	<body>
	</body>
</html>

js文件中：

function ArrayUtil(){
			this.search = function(array,target){
				for(var i = 0;i<array.length;i++){
					if(array[i] == target){
						return i;
					}
				}
				return -1;
			}
			this.max = function(array){
				var max = 0;
				for(var i = 0;i<array.length;i++){
					if(array[i]>max){
						max = array[i];
					}
				}
				return max;
			}
		}

js原型

js原型属性的作用：
1.在js中所有的内置对象中，都存在原型属性：prototype；
2.在内置对象中调用原型属性，追加一个方法，这个方法会自动添加到内置对象中；
3.原型的作用就是为了给内置对象中追加方法
格式：
内置对象.prototype.方法名 = function（参数）{...}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js原型</title>
		<!--需求：
			在Array对象中
			添加一个search（array，target）-在array数组中查找target元素的位置；
			添加max（array）：获取最大值
			不能使用自定义对象去完成！
			
			js原型是解决方案：
			在js中给原型对象中添加一个方法，然后在内置对象中去创建原型对象，
			这个方法会自动添加到内置对象中
			prototype
		-->
		<script>
			Array.prototype.search = function(target){
				for(var i = 0;i<this.length;i++){
					if(this[i] == target){
						return i;
					}
				}
				return -1;
			}
			
			Array.prototype.max = function(){
				var max = this[0];
				for(var i = 1;i<this.length;i++){
					if(this[i]>max){
						max = this[i]; 
					}
				}
				return max;
			}
			
			var arr = [8,67,15,65,98,10];
			var index = arr.search(15)
			document.write("15的位置是"+index+"<br/>");
			var max = arr.max();
			document.write("最大值是"+max+"<br/>");	
		</script>
	</head>
	<body>
	</body>
</html>