一、函数的概念
在S里面，可能会定义非常多的相同代码或者功能相以的代码，这些代码可能需要大量里复使用。
虽然f和循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用JS中的函数。
函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。
二、函数的使用
函数使用主要分为两步：声明函数 和 调用函数
声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。
2.1 声明函数
2.1.1 声明函数的语法结构
function 函数名() {函数体；}
2.1.2 声明函数的注意事项
- **function **声明函数的关键字 全部小写。- 函数是做某件事情，函数名一般是动词。- 函数不调用自己不执行。
2.2 调用函数
2.2.1 调用函数的语法结构
函数名() ；
2.2.2 调用函数的注意事项
- 调用函数时**不要忘记加小括号。**
2.3 函数的封装
2.3.1 函数的封装的含义
函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口
简单理解：封装类似于将电脑配件整合组装到机箱中（类似快递打包）
2.4 函数使用-案例
案例：利用函数计算1-100之间的累加和。
<script>
function getSum() {
var sum = 0;
for (var i = 1; i <= 100; i++) {
sum += i;
}
console.log(sum);
}
getSum();
</script>
三、函数的参数
3.1 形参 和 实参
3.1.1 形参 和 实参的语法结构
在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参。
形参：指形式上的参数。函数定义时传递的参数，当前是一个未知的值。
实参：实际式上的参数。函数调用时传递的参加。实参是传递给形参的。
3.1.2 形参 和 实参的语法结构
<script>
//函数的参数的语法结构
function 函数名(形参1,形参2,……) {
函数体；
}
函数名(实参1,实参2,……)
</script>
3.1.3 形参 和 实参的注意事项
形参是接收实参的，形参类似于一个变量。
函数的参数的个数不限，可有，也可以没。
3.1.4 形参 和 实参的代码验证
<script>
//代码验证：
function cook(aru) {
console.log(aru);
}
cook('凉拌菜');
cook('水煮牛肉');
cook('白切鸡');
</script>
3.2 形参 和 实参的案例
案例1：利用函数求任意两个数的和
<script>
// 1.利用函数求任意两个数的和
function getSum(num1, num2) {
console.log(num1 + num2);
}
getSum(1, 5);
getSum(5, 9)；
</script>
案例2：利用函数求任意两个数之间的和
<script>
// 2.利用函数求任意两个数之间的和
function getSum(start, end) {
var sum = 0;
for (var i = start; i <= end; i++) {
sum += i;
}
console.log(sum);
}
getSum(1, 100);
getSum(10, 50);
</script>
</body>
3.2.1 形参 和 实参的注意事项
- 多个参数之间用逗号隔开
- 形参可以看做是不用声明的变量
3.3 函数形参和实参个数不匹配问题
| 参数个数 | 说明 | | —- | —- | | 实参个数等于形参个数 | 输出正确结果 | | 实参个数多于形参个数 | 只取到形参的个数 | | 实参个数小于形参个数 | 多于的形参定义为 undefined ，最终的结果就是NaN |
注：建议尽量让实参的个数和形参相匹配。
<script>
// 函数形参 实参个数匹配
function getSum(num1, num2) {
console.log(num1 + num2);
}
// 1,如果实参的个数和形参的个数一致则正常输出结果
getSum(1, 2); //3
// 2.如果实参的个数多于形参的个数会取到形参的个数
getSum(1, 2, 3); //3
//3.如果实参的个数小于形参的个数，多于的形参定义为 undefined ，最终的结果就是NaN
getSum(1); //NaN
</script>
四、函数的返回值
4.1 return语句
有的时候，我们会希望函数将值返回给调用者，此时通过使用return语句就可以实现
4.2 return语句的语法结构
(1)函数只是实现某种功能，最终的结果需要返回给函数的调用者。函数名（）通过 return 实现的
(2)只要函数遇到 return 就把后面的结果返回给函数的调用者。函数名（）=return后面的结果
// 函数的返回值语法结构
function 函数名() {
return 需要返回的结果;
}
var 结果 = 函数名();
4.2 return语句的代码验证
<script>
//代码验证：
function cook(aru) {
return aru;
}
console.log(cook('凉拌菜'));
console.log(cook('水煮牛肉'));
console.log(cook('白切鸡'));
//求两个任意数的和
function getSum(num1, num2) {
return num1 + num2
}
console.log(getSum(1, 2));
</script>
4.2 return语句的案例练习
案例1：利用函数 求两个数的最大值
<script>
// 利用函数 求两个数的最大值
//套用if实现
function getMax(num1, num2) {
if (num1 > num2) {
return num1;
} else {
return num2;
}
}
var max=getMax(1, 3)
console.log(max);
console.log(getMax(15, 3));
//套用三元表达式实现（更简单）
function getMax(num1, num2) {
return num1 > num2 ? num1 : num2;
}
console.log(getMax(5, 8));
console.log(getMax(19, 5));
</script>
案例2：利用函数求任意一个数组中的最大值
求数组 [5,2,99,101,67,77] 中的最大数值。
<script>
//案例2：利用函数求任意一个数组中的最大值
// 求数组 [5,2,99,101,67,77] 中的最大数值。
function getArrMax(arr) {
var max = arr[0];
for (var i = 1; i <= arr.length; i++) {
if (arr[i] > max) {
max = arr[i];
}
}
return max;
}
//在我们实际开发里面，我们经常用一个变量来接受函数的返回结果使用更简单
var re = getArrMax([5, 2, 99, 101, 67, 77]);
console.log(re);
</script>
4.3 函数返回值的注意事项
（1）return 有终止函数的作用， return 语句之后的代码不被执行。
（2）return只能返回一个值。如果用证号隔开多个值，以最后一个为准。
（3）return 可以返回一个数组。
（4）函数没有return 返回undefined
<script>
//函数返回值的注意事项
//1.return终止函数
function getsum(num1, num2) {
return num1 + num2;
//return后面的代码不会被执行
alert(' 我是不会被执行的')
}
console.log(getsum(1, 2));
//2.return贝能返回一个值
function fn(num1, num2) {
return num1, num2;
//返回的结果是最后一个值
}
console.log(fn(1, 2));
//3.我们求任意两个数的加减乘数结果
function getResult(num1, num2) {
return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];
}
var re = getResult(1, 2); //返回的是一个数组
console.log(re);
//4.我们的函数如果有return则返回的是return后面的值，如果函数么有return则返回undefined
function fun1() {
//没有给 return
}
console.log(fum()); // 返回的结果是undefined
</script>
4. 4 break,continue,return的区别
- break:结束当前的循环体(如for、while)
- continue:跳出本次循环，继续执行下次循环(如for、while)
return:不仅可以退出循环，还能够返回return语句中的值，同时还可以结束当前的函数体内的代码
五、arguments的使用
5. 1 arguments 的概念
当我们不确定有多少个参数传送的时候，可以用arguments来获取。在lavaScript中，argumen心实际上它是当前函的一个内置对象，所有函数都内置了一个arguments对象，arguments对象中存储了传送的所有实参。
5. 2 arguments 的特点
arguments展示形式是一个伪数组，因此可进行遍历，伪数组具有以下特点：
。具有length属性
。按索方式储存数据
。不具有数组的push,pop等方法<script> // arguments的使用 只有函数才有 arguments 对象,而且是每个函数都内置好了 arguments function fn() { // console.log(arguments); ==>存储所有传递过来的实参以伪数组的形式展示出来 arguments=[] // console.log(arguments.length); ==> 具有length属性 // console.log(arguments[4]); ==>；在这是按索方式储存数据的，所以可以根据索引打印值。 // 可以按照数组的方式遍历 arguments for (var i=0;i<arguments.length;i++){ console.log(arguments[i]); } } fn(1,2,3,4,5);5. 2 arguments 的使用案例练习
案例1：利用函数求任意个数的最大值
<script> // 案例1：利用函数求任意个数的最大值 function getMax() { var max = arguments[0]; for (var i = 1; i < arguments.length; i++) { if (arguments[i] > max) { max = arguments[i]; } } return max; } console.log(getMax(1, 2, 3)); console.log(getMax(1, 2, 3, 4, 5)); console.log(getMax(11, 2, 34, 444, 845, 0, 100)); </script>六、函数案例
6.1 案例1：利用函数封装方式，翻转任意一个数组
<script> // 利用函数 翻转任意数组 reverse翻转 function reverse(arr) { var newArr = []; for (var i = arr.length - 1; i >= 0; i--) { newArr[newArr.length] = arr[i]; } return newArr; } var arr1 = reverse([1, 3, 5, 8, 9, 11]); console.log(arr1); var arr2 = reverse(['张飞', '赵云', '关羽', '刘备']); console.log(arr2); </script>6.2 案例2：利用函数封装方式，对数组排序-·冒泡排序
<script> //利用函数冒泡排序 sort 排序 function sort(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; } var arr1 = sort([1, 11, 6, 2, 11]); console.log(arr1); var arr2 = sort([11, 99, 222, 27, 622]); console.log(arr2); </script>6.3 案例3：判断闰年
要求：输入一个年份，判断是否是闰年(闰年：能被4整除并且不能被100整数，或者能被400整除)
<script> //利用函数判断闰年 function isRunYear(year) { // 定义如果是闰年返回 true 否则返回 false var flag = false; if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) { flag = true; } return flag; } console.log(isRunYear(2000)); console.log(isRunYear(2022)); </script>6.4 案例4：利用函数调用另外一个函数
因为每个函数都是独立的代码块，用于完成特殊任务，因此经常会用到函数相互调用的情况。
要求：用户输入年份，输出当前年份2月份的天数，如果是闰年，则2月份是29天，如果是平年，则2月份是28天。
分析：
①弹出prompt输入框，让用户输入年份，把这个值取过来保存到变量中
②使用if语句，并调用判断闰年的函数，执行大括号的代码。
③根据用户输入的年份输出结果<script> //利用函数调用另外一个函数 function backDay() { var year = prompt('请您输入年份:'); if (isRunYear(year)) { // 注意，这里调用了下面判断闰年的函数 alert('当前年份是闰年,2月份有29天'); } else { alert('当前年份是平年,2月份有28天'); } } backDay(); //判断闰年 function isRunYear(year) { var flag = false; if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) { flag = true; } return flag; } </script>七、函数的两种声明方式
7.1 利用函数关键字自定义函数（命名函数）
7.2 函数表达式 （匿名函数）
7.2.1 函数表达式的语法结构
// 函数表达式 的语法结构 var 变量名=function(){ } 变量名();7.3 函数的两种声明方式的注意事项
(1)变量名不等于函数名。
(2)函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值而函数表达式里面存的是函数。
(3)函数表达式也可以进行传递参数。
若有收获，就点个赞吧
0 人点赞
