函数function

函数function

1. 概念

image-20230228144132125

2. 函数的封装

2.1 说明

image-20230228144202482

2.2 demo

image-20230228144215065

3. 函数的使用

3.1 声明函数

image-20230228144246113

3.11 自定义函数方式(命名函数)

image-20230228144405460

3.12 函数表达式方式(匿名函数)

image-20230228144416085

3.2 调用函数

image-20230228144437379

3.3 函数相互调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script>
// 函数是可以相互调用的
// function fn1() {
// console.log(11);
// fn2(); // 在fn1 函数里面调用了 fn2 函数
// }
// fn1();

// function fn2() {
// console.log(22);

// }

function fn1() {
console.log(111);
fn2();
console.log('fn1');
}

function fn2() {
console.log(222);
console.log('fn2');
}
fn1();

//结果
//111
//222
//fn2
//fn1
</script>

4. 函数的参数

4.1 函数参数语法

image-20230228144504747

4.2 函数形参和实参数量不匹配时

image-20230228144512900

5. 函数的返回值

5.1 return 语句

image-20230228144648787

5.2 break ,continue ,return 的区别

image-20230228144656570

5.3 返回注意事项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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 666;
}
console.log(fun1()); // 返回 666
function fun2() {

}
console.log(fun2()); // 函数返回的结果是 undefined
</script>

6. arguments的使用

image-20230228144824895

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
// arguments 的使用 只有函数才有 arguments对象 而且是每个函数都内置好了这个arguments
function fn() {
// console.log(arguments); // 里面存储了所有传递过来的实参 arguments = [1,2,3]
// console.log(arguments.length);
// console.log(arguments[2]);
// 我们可以按照数组的方式遍历arguments
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
fn(1, 2, 3);
fn(1, 2, 3, 4, 5);
// 伪数组 并不是真正意义上的数组
// 1. 具有数组的 length 属性
// 2. 按照索引的方式进行存储的
// 3. 它没有真正数组的一些方法 pop() push() 等等
</script>

7. 函数案例

7.1 弹窗计算器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//
- 用户在弹出的输入框中选择要做的运算
- 用户选择后弹出两个输入框,让用户输入数据
- 根据用户选择的操作和输入的数据,计算出最后结果并弹出提示框显示结果
//
<script>
function info() {
while (info != '5') {
info = prompt('欢迎使用简易计算器' + '\n' + '1、加' + '\n' + '2、减' + '\n' + '3、乘' + '\n' + '4、除' + '\n' + '5、退出')
var num1, num2
function info2() {
num1 = parseInt(prompt('请输入第一个数'))
num2 = parseInt(prompt('请输入第二个数'))
}
if (info == '1') {
info2()
alert('和为:' + (num1 + num2))
} else if (info == '2') {
info2()
alert('差为:' + (num1 - num2))
} else if (info == '3') {
info2()
alert('积为:' + (num1 * num2))
} else if (info == '4') {
info2()
alert('商为:' + (num1 / num2))
}
}
alert('已退出,欢迎再次使用')
}
info()
</script>

7.2 求俩数之间的和

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
// 1. 利用函数求任意两个数的和
function getSum(num1, num2) {
console.log(num1 + num2);

}
getSum(1, 3);
getSum(3, 8);
// 2. 利用函数求任意两个数之间的和
function getSums(start, end) {
var sum = 0;
for (var i = start; i <= end; i++) {
sum += i;
}
console.log(sum);

}
getSums(1, 100);
getSums(1, 10);
// 3. 注意点
// (1) 多个参数之间用逗号隔开
// (2) 形参可以看做是不用声明的变量
</script>

7.3 求俩个数的最大值

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
// 利用函数 求两个数的最大值
function getMax(num1, num2) {
// if (num1 > num2) {
// return num1;
// } else {
// return num2;
// }
return num1 > num2 ? num1 : num2;
}
console.log(getMax(1, 3));
console.log(getMax(11, 3));
</script>

7.4 求一个数组中的最大值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
// 利用函数求数组 [5,2,99,101,67,77] 中的最大数值。
function getArrMax(arr) { // arr 接受一个数组 arr = [5,2,99,101,67,77]
var max = arr[0];
for (var i = 1; i <= arr.length; i++) {
if (arr[i] > max) {
max = arr[i];
}
}
return max;
}
// getArrMax([5, 2, 99, 101, 67, 77]); // 实参是一个数组送过去
// 在我们实际开发里面,我们经常用一个变量来接受 函数的返回结果 使用更简单
// var re = getArrMax([5, 2, 99, 101, 67, 77]);
var re = getArrMax([3, 77, 44, 99, 143]);
console.log(re);
</script>

7.5 利用arguments求一组数里的最大小、平均数与总和

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//请使用arguments完成函数getResult,实现得到输入的所有的数值中的最小值、最大值、平均数、总和等功能
<script>
function getResult() {
var min = arguments[0], max = arguments[0], average = 0, sum = 0;
for (var i = 0; i < arguments.length; i++) {
if (arguments[i] < min) {
min = arguments[i]
}
else if (arguments[i] > max) {
max = arguments[i]
}
sum += arguments[i]
average = parseInt(sum / arguments.length)
}
console.log('min=' + min + ', max=' + max + ', average=' + average + ', sum=' + sum);
}
getResult(15, 13, 0,11, 16, 3, 18, 14)
</script>

7.6 翻转数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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, 4, 6, 9]);
console.log(arr1);
var arr2 = reverse(['red', 'pink', 'blue']);
console.log(arr2);
</script>

7.7 冒泡排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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, 4, 2, 9]);
console.log(arr1);
var arr2 = sort([11, 7, 22, 999]);
console.log(arr2);
</script>

7.8 判断闰年

1
2
3
4
5
6
7
8
9
10
11
12
13
<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(1999));
</script>