JavaScript-函数2

最新推荐文章于 2022-07-16 22:49:25 发布

XxSsWei

最新推荐文章于 2022-07-16 22:49:25 发布

阅读量175

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/XxSsWei/article/details/116045986

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

函数的定义与调用

function 函数名 ([参数1,参数2,``````]){
    函数体
}

函数调用实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<button id="butt">点击</button>
		<div id="demoo" style="display: none;">
			这是一个惊喜
		</div>
	</body>
	<script>
		function $(id){    //根据id获取元素对象
			return document.getElementById(id);
		}
		function show(){   //定义函数 --->  div 为显示
			$('demoo').style.display='block';
		}
		$('butt').onclick = show;
	</script>
</html>

参数设置

无参函数

无参函数适用于不需要提供任何数据即可完成指定功能的情况
```
function grett(){
    console.log('123')
}
```
注意：在自定义函数时即使函数的功能实现不需要设置参数小括号也不能够省略

有参函数

在项目开发中若函数体内的操作需要用户传递的数据此时函数的定义时需要设置形参用于接收用户调用函数时传递的实参

function manNum(a,b){
    a = parseInt(a)
    b = parseInt(b)
    return a >= b?a:b
}

函数的调用

fucntion getSum(){
    var sum = 0;
    for (i in arguments){
        sum+=arguments[i]
    }
    return sum
}
 console.log(getSum(10,20,30))

字符串大小写转换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2>大小写转换</h2>
		原数据：<input id="old" type="text" /><br/>
		操作：
		    <input type="button" value="转大写" onclick="deal('upper')" />
			<input type="button" value="转小写" onclick="deal('lower')" /><br/>
		新数据：<input id="new" type="text" />
	</body>
	<script>
		function deal(opt){
			var str=document.getElementById('old').value
			switch (opt){
				case 'upper': str=str.toUpperCase()
				 break
				case 'lower' : str=str.toLowerCase()
				 break
				
			}
			document.getElementById('new').value=str
		}
	</script>
</html>

匿名函数

匿名函数指的是没有函数名称的函数 可以有效的避免全局变量的污染以及函数名的冲突

函数表达式

var fn = function sum(num1,num2){     //定义函数表达式求和
    return num1+num2
}
fn()       //调用函数
//以上代码中  函数表达式与函数声明的定义方式几乎相同 不同的是函数表达式定义必须在调用前 且函数调用时采用的是变量名()的方式
//不能通过函数名称(sum)进行调用   
//而函数声明的方式则不限制定义与调用顺序

匿名函数

<script>
		//方式1：函数表达式中省略函数名
		var fn=function(num1,num2){
			return num1+num2;
		}
		document.write(fn(1,2))
		//方式2：自调用方式
		(function (num1+num2){
			return num1+num2;
		});
		document.write((2,3))
		//方式3：处理事件
		document.body.onclick=function(){
			alert('hi')
		}
</script>

//箭头函数
var fn1 =x =>x+2
console.log(fn1(4))
var fn2 = (x,y) =>x+y
console.log(fn2(1,2))

回调函数

<script>
		function cal(num1,num2,fn){
			return fn(num1,num2);
		}
		console.log(cal(45,55,function(a,b){
			return a+b
		}))
		console.log(cal(10,20,function(a,b){
			return a*b
		}))
</script>

在函数cal中设置了回调函数后可以根据调用时传递不同的参数(如相加的函数相乘的函数) 在函数体中特定的位置实现不同的功能

相当于在函数体内根据用户的需求完成了不同功能的定制

find()：返回数组中满足回调函数的第一个元素的值否则返回undefined
every():测试数组的所有元素时候都通过了回调函数的测试
some()：测试数组中的某些元素是都通过了由回调函数实现的测试
forEach():对数组的每个元素执行一次提供的函数
map():创建一个新数组其结果是该数组中的每个元素都调用一次提供的回调函数后返回的结果
reduce():对累加器和数组中的每个元素(从左到右) 应用一个函数将其减少为单个值
reduceRight():接受一个函数作为累加器accumulator 和数组的每个值(从右到左) 将其减少为单个值

var arr = ['a','b','c']
		arr.map(function(value,index){
			console.log(value,index)
		})
		

		//使用map 实现二维数组的转置
		var arr= [[1,2,3],[4,5,6],[7,8,9]]    //带转置的数组
		console.log(arr)
		var reverse = arr[1].map(function(col,i){ //利用i获取转置后数组元素的下标
			return arr.map(function(row){     //返回转置后新组合而成的数组元素
				return row[i]       //返回转置前数组元素的指定索引元素
			})
		})
		console.log(reverse)

嵌套与递归

函数嵌套与作用域链

嵌套函数指的是在一个函数内部存在另一个函数的声明

对于嵌套函数来言内层函数只能在外层函数作用域内执行在内层函数执行的过程中若需要引入某个变量首先会在当前作用域中寻找若未找到则继续向上一层级的作用域中寻找知道全局作用域这种链式的查询关系为作用域链

<script>
	var i =26;
	function fn1(){
		var i =24;
		function fn2(){
			function fn3(){
				console.log(i);
					}
					fn3();
				}fn2();
			}
			fn1()
</script>

递归调用

递归调用是函数嵌套调用中一种特殊的调用它指的是已给函数在其函数体内调用自身的过程这种函数称为递归函数

闭包函数

内嵌函数可以访问定义在外层函数中的所有变量和函数并包括其外层函数能访问的所有变量和函数但是在函数外部则不能访问函数的内部变量和嵌套函数此时可以用闭包来实现

所谓闭包指的就是有权访问另一函数作用域内变量（局部变量）的函数

主要用途：

可以在函数外部读取函数内部的变量
可以让变量的值始终保持在内存中

由于闭包会使得函数中的变量一直被保存在内存中内存消耗很大所以闭包的滥用可能会降低程序的处理速度造成内存消耗等问题

		<script>
			function fn(){
				var times=0;
				var c = function(){
					return ++times
				}
				return c
			}
			var count = fn()    //保存fn返回的函数  此时count就是一个闭包
			
			console.log(count())
			console.log(count())
			console.log(count())
			console.log(count())
			console.log(count())
		</script>

计算器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>整数1:<input id="num1" type="text"/></p>
		<p>整数2:<input id="num2" type="text"/></p>
		<p>
			<input type="button" value="相加" onclick="cals(add)" />
			<input type="button" value="相减" onclick="cals(sub)" />
			<input type="button" value="相乘" onclick="cals(mul)" />
			<input type="button" value="相除" onclick="cals(div)" />
		</p>
		<p>结果: <input id="result" type="text" readonly /></p>
	</body>
	<script>
		function cals(func){
			var result =document.getElementById("result")
			var num1 = parseInt(document.getElementById("num1").value)
			var num2 = parseInt(document.getElementById("num2").value)
			if(isNaN(num1)||isNaN(num2)){
				alert("请输入数字:")
				return false
			}
			result.value=func(num1,num2)
		}
		function add(num1,num2){
			return num1+num2
		}
		function sub(num1,num2){
			return num1-num2
		}
		function mul(num1,num2){
			return num1*num2
		}
		function div(num1,num2){
			if(num2==0){
				alert('除数不能为0')
				return ''
			}
			return num1/num2
		}
	</script>
</html>

XxSsWei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-函数2

函数的定义与调用function 函数名 ([参数1,参数2,``````]){ 函数体}函数调用实例：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button id="butt">点击</button> <div
复制链接

扫一扫