js--重写toString、垃圾回收、数组及其方法、函数的方法

 

目录

 

1.重写toString()方法

2.js中的垃圾回收机制

3.数组

3.1 数组创建以及操作

3.2 数组的方法

3.3 数组练习

4.forEach

5.函数的方法

5.1 call()与apply()

5.2 arguments


1.重写toString()方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			function Person(name , age , gender){
				this.name = name;
				this.age = age;
				this.gender = gender;
			}
			
			//修改Person原型的toString
			Person.prototype.toString = function(){
				return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]";
			};
			
			
			//创建一个Person实例
			var per = new Person("孙悟空",18,"男");
			var per2 = new Person("猪八戒",28,"男");
			
			//当我们直接在页面中打印一个对象时,事件上是输出的对象的toString()方法的返回值
			//如果我们希望在输出对象时不输出[object Object],可以为对象添加一个toString()方法
			//Person[name=孙悟空,age=18,gender=男]
			/*per.toString = function(){
				return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]";
			};*/
			
			var result = per.toString();
			//console.log("result = " + result);
			//console.log(per.__proto__.__proto__.hasOwnProperty("toString"));
			console.log(per2);
			console.log(per);
			
			
		</script>
	</head>
	<body>
	</body>
</html>

2.js中的垃圾回收机制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * 垃圾回收(GC)
			 * 	- 就像人生活的时间长了会产生垃圾一样,程序运行过程中也会产生垃圾
			 * 		这些垃圾积攒过多以后,会导致程序运行的速度过慢,
			 * 		所以我们需要一个垃圾回收的机制,来处理程序运行过程中产生垃圾
			 *  - 当一个对象没有任何的变量或属性对它进行引用,此时我们将永远无法操作该对象,
			 * 		此时这种对象就是一个垃圾,这种对象过多会占用大量的内存空间,导致程序运行变慢,
			 * 		所以这种垃圾必须进行清理。
			 * 	- 在JS中拥有自动的垃圾回收机制,会自动将这些垃圾对象从内存中销毁,
			 * 		我们不需要也不能进行垃圾回收的操作
			 * 	- 我们需要做的只是要将不再使用的对象设置null即可
			 * 
			 */
			var obj = new Object();
			
			//对对象进行各种操作。。。。
			
			
			obj = null;
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

3.数组

3.1 数组创建以及操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 内建对象
			 * 宿主对象
			 * 自定义对象
			 * 
			 * 数组(Array)
			 * 	- 数组也是一个对象
			 * 	- 它和我们普通对象功能类似,也是用来存储一些值的
			 * 	- 不同的是普通对象是使用字符串作为属性名的,
			 * 		而数组时使用数字来作为索引操作元素
			 * 	- 索引:
			 * 		从0开始的整数就是索引
			 * 	- 数组的存储性能比普通对象要好,在开发中我们经常使用数组来存储一些数据
			 */
			
			//创建数组对象
			var arr = new Array();
			
			//使用typeof检查一个数组时,会返回object
			//console.log(typeof arr);
			
			/*
			 * 向数组中添加元素
			 * 语法:数组[索引] = 值
			 */
			arr[0] = 10;
			arr[1] = 33;
			arr[2] = 22;
			arr[3] = 44;
			/*arr[10] = 31;
			arr[100] = 90;*/
			
			/*
			 * 读取数组中的元素
			 * 语法:数组[索引]
			 * 	如果读取不存在的索引,他不会报错而是返回undefined
			 */
			
			//console.log(arr[3]);
			
			/*
			 * 获取数组的长度
			 * 可以使用length属性来获取数组的长度(元素的个数)
			 * 	语法:数组.length
			 * 
			 * 对于连续的数组,使用length可以获取到数组的长度(元素的个数)
			 * 对于非连续的数组,使用length会获取到数组的最大的索引+1
			 * 		尽量不要创建非连续的数组
			 */
			/*console.log(arr.length);
			console.log(arr);*/
			
			/*
			 * 修改length
			 * 	如果修改的length大于原长度,则多出部分会空出来
			 *  如果修改的length小于原长度,则多出的元素会被删除
			 */
			//arr.length = 10;
			
			/*arr.length = 2;
			
			console.log(arr.length);
			console.log(arr);*/
			
			arr[4] = 50;
			arr[5] = 60;
			
			//向数组的最后一个位置添加元素
			//语法:数组[数组.length] = 值;
			arr[arr.length] = 70;
			arr[arr.length] = 80;
			arr[arr.length] = 90;
			
			console.log(arr);
			
		</script>
	</head>
	<body>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			//创建一个数组
			//var arr = new Array();
			
			//使用字面量来创建数组
			//语法:[]
			//var arr = [];
			
			//console.log(typeof arr);
			
			//使用字面量创建数组时,可以在创建时就指定数组中的元素
			var arr = [1,2,3,4,5,10];
			
			//console.log(arr[3]);
			
			//使用构造函数创建数组时,也可以同时添加元素,将要添加的元素作文构造函数的参数传递
			//元素之间使用,隔开
			var arr2 = new Array(10,20,30);
			//console.log(arr2);
			
			//创建一个数组数组中只有一个元素10
			arr = [10];
			
			//创建一个长度为10的数组
			arr2 = new Array(10);
			
			//console.log(arr2.length);
			//数组中的元素可以是任意的数据类型
			arr = ["hello",1,true,null,undefined];
			
			//也可以是对象
			var obj = {name:"孙悟空"};
			arr[arr.length] = obj;
			arr = [{name:"孙悟空"},{name:"沙和尚"},{name:"猪八戒"}];
			
			//也可以是一个函数
			arr = [function(){alert(1)},function(){alert(2)}];
			
			//console.log(arr);
			//arr[0]();
			
			//数组中也可以放数组,如下这种数组我们称为二维数组
			arr = [[1,2,3],[3,4,5],[5,6,7]];
			console.log(arr[1]);
			
		</script>
	</head>
	<body>
	</body>
</html>

3.2 数组的方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			//创建一个数组
			var arr = ["孙悟空","猪八戒","沙和尚"];
			
			/*
			 * push()
			 * 	- 该方法可以向数组的末尾添加一个或多个元素,并返回数组的新的长度
			 * 	- 可以将要添加的元素作为方法的参数传递,
			 * 		这样这些元素将会自动添加到数组的末尾
			 * 	- 该方法会将数组新的长度作为返回值返回
			 */
			
			var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精");
			
			
			//console.log(arr);
			//console.log("result = "+result);
			
			/*
			 * pop()
			 * 	- 该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回
			 */
			result = arr.pop();
			/*console.log(arr);
			console.log("result = "+result);*/
			
			/*
			 * unshift()
			 * 	- 向数组开头添加一个或多个元素,并返回新的数组长度
			 * 	- 向前边插入元素以后,其他的元素索引会依次调整
			 */
			//console.log(arr);
			
			arr.unshift("牛魔王","二郎神");
			
			console.log(arr);
			
			/*
			 * shift()
			 * 	- 可以删除数组的第一个元素,并将被删除的元素作为返回值返回
			 */
			result = arr.shift();
			result = arr.shift();
			
			console.log(arr);
			console.log("result = "+result);
			
			
		</script>
	</head>
	<body>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
			
			/*
			 * slice()
			 * 	- 可以用来从数组提取指定元素
			 * 	- 该方法不会改变元素数组,而是将截取到的元素封装到一个新数组中返回
			 * 	- 参数:
			 * 		1.截取开始的位置的索引,包含开始索引
			 * 		2.截取结束的位置的索引,不包含结束索引
			 * 			- 第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
			 * 		- 索引可以传递一个负值,如果传递一个负值,则从后往前计算
			 * 			-1 倒数第一个
			 * 			-2 倒数第二个
			 */
			
			var result = arr.slice(1,4);
			
			result = arr.slice(3);
			
			result = arr.slice(1,-2);
			
			//console.log(result);
			
			/*
			 * splice()
			 * 	- 可以用于删除数组中的指定元素
			 * 	- 使用splice()会影响到原数组,会将指定元素从原数组中删除
			 * 		并将被删除的元素作为返回值返回
			 * 	- 参数:
			 * 		第一个,表示开始位置的索引
			 * 		第二个,表示删除的数量
			 * 		第三个及以后。。
			 * 			可以传递一些新的元素,这些元素将会自动插入到开始位置索引前边
			 * 	
			 */
			
			arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
			var result = arr.splice(3,0,"牛魔王","铁扇公主","红孩儿");
			
			console.log(arr);
			//console.log(result);
			
			
		</script>
	</head>
	<body>
	</body>
</html>

3.3 数组练习

function Person(name,age){
				this.name=name;
				this.age=age;
			}
			/*Person.prototype.toString=function(){
				return '姓名:'+this.name+"   "+'年龄:'+this.age;
			}*/
			var p1=new Person("张三",12);
			var p2=new Person("李四",14);
			var p3=new Person("王五",19);
			var p4=new Person("赵六",23);
			var arr1=[];
			var arr2=[];
			function judge(person){
				var age=person.age;
				if(age>=18){
					var len=arr1.length;
					
					arr1[len]=person;
					
				}else{
					var len=arr2.length;
					
					arr2[len]=person;
					
				}
			}
			function show(arr){
				for(var i=0;i<arr.length;i++){
					for(var j in arr[i]){
						console.log(j+":"+arr[i][j])
					}

				}
			};
			judge(p1);
			judge(p2);
			judge(p3);
			judge(p4);
			show(arr1);
			show(arr2);

4.forEach

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 一般我们都是使用for循环去遍历数组,
			 * 	JS中还为我们提供了一个方法,用来遍历数组
			 * forEach()
			 * 		- 这个方法只支持IE8以上的浏览器
			 * 			IE8及以下的浏览器均不支持该方法,所以如果需要兼容IE8,则不要使用forEach
			 * 			还是使用for循环来遍历
			 */
			
			//创建一个数组
			var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
			
			/*
			 * forEach()方法需要一个函数作为参数
			 * 	- 像这种函数,由我们创建但是不由我们调用的,我们称为回调函数
			 * 	- 数组中有几个元素函数就会执行几次,每次执行时,浏览器会将遍历到的元素
			 * 		以实参的形式传递进来,我们可以来定义形参,来读取这些内容
			 * 	- 浏览器会在回调函数中传递三个参数:
			 * 		第一个参数,就是当前正在遍历的元素
			 * 		第二个参数,就是当前正在遍历的元素的索引
			 * 		第三个参数,就是正在遍历的数组
			 * 		
			 */
			arr.forEach(function(value , index , obj){
				console.log(value);
			});
			
			
		</script>
	</head>
	<body>
	</body>
</html>

5.函数的方法

5.1 call()与apply()

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function fun(a,b) {
				console.log("a = "+a);
				console.log("b = "+b);
				//alert(this);
			}
			
			var obj = {
				name: "obj",
				sayName:function(){
					alert(this.name);
				}
			};

			/*
			 * call()和apply()
			 * 	- 这两个方法都是函数对象的方法,需要通过函数对象来调用
			 * 	- 当对函数调用call()和apply()都会调用函数执行
			 * 	- 在调用call()和apply()可以将一个对象指定为第一个参数
			 * 		此时这个对象将会成为函数执行时的this
			 * 	- call()方法可以将实参在对象之后依次传递
			 * 	- apply()方法需要将实参封装到一个数组中统一传递
			 * 
			 * 	- this的情况:
			 * 		1.以函数形式调用时,this永远都是window
			 * 		2.以方法的形式调用时,this是调用方法的对象
			 * 		3.以构造函数的形式调用时,this是新创建的那个对象
			 * 		4.使用call和apply调用时,this是指定的那个对象
			 */
			
			//fun.call(obj,2,3);
			fun.apply(obj,[2,3]);

			

			var obj2 = {
				name: "obj2"
			};

			/*fun.apply();
			fun.call();
			fun();*/

			//fun.call(obj);
			//fun.apply(obj);

			//fun();
			
			//obj.sayName.apply(obj2);
		</script>
	</head>

	<body>
	</body>

</html>

5.2 arguments

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * 在调用函数时,浏览器每次都会传递进两个隐含的参数:
			 * 	1.函数的上下文对象 this
			 * 	2.封装实参的对象 arguments
			 * 		- arguments是一个类数组对象,它也可以通过索引来操作数据,也可以获取长度
			 * 		- 在调用函数时,我们所传递的实参都会在arguments中保存
			 * 		- arguments.length可以用来获取实参的长度
			 * 		- 我们即使不定义形参,也可以通过arguments来使用实参,
			 * 			只不过比较麻烦
			 * 			arguments[0] 表示第一个实参
			 * 			arguments[1] 表示第二个实参 。。。
			 *		- 它里边有一个属性叫做callee,
			 * 			这个属性对应一个函数对象,就是当前正在指向的函数的对象
			 * 		
			 */
			
			function fun(a,b){
				//console.log(arguments instanceof Array);
				//console.log(Array.isArray(arguments));
				//console.log(arguments[1]);
				//console.log(arguments.length);
				console.log(arguments.callee == fun);
			}
			
			fun("hello",true);
			
		</script>
	</head>
	<body>
	</body>
</html>

 

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

城南皮卡丘

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值