前端路线--JS高阶（day03）-CFANZ编程社区

案例–发送验证码5s

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		</style>
	</head>
	<body>
		<button>点击发送验证码1</button>
		<button>点击发送验证码2</button>
	</body>
	<script type="text/javascript">
		var btns = document.querySelectorAll('button');
		for (var i = 0; i < btns.length; i++) {
			btns[i].index = i;
			btns[i].onclick = function() {
				var c = 5; //5s
				this.timer = setInterval(function() {
					//定时器中的this默认指向的是window  需要用bind改变this指向为当前的事件源
					c--;
					this.disabled = true;
					this.innerText = '还剩' + c + '秒';
					if (c == 0) {
						//禁用按钮  disabled=''  true:开启禁用  false：关闭禁用
						this.disabled = false; 
						this.innerText = '点击发送验证码1';
						clearInterval(this.timer);
					}
				}.bind(this), 1000) //用bind方法去改变this的指向，不去执行bind的方法
			}
		}
	</script>
</html>

案例–apply求数组最大值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		var arr=[2,3,6,8,10];
		//apply借助math的方法传入arr数组参数实现求最大值
		var maxNum=Math.max.apply(Math,arr);
		console.log(maxNum);
	</script>
</html>

判断数据类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		//typeOf  判断
		console.log(typeof 1);
		
		//Object.prototype.toString.call(123)  用apply()或者call
		console.log(Object.prototype.toString.call(123));
		
		//用constructor来判断
		var n=2;
		console.log(n.constructor);
	</script>
</html>

构造函数的继承

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		function Father (name,age) {
			this.name=name;
			this.age=age;
			this.say=function () {
				console.log('我在说话');
			}
		}
		function Son (name,age,sex) {
			//利用Call方法给Father的this指向改变  让父亲的属性孩子可以继承
			//缺点:会抵消原型链，不常用
			Father.call(this,name,age);
			this.sex=sex;
			this.sleep=function () {
				console.log('我在睡觉');
			}
		}
		var son=new Son('小谷',10,'女');
		son.say();
		son.sleep();
	</script>
</html>

在这里插入图片描述

新的继承方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		function Father (name,age) {
			this.name=name;
			this.age=age;
			this.say=function () {
				console.log('我在说话');
			}
		}
		function Son (name,age,sex) {
			//让构造器产生联系
			Father.call(this,name,age);
			this.sex=sex;
			this.sleep=function () {
				console.log('我在睡觉');
			}
		}
		//让原型链产生联系
		//1.子构造器的原型对象指向父构造器的实例
		//2.再将子构造器的原型对象指向子构造器
		Son.prototype=new Father();
		Son.prototype.constructor=Son;
		
		//所有的新增方法的操作放在链条底下
		Son.prototype.study=function () {
			console.log('我会学习');
		}
		
		var son=new Son('小谷',10,'女');
		son.say();
		son.sleep();
		son.study();
		console.log(son);
		
		/* 
			深度理解:
					将字构造器的原型对象  		指向-->父实例     在访问方法时子构造原型里面没有，回去父亲的本身找，再去父亲的原型对象去找
					子构造器的原型对象的原型对象	指向-->子构造器
		 
		 */
	</script>
</html>

第三种继承方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		function Father (name,age) {
			this.name=name;
			this.age=age;
			this.say=function () {
				console.log('我在说话');
			}
		}
		function Son (name,age,sex) {
			Father.call(this,name,age);
			this.sex=sex;
			this.sleep=function () {
				console.log('我在睡觉');
			}
		}
		
		//使用类式继承创建新对象实现继承
		Son.prototype=Object.create(Father.prototype,{
			constructor:{
				value:Son
			},
			fly:{
				value:function () {
					console.log('我会飞');
				}
			}
		})
		
		var son=new Son('小谷',10,'女');
		// son.say();
		console.log(son);
		// son.sleep();
	</script>
</html>

实现类式继承

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		var P={
			name:'小谷',
			sex:'男'
		}
		// Object.create(老对象,{属性:{描述}})
		//返回新对象，且新对象继承了父对象(通过__proto__)
		var xiaoxiao=Object.create(P,{
			age:{
				configurable:true,
				writable:true,
				Enumerable:true,
				value:function(){
					console.log('睡觉');
				}
			}
		});
		
		console.log(xiaoxiao);
		
		
	</script>
</html>

数组的遍历

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		var arr=[1,2,3,4,5,6,8];
		//forEach()遍历数组
		//数组.forEach(function(v,i,arr){})		v:value		i:index		arr:数组对象
		arr.forEach(function (v,i,arr) {
			console.log(v,i,arr);
		})
		
		//对数组进行遍历和处理		map()   	返回值:返回一个新数组
		var arr1=arr.map(function (v,i) {
			return v+'0';
		})
		console.log(arr1);
		
		//过滤符合条件的元素		filter()				返回值:返回一个新数组
		var arr2=arr.filter(function (v,i) {
			return v>2;
		})
		console.log(arr2);
		
		//查询是否有符合条件的数组元素						返回值:true/false
		var arr3=arr.some(function (v,i) {
			return v>2;
		})
		console.log(arr3);
		
		//查询是否全部元素符合条件							返回值:true/false
		var arr4=arr.every(function (v,i) {
			return v>8;
		})
		console.log(arr4);
		
		//查找第一个满足条件的元素							返回值:返回符合条件的第一个元素/undefined
		var arr5=arr.find(function (v,i) {
			return v>2;
		})
		console.log(arr5);
		
		//reduce(total,v,i,arr)							返回值:返回一个值
		var arr6=arr.reduce(function (total,v,i) {		
			return total+v;
		})
		console.log(arr6);
	</script>
</html>