专题 | js函数整理

快乐的高兴的学习代码中

已于 2023-01-06 13:56:41 修改

阅读量327

点赞数

分类专栏：详细知识文章标签： javascript 前端 vue.js

于 2021-01-05 16:47:24 首次发布

本文链接：https://blog.csdn.net/A123ppleQueen/article/details/109545131

版权

详细知识专栏收录该内容

45 篇文章 2 订阅

订阅专栏

函数定义

函数是一个功能体，能返回处理结果，用于封装执行重复的代码

特点：代码包括在花括号{}中，有关键词function

function(){

代码块

}

函数和循环的区别：函数在需要的地方调用，循环一次性执行完

函数表达式创建函数

变量名称就是函数名称

调用变量名（）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
	var fun=function(){
		console.log(1);
	}
	fun();
		</script>
	</body>
</html>

注意：函数声明创建的函数会提升，可以先调用再创建

函数表达式创建的函数只存在变量的提升，必须先创建再调用

普通函数

function 函数名称（）{

//代码块

}

函数名称（）；//函数调用后才能执行,函数调用几次就执行几次

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
	function student(){
		console.log("这是我创建的第一个函数");
	}
	student();
		</script>
	</body>
</html>

注：函数每调用一次，就会执行一次函数体中的代码一次

有参函数

function 函数名称（形参--参数名字自定义）{ //形参可以有多个，逗号隔开

//代码块

}

函数名称（实参值）；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
	function student(score){
		console.log(`我考了${score}分，哈哈哈`);
	}
	student(100);
		</script>
	</body>
</html>

注意：实参和形参的关系。

实参会把值传递给形参.，实参值由根据自已需要定义

形参创建但未赋值，值是underfined

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
    function cute(a,b){
		console.log(a,b);
	}
	cute();
		</script>
	</body>
</html>

实参数量多于形参数量时，依次传递

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
    function cute(a,b){
		console.log(a+b);
	}
	cute(5,5,8);
	cute(6,6,10);
		</script>
	</body>
</html>

实参数量少于形参数量时，值为NaN

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
    function cute(a,b){
		console.log(a+b);
	}
	cute(5);
	cute(6);
		</script>
	</body>
</html>

参数默认值 default

调用函数时，如果有传入的实参值，就使用传入的实参值。如果没有传入实参值，就使用默认值

function 函数名（形参=默认值，形参=默认值....{

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
    function intr(str){
		console.log(`自我介绍：${str}`);
	}
	intr("you can you up");
	intr();
	
	//默认值
	function intr(gh="i love you"){
		console.log(`自我介绍：${gh}`);
	}
	intr("you can you up");
	intr();
		</script>
	</body>
</html>

注意：当实参数和形参数对不上时，传入几个实参就改变前面几个形参值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
   function order(zhushi="鸡腿堡",xiaochi="薯条",yinliao="可乐"){
               console.log(`你点的主食是：
               主食：${zhushi},
               小吃：${xiaochi},
               饮料：${yinliao}`
               )
           }
           //测试实参和形参数量不同时，结果如何
           //默认
           order();
           //都有
           order("米饭","土豆片","雪碧");
           //想换主食
           order("大白饭");
           //想换主食和小吃
           order("稀粥","土豆条");
           //想换第三个饮料
           order("奶茶");      
		</script>
	</body>
</html>

打散 spread

当函数需要的实参值放在了一个数组中时，用spread语法先打散数组，再传参

函数名（...数组名）； //...表示打散数组再传参

要求：获取到数组中的最大值最小值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
	//Math.max Math.min可以直接获取到最大值
    console.log(Math.max(2,5,9));//9
	console.log(Math.min(2,5,9)); //2  
	//Math.max Math.min无法在数组中获取到最大值最小值
   var arr=[4,8,17,70];
   console.log(Math.max(arr)); //NaN
   console.log(Math.min(arr)); //NaN
   //使用apply属性可以获取到最大值最小值
   console.log(Math.max.apply("",arr));//70
    console.log(Math.min.apply("",arr));//4
	//打散后可以获取到
   console.log(Math.max(...arr));//70
    console.log(Math.min(...arr));//4
		</script>
	</body>
</html>

总结：...在定义函数时时收集，调用是打散

打散还可以克隆数组，合并多个数组，克隆对象，合并多个对象

克隆数组 var arr2=[...arr1];

合并多个数组合元素值var arr=[元素值，...arr1,元素值，...arr2........]

克隆一个对象var obj={...obj1};

合并多个对象和属性值

var obj3={

属性名：值，

...obj1,

属性名：值，

...obj2

......

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
	//克隆数组
	var arr1=[2,3,6,7];
	var arr2=[...arr1];
	console.log(arr2);//2,3,6,7
	//判断数组地址是否一样
	console.log(arr1==arr2);//false,这个好像是浅拷贝
	
	
	//合并数组
	var sum=[1,2,3,4,5]
	var sum2=[6,7,8]
	var sum3=[...sum,...sum2,9];
	console.log(sum3);//1,2,3,4,5,6,7,8,9
	
	//克隆对象
	var money={
		big:100000,
		much:3000
	};
	var rich={...money};
	console.log(rich);//{big: 100000, much: 3000}
	//判断对象地址是否一样
	console.log(money==rich)//false,这个好像也是浅拷贝
	
	
	//合并对象
	var meat={
		name:"beaf meat",
		age:"8"
	};
	var fowl={
		...meat,
		money:"300元",
	}
	console.log(fowl);//{name: "beaf meat", age: "8", money: "300元"}
		</script>
	</body>
</html>

函数返回值 return

return返回，将函数调用的结果返出去

如果函数中没有return,或者return后无值，返回值为underfined

return一旦执行，跳出函数，结束函数的调用,return执行后，函数执行结束，无论后面有没有其他代码。

function 函数名称（形参）{

//代码块

return 返回值；

}

函数名称（实参值）//调用,不要忘了调用这一步好吗!!!!!

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		//有return
	  function pass(a,b){
		  return a+b;
	  }
	  var s=pass(4,5);
	  console.log(`它的绩点为${s}`);//它的绩点为9
	  
	  //无return
	  function see(a,b){
	  		  a+b;
	  }
	  var s=see(5,5);
	  console.log(`它的绩点为${s}`);//它的绩点为undefined
		</script>
	</body>
</html>

注意：区别console.log 与return 返回值之间的区别

console.log是将结果显示到控制台，让别人看到，位置不变还在函数内

return将函数体内部的值运送到外部,内部的值没有了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		// return 值；返回函数内部的值
		function b(){
			b=2;
			return b;
		}
		console.log(b()); //2
		
		//return 值；返回函数内部的值
		function c(){
			c=3;
			return true;
		}
		console.log(c());//true
		
		//return 表达式；
		function e(){
			g=10;
			h=11;		
			return g+h;
		}
		console.log(e());//21
		
		//return 后无值，返回undefined
		function a(){
			a=1;
			return;
		}
		console.log(a());//undefined
		
		//函数不写return,返回undefined
		function d(){
			d=4;
		}
		console.log(d());//undefined
		
		// 注意：这里，因为我个人不知道原因，所以先搁置着。
		//d 是来源于前面的d
		function y(){
			u=8;
			return d;
		}
		console.log(y());//4
		</script>
	</body>
</html>

匿名函数----有问题

无函数名称的函数

作用：可解决去全局污染

function (){

//代码块

}

匿名函数自调用

在整个函数上加个（），在用（）调用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		//匿名函数自调用
		(function(a,b){
			return a+b
		})(3,4)
		
		</script>
	</body>
</html>

注意：全局变量一旦创建，不会自动释放！即使不再使用，也不会自动释放！所以，使用全局变量会浪费内存。

把变量var放在匿名函数自调用中，使用后就直接释放，局部变量。console.log测试

另个匿名函数自调之间必须用分号分割

回调函数-------这个例子又不懂了，致命啊

将函数名称或者匿名函数以实参的形式传递

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<script>
	//为了控制指定函数的调用
	function ran(madai){ 
	console.log('第一棒开始跑...');
	console.log('第一棒结束，准备交接棒');
	madai();
	}
	
	function dong(){
	console.log('接收到第一棒，开始跑第二棒');
	console.log('到达终点');
	}
	
	ran(dong);
	ran( function(){
	console.log('陌生人跑远了');
	});
	</script>
	</body>
</html>

箭头函数arrow

1.箭头函数就是去掉function,在（）和{}之间加=>

2.如果只有一个形参，可省略（），没有参数或者有多个参数，要用 () 括起来

3.如果函数体只有一句话，可省略{}，函数体有多行语句，用 {} 包裹起来，表示代码块

4.如果函数体中只有一行代码，并且是return形式，则可以删除大括号，只保留return后的部分

5.当箭头函数要返回对象的时候，为了区分于代码块，要用 () 将对象包裹起来，或者用return

箭头函数例子1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		//普通函数
		// function add(a,b){
		// 	console.log("我爱学习");
		// 	return a+b
		// }
		//console.log(add(2,3));
		//箭头函数
		var add=(a,b)=>{
			console.log("我也爱学习");
			return a+b
		}
		console.log(add(2,3));
		</script>
	</body>
</html>

箭头函数例子2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		//普通函数
		// function add(a,b){
		// 	return a+b
		// }
		// console.log(add(3,5));
		//箭头函数
		//这个过程省略了一部，把普通函数变为声明表达式，就是变量那里
		var add=(a,b)=>a+b
		console.log(add(3,5));
		</script>
	</body>
</html>

箭头函数例子3

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		//普通函数
	   var arr=[12,123,23,1,3,2];
	 //   arr.sort(function(a,b){
		//    return a-b
		//   });
		// console.log(arr);
		//箭头函数
		arr.sort((a,b)=>a-b);
		console.log(arr);
		</script>
	</body>
</html>

箭头函数例子4

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		//普通函数
	   var str="you can you up";
	   // str=str.replace(/\b[a-z]/g,function(kw){
		  //  return kw.toUpperCase();
	   // })
	   // console.log(str);
		//箭头函数
		str=str.replace(/\b[a-z]/g,(kw)=>kw.toUpperCase())
		console.log(str);
		</script>
	</body>
</html>

箭头函数例子5

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		//普通函数
	   var arr=["亮","然","东"]
	   // arr.forEach(function(elem){
		  //  console.log(`${elem}到`)
	   // })
	   
		//箭头函数
		arr.forEach(elem=>console.log(`${elem}到`))
		</script>
	</body>
</html>

箭头函数例子6

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		//普通函数
	    var arr=[1,2,3];
		// var arr2=arr.map(function(elem){
		// 	return elem*2
	    // })
	   //console.log(arr2);
	 
		//箭头函数
		var arr2=arr.map(elem=>elem*2)
		console.log(arr2);
		</script>
	</body>
</html>

箭头函数例子7

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		//普通函数
	    var arr=[1,2,3,4,5];
		// var sum=arr.reduce(function(box,elem){
		// 	return box+elem
		// })
	 //   console.log(sum);
	 
		//箭头函数
		var sum=arr.reduce((box,elem)=>box+elem)
		console.log(sum);
		</script>
	</body>
</html>

箭头函数例子8

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		//普通函数
	   // (function(){
		  //  var t=new Date();
		  //  console.log(`页面内容加载完成，在${t.toLocaleString()}`);
	   // })()
		//箭头函数
		(()=>{
			var t=new Date();
			 console.log(`页面内容加载完成，在${t.toLocaleString()}`);
		})()
		</script>
	</body>
</html>

箭头函数例子9

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		//普通函数
	  var t=5;
	  // var timer=setInterval(function(){
		 //  t--;
		 //  console.log(t);
		 //  if(t==0){
			//   console.log(`boom!!!`)
			//   clearInterval(timer);
		 //  }
	  // },1000)
		//箭头函数
		var timer=setInterval(()=>{
			t--;
			console.log(t);
			if(t==0){
				console.log(`boom!!!`);
				clearInterval(timer);
			}
		},1000)
		</script>
	</body>
</html>

箭头函数例子10 返回对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			// 普通函数
		const a=function(){
			return {name:"kate",age:18}
		}
		console.log(a);
		// 箭头函数 在对象外面加个小括号
		const b=()=>({name:"kate",age:18})
		console.log(b);
		// 箭头函数 在对象前加个return
		const c=()=>{return {name:"kate",age:18}}
		console.log(c);
		</script>
	</body>
</html>

箭头函数内部的this与外部的this保持一致！外部的this指谁，箭头函数内部的this就跟着指谁。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<script>
	var goods={
		name:"expert",
		friends:["财神","佛祖","灶王爷"],
		enjoy:function(){
			this.friends.forEach(function(fname){
			//this.name是访问属性 fname是参数变量不用加this
			//这里的this指向window,因为function(fname)
			console.log(`${this.name}认识${fname}`)
			})
		}
	}
	goods.enjoy();
	</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<script>
	var goods={
		name:"expert",
		friends:["财神","佛祖","灶王爷"],
		enjoy:function(){
			this.friends.forEach(function(fname){
			console.log(`${goods.name}认识${fname}`)
			})
		}
	}
	goods.enjoy();
	</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<script>
	var goods={
		name:"expert",
		friends:["财神","佛祖","灶王爷"],
		enjoy:function(){
			//箭头函数this.name的this指向this.friends.forEach的this,firends的this指向goods.enjoy
			this.friends.forEach(fname=>console.log(`${goods.name}认识${fname}`))
		}
	}
	goods.enjoy();
	</script>
	</body>
</html>

函数方法简写 enjoy:function(){}-------enjoy(){}

var 对象名={

方法名(){

...this.属性...

}

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<script>
	var goods={
		name:"expert",
		friends:["财神","佛祖","灶王爷"],
		enjoy(){
			this.friends.forEach(fname=>console.log(`${goods.name}认识${fname}`))
		}
	}
	goods.enjoy();
	</script>
	</body>
</html>

arguments函数

js中，一个函数即使不定义形参，照样可以接收任何实参值，没有限制。

用自带的arguments，自动接任何传入的实参值

通过arguments对象中的元素个数或元素内容，获得本次函数调用传入了那些实参值。

argumnets是关键字，是类数组对象

类数组对象特点，有下标，length,可以遍历

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		function student(){
			if(arguments.length==0){
				console.log(`小红是独生子女`);
			}else if(arguments.length==1){
				console.log(`小明有一个姐姐`);
			}else{
				console.log(`小华有一个姐姐和弟弟`);
			}
		}
		student();
		student(1);
		student(1,1);
		</script>
	</body>
</html>

arguments的缺点

只能默认获得所有实参值，不能有选择的获取部分实参值

arguments是类数组对象，用不了数组家的函数

剩余参数 reset

箭头函数不支持arguments，所以遇到参数个数不确定的情况下，用剩余参数代替arguments

var 函数名=（...数组名）=>{ //三点不要少

//在函数内，使用..数组名代替arguments收集值

}

求和

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<script>
	//求和
	//普通函数，普通函数支持arguments
	function add(){
		var result=0;
		for(var elem of arguments){
			result+=elem;
		}
		return result;
	}
	console.log(add(1,2,3));
	console.log(add(1,2,3,8));
	
	//箭头函数，箭头函数不支持arguments
	var add1=()=>{
		var result=0;
		for(var elem of arguments){
			result+=elem;
		}
		return result;
	}
	console.log(add1(1,2,3));
	console.log(add1(1,2,3,8));
	</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<script>
	//求和
   //箭头函数可以用剩余参数代替重载arguments
	var add=(...arr)=>{
		var result=0;
		for(var elem of arr){
			result+=elem;
		}
		return result;
	}
	console.log(add(1,2,3));
	console.log(add(1,2,3,8));
	</script>
	</body>
</html>

剩余参数的优点

可以和别的形参混搭，只放在形参列表结尾，只接住其他形参不要的实参值

返回的是数组，可以使用数组家函数

可以自定义数组名

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<script>
	function sum(name,...arr){
		console.log(`${name}的总工资是${arr.reduce((box,elem)=>box+elem)}`)
	}
	sum("小明",10000,3000,5000);
	sum("小红",9000,9000,9000);
	</script>
	</body>
</html>

闭包------这个例子也不懂

外层函数的函数作用域对象，在调用后，被内层函数引用着，无法释放，就形成了闭包

给一个函数保护一个专属的可反复使用的变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<script>
	function parent(){
	// 打算存钱，现有total
	var total=10000;
	//外层函数返回到外部
	return function (money){
	total+=money;
	console.log(`存入${money}，现有存款${total}`);
	}
	}
	//调用
	var pay=parent();
	pay(1000);
	</script>
	</body>
</html>

构造函数

专门描述同一类型的所有对象的同一结构的函数

定义构造函数，描述一类对象的统一结构

function 类型名（形参1，形参2...）{

this.新属性名=形参1；

this.新属性名=形参2；

this.新方法名=function(){.....}

}

//调用构造函数，反复创建多个相同结构的对象

var 对象名=new 类型名（属性值1，属性值2....）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<script>
	//构造函数类型名，第一个字母大写
	function Student(name,age){
		//学生必备属性
		this.name=name;
		this.age=age;
		this.intr=function(){
			console.log(`i'm ${this.name},i'm ${this.age}`)
		}
	}
	//创建两个学生对象
	var li=new Student("liming",13);
	var sui=new Student("wanghong",16);
	console.log(li,sui);
	</script>
	</body>
</html>

全局函数

函数作用域

变量的作用域针对的也是变量名字相同的情况

函数作用域针对的是函数名称相同的函数

promise------注意顺序

保证多个异步任务按照期望顺序执行

function 函数名（）{ //函数名是要执行的第一个函数

return new Promise(

function(door){

door() //写在第一个函数最后的语句后

})
}

//return...只有最后一个不用加

//调用

函数名（）.then（函数名） //函数名a按照执行顺序写

要求是李起跑，李到达终点，然后才是赵起跑，赵到达终点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<script>
	 function li(){
		 console.log(`李起跑`);
		 setTimeout(function(){
			 //5秒后自动执行
			 console.log(`李到达终点`);
		 },5000)
	 }
	   li();
	   
	 function zhao(){
		 console.log(`赵起跑`);
		 setTimeout(function(){
			 //3秒后自动执行
			 console.log(`赵到达终点`);
		 },3000)
	 }
	 zhao();
	</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<script>
	//增加一个形参,实参传值方式
	 function li(che){
		 console.log(`李起跑`);
		 setTimeout(function(){
			 //5秒后自动执行
			 console.log(`李到达终点`);
			 che();
		 },5000)
	 }
	   
	   
	 function zhao(){
		 console.log(`赵起跑`);
		 setTimeout(function(){
			 //3秒后自动执行
			 console.log(`赵到达终点`);
		 },3000)
	 }
	 //通过回调函数达成目的
	 li(function(){
		 zhao();
	 })
	</script>
	</body>
</html>

回调地狱 callback

但是当函数多了时，会形成回调地狱。

连续使用多个回调函数，导致深层的嵌套结果就叫回调地狱。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<script>
	//增加一个形参,实参传值方式
	 function li(che){
		 console.log(`李起跑`);
		 setTimeout(function(){
			 //5秒后自动执行
			 console.log(`李到达终点`);
			 che();
		 },5000)
	 }
	   
	   
	 function zhao(che){
		 console.log(`赵起跑`);
		 setTimeout(function(){
			 //3秒后自动执行
			 console.log(`赵到达终点`);
			 che();
		 },3000)
	 }
	 
	 function wang(){
		 console.log(`王起跑`);
		 setTimeout(function(){
			 //3秒后自动执行
			 console.log(`王到达终点`);
		 },3000)
	 }
	 
	 //通过回调函数达成目的
	 li(function(){
		 zhao(function(){
			 wang();
		 }
		 );
	 })
	</script>
	</body>
</html>

promise使用例子----注意顺序这里需要学习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<script>
	function li(){
		return new Promise(
		//自动赠送了一个变量，自己命名
		function(door){
			console.log(`李起跑`);
			setTimeout(function(){
				console.log(`李达到终点`)
				door()
				
		},5000)
	}
	)}
	
	    function zhao(){
			console.log(`赵起跑`);
			setTimeout(function(){
				//3秒后自动执行
				console.log(`赵到达终点`);
			},3000)
		}
	
	//调用
	li().then(zhao);
	</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<script>
	function li(){
		return new Promise(
		//自动赠送了一个变量，自己命名
		function(door){
			console.log(`李起跑`);
			setTimeout(function(){
				console.log(`李达到终点`)
				door()
				
		},5000)
	}
	)}
	
	    function zhao(){
			return new Promise(
			function(door){
				console.log(`赵起跑`);
				setTimeout(function(){
					//3秒后自动执行
					console.log(`赵到达终点`);
					door()
				},3000)
			}
			)
		}
	
	function wang(){
		console.log(`王起跑`);
		setTimeout(function(){
			//3秒后自动执行
			console.log(`王到达终点`);
		},3000)
	}
	//调用
	li().then(zhao).then(wang);
	</script>
	</body>
</html>

Promise前后任务传参

利用形参和door()传参

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<script>
	function li(){
		var bang="接力棒";
		return new Promise(
		//自动赠送了一个变量，自己命名
		function(door){
			console.log(`李起跑带着${bang}`);
			setTimeout(function(){
				console.log(`李达到终点`)
				door(bang)//将bang传递给下一个任务
				
		},5000)
	}
	)}
	
	    function zhao(bang2){
			return new Promise(
			function(door){
				console.log(`赵起跑并拿起了${bang2}`);
				setTimeout(function(){
					//3秒后自动执行
					console.log(`赵到达终点`);
					door(bang2)
				},3000)
			}
			)
		}
	
	function wang(bang3){
		console.log(`王起跑丢掉了${bang3}`);
		setTimeout(function(){
			//3秒后自动执行
			console.log(`王到达终点`);
		},3000)
	}
	//调用
	li().then(zhao).then(wang);
	</script>
	</body>
</html>

查找函数的返回值规律

如果原函数返回的是下标位置,找不到返回-1

如果原函数返回的是一个数组或一个对象，找不到返回null

如果原函数返回的1是类数组对象，找不到返回空类数组对象{length:0}

事件处理函数 dom部分

元素.on事件名=function(){}

方法

方法案列1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		var student={
			name:"赵学习",
			sex:"女",
			//方法
			paly:function(){
				console.log(this.name+"正在玩单杠");
			}
		}
		student.paly();
		</script>
	</body>
</html>

方法案列2：求圆的周长面积

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		//练习：创建一个圆对象，包含有半径和圆周率两个属性，添加计算周长和计算面积的方法，并打印结果。
		var circle={
		r:5,
		pi:3.14,
		getLength:function(){
		console.log(2*this.pi*this.r);
		},
		getArea:function(){
		console.log(this.pi*this.r*this.r);
		}
	}
		circle.getLength();
		circle.getArea();
		</script>
	</body>
</html>

方法案列3：求任意两数字的和

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		//练习：创建计算器对象，添加计算任意两个数字相加的方法，返回结果
		var calc={
		add:function(a,b){
		return a+b;
		}
	}
		console.log( calc.add(2,3) );
		</script>
	</body>
</html>

函数的防抖和节流

防抖：用户事件触发过于频繁，只要最后一次事件的触发

可以用定时器解决 debounce

节流：控制高频执行次数 throttle

es6函数方法简写

去掉：和 function

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			// 对象方法的写法1
			var a = {
				a:1,
				cute:function(){
					document.write("我爱你");
					document.write('<br/>');
				}
			}
			a.cute();
			
			// 对象方法写法2  不过我没懂为什么在vue中叫data为函数，不应该叫对象方法吗？
			// 去掉了: function
			var b = {
				b:1,
				cute(){
					document.write("我爱你");
				}
			}
			b.cute();
		</script>
	</body>
</html>

函数用法长见识系列

1. 在外部定义函数，内部赋值使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		var obj = {
			a:1,
			b:2,
			test:function () {
				console.log(this.a);
			},
			// 这里是在外部定义了一个test2函数，再赋值
	       test2:test2
		}
		
		function test2() {
			console.log(this.b);
		}
		
		obj.test();
		obj.test2();
		</script>
	</body>
</html>

不懂的例子

1

为什么test写在下面就会报错啊？？？

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			var obj = {
				a:2,
				foo:function(){
					console.log(this);
					function test(){
						console.log(this,"Test");
					}
					// 好神奇，这个test写在obj.foo下面会报错
					test();
				}
			}
			obj.foo();
			// test()
		</script>
	</body>
</html>

2.这个是闭包

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			var obj = {
				a:2,
				foo:function(){
					console.log(this);
					
					function test(){
						console.log(this);
					}
					return test;
				}
			}
			obj.foo();
		</script>
	</body>
</html>

快乐的高兴的学习代码中

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
专题 | js函数整理

1.函数定义：函数是一个功能体，能返回处理结果，用于封装执行重复的代码特点：代码包括在花括号{}中，有关键词function eg:function(){代码块}函数和循环的区别：函数在需要的地方调用，循环一次性执行完函数分类1.普通函数 function 函数名称（）{ //代码块 }函数调用后才能执行函数名称（）；调用几次函数就执行几次eg:function student(){console.log("这...
复制链接

扫一扫

专栏目录