Js函数的定义
函数:封装了一段可反复执行调用的代码块。
目标:能够让大量代码重复使用
求和
函数的命名是动词,而变量名的命名是名词
function getSum(num1, num2) { var sum = 0; for (var i = num1; i <= num2; i++) { sum = sum + i; } return sum; } console.log(getSum(1, 100)); //求~100的和 console.log(getSum(1, 1000)); //求1~1000的和 </script>
函数的应用?
1.申明函数
2.调用函数
申明函数
function 函数名() { //函数体 }
调用函数
函数名()
注意事项
- function是申明函数的关键字,必须是小写
- 函数是做某件事情,因而函数名为动词
- 函数自身不执行,必须调用能力应用
- 调用函数不要遗记加小括号呀
案例
<script> //申明函数 function sayHi() { return '尧子陌' } //调用函数 console.log(sayHi()) </script>
函数的封装
函数的封装:简略而言,就是把一个性能或多个性能以函数的形式进行封装,对外提供一个简略的函数接口。简略了解:相似于快递打包。
求1~10之间的相乘的后果
<script> function getSum(num1, num2) { var sum = 1; for (var i = num1; i <= num2; i++) { sum = sum *i; } return sum; } console.log(getSum(1, 10)); //求~10的相乘的后果 </script>
带参数的函数
- 函数的参数:形参加实参
- 形参:申明函数时,函数名前面的小括号外面的参数是形参,形参是模式上的参数。形参是为了承受理论参数传递的值。
- 实参:调用函数时,函数名前面的小括号外面的参数是实参,实参是实际上的参数。
参数:函数外部的值不固定,咱们能够通过参数调用函数传递不同的值进去
//申明函数 function 函数名(形参1,形参2...){ } //调用函数 函数名(实参1,实参2...)
<script> //申明函数 function cook(arr) { return arr } //调用函数 console.log(cook("酸辣土豆丝")) console.log(cook("香辣大白菜")) </script>
函数的参数能够有,也能够没有,依据状况而定
函数的案例
求任意两个数的和
<script> // 申明函数 function getSum(num1, num2) { return num1 + num2 } //调用函数 console.log(getSum(100, 200)) console.log(getSum(10, 20)) </script>
求任意两个数之间的和
<script> //申明函数 function getSum(star, end) { var sum = 0; for (var i = star; i <= end; i++) { sum = sum + i; } return sum } //调用函数 console.log(getSum(20, 50)) console.log(getSum(1, 100))</script>
函数形参加实参个数的匹配
函数形参加实参个数统一的状况下,则失常输入后果
<script> //申明函数 function getSum(num1, num2) { return num1 + num2 } //调用函数 console.log(getSum(10, 20))</script>
函数形参的个数小于实参的个数,则取形参的个数
<script> //申明函数 function getSum(num1, num2) { return num1 + num2 } //调用函数 console.log(getSum(1, 200, 500))</script>
函数形参的个数大于实参的个数,则后果为undefined
剖析如下
- 函数的形参能够看作是未声明的变量,后果为undefined
- 任何数值加undefind最终后果都为NaN(不是一个数值)
<script> //申明函数 function getSum(num1, num2, num3) { return num1 + num2 + num3 } //调用函数 console.log(getSum(100, 200)) //形参的个数大于实参的个数的状况下 console.log(getSum(100, 200, 500)) //形参的个数与实参的个数统一的状况下</script>
函数参数的总结
- 函数能够带参数,也能够不带参数
- 函数的参数有多个时,两头用英文状态下的逗号相隔
- 申明函数时,函数名小括号里的参数为形参,其默认值为undefined
- 调用函数时,函数名前面的小括号为实参,用来传递值给形参
- 函数的形参加实参的个数该当统一,否则后果难以预计。
函数的返回值
函数是做某件事情或实现某种性能,最终都会把后果返回给函数调用者
<script> //申明函数 function getResult() { return 520 } //调用函数 console.log(getResult())</script>
察看执行过程,在函数执行过程中,遇到retern便会把前面的后果返回给函数的调用者
求两个数之间的最大值
第一种办法:利用if语句
<script> function comParison(num1, num2) { if (num1 > num2) { return num1 } else { return num2 } } console.log(comParison(20, 50))</script>
第二种办法:利用三元表达式
<script> function comParison(num1, num2) { return num1 > num2 ? num1 : num2 } console.log(comParison(20, 50))</script>
利用函数求最大值
留神:在理论开发过程中,通常用变量接管函数的返回值
<script> function getMax(arr) { var max = arr[0]; for (var i = 0; i <= arr.length; i++) { if (max < arr[i]) { max = arr[i] } } return max } // 在理论开发中,咱们通常用一个变量来接管函数的返回值。 var result = getMax([5, 2, 22, 96, 85]) console.log(result)</script>
return 终止函数
在函数外部 retur返回的后果前面的语句不执行
<script> function getSum(num1,num2) { return num1+num2; alert("return 终止函数") //return 后果前面的代码块不会执行 } console.log( getSum(20,50))</script>
return前面只能返回一个值
<script> function getSum(num1,num2) { return num1,num2 }console.log(getSum(2,5))</script>
利用数组能够返回多个值
<script> function getSum(num1,num2) { return [num1*num2,num1/num2,num1+num2,num1- num2] } console.log(getSum(20,50))</script>
break continue nreturn的区别
- break:完结以后循环
- continue:跳出以后循环,持续下一次循环
- return:不仅能够跳出循环而且能够完结函数体内的代码,返回return前面的后果
通过榨汁机来看透函数
arguments的应用
当咱们不确定传递多少个实参的时候,能够应用arguments对象,arguments对象是函数内置的对象,存储着所有传递过去的实参
<script> function fn() { console.log(arguments); for(var i =0;i<arguments.length;i++) { return arguments[i] } } console.log(fn(20,20,50,80)) console.log(fn(20,20,50,80,100))</script>
注意事项
- arguments是伪数组,并不是真正的数组
- 具备length属性,依照索引的形式进行存储
- 不能应用真正的数组办法,如push() pop()等等
利用arguments求任意个数的最大值
- 思路如下 数组中求最大值的思路一样,只不过采纳arguments对象来获取数组中的最大值。
<script> function getMax() { // 申明一个最大变量Max var Max = 0; for(var i=0;i<arguments.length;i++) { if(Max<arguments[i]) { Max = arguments[i] } } return Max; } console.log(getMax(20,50,60)) //60 console.log(getMax(20,50,60,100)) //100 </script></script>
函数封装的案例
采纳函数封装的形式 反转任意数组
<script> function reserve(arr) { var newArr= []; for(var i = arr.length-1 ;i>=0;i--) { newArr[newArr.length] = arr[i] } return newArr } console.log(reserve([10,20,50])); console.log(reserve([10,20,50,500,4522,205]));</script>
利用函数封装的形式 实现冒泡排序
<script> function sorce(arr) { for(var i = 0;i<arr.length-1;i++){ for(var j = 0;j<arr.length-i-1;j++) { if(arr[j]>arr[j+1]) { var temp = arr[j]; arr[j] = arr[j+1]; arr[j+1] = temp } } } return arr } console.log(sorce([20,50,80,30,15,60])) console.log(sorce([200,510,880,30,195,60]))</script>
利用函数封装的形式 实现判断是否是平年
申明一把锁,如果是平年,则返回true,如果不是平年,则返回false
<script> function isRunYear(year) { var flag = false; if(year % 4 ==0 && year % 400 != 0 || year % 400 == 0) { flag = true; } return flag } console.log(isRunYear(2000)) console.log(isRunYear(2001))</script>
函数之间能够相互调用
每个函数都是一个独立的代码块,为了实现特殊任务,函数之间能够互相调用
<script> function fn1() { console.log('111') fn2() //调用fn2() } fn1() function fn2() { console.log('222'); }</script>
求下列代码的后果
<script> function fn1() { console.log(111); fn2(); console.log('fn1') } function fn2() { console.log(222); console.log('fn2') } fn1()</script>
判断以后年份的二月份有多少天?
在feBruary函数中,if判断语句中调用isRunYear函数并传参进去,如果为true,则弹出2月份有29天,如果是false,则弹出二月份有28天
<script> function feBruary() { var year = prompt("请输出以后的年份") if(isRunYear(year)) { alert('以后是平年 2月份有29天') }else { alert('以后是平年 2月份有28天') } } feBruary() //调用函数 function isRunYear(year) { var flag = false; if(year % 4 ==0 && year % 400 != 0 || year % 400 == 0) { flag = true; } return flag } console.log(isRunYear(2000)) console.log(isRunYear(2001))</script>
函数的两种申明形式
函数的第一种申明形式:function关键字申明
function fn() { console.log('hello')}fn()
函数的第二种申明形式:函数表达式申明函数
<script> var fn = function(str) { console.log(str) } fn('hello word')</script>
留神:
- fn是变量名 而不是函数名
- 申明变量和申明函数的形式差不多,只不过变量外面存储的值,函数表达式外面存储的是函数
- 函数表达式也能够传递参数