共计 5317 个字符，预计需要花费 14 分钟才能阅读完成。
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 是变量名 而不是函数名
- 申明变量和申明函数的形式差不多，只不过变量外面存储的值，函数表达式外面存储的是函数
- 函数表达式也能够传递参数
正文完