javaScript基础学习 – 10 – JavaScript函数 – 案例代码
- 1. 什么是函数
- 2. 函数的使用
- 3. 利用函数封装求1~100的和
- 4. 带参数的函数
- 5. 利用函数求任意两个数的和
- 6. 函数形参实参个数匹配
- 7. 函数的返回值
- 8. 求两个数的最大值（函数版)
- 9. 求数组中的最大值(函数版)
- 10. 函数返回值注意事项
- 11. arguments使用
- 12. 利用函数求任意个数的最大值
- 13. 利用函数翻转数组
- 14. 利用函数冒泡排序
- 15. 利用函数判断闰年
- 16. 函数是可以相互调用的
- 17. 输出年份的2月份天数
1. 什么是函数
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"><title>Document</title><script>// 1. 求 1~100的累加和var sum = 0;for (var i = 1; i <= 100; i++) {sum += i;}console.log(sum);// 2. 求 10~50的累加和var sum = 0;for (var i = 10; i <= 50; i++) {sum += i;}console.log(sum);// 3. 函数就是封装了一段可以被重复执行调用的代码块 目的： 就是让大量代码重复使用function getSum(num1, num2) {var sum = 0;for (var i = num1; i <= num2; i++) {sum += i;}console.log(sum);}getSum(1, 100);getSum(10, 50);getSum(1, 1000);</script></head><body></body></tml>
2. 函数的使用
<script>// 函数使用分为两步： 声明函数 和 调用函数// 1. 声明函数// function 函数名() {// // 函数体// }function sayHi() {console.log(\'hi~~\');}// (1) function 声明函数的关键字 全部小写// (2) 函数是做某件事情，函数名一般是动词 sayHi// (3) 函数不调用自己不执行// 2. 调用函数// 函数名();sayHi();// 调用函数的时候千万不要忘记加小括号</script>
3. 利用函数封装求1~100的和
<script>// 利用函数计算1-100之间的累加和// 1. 声明函数function getSum() {var sum = 0;for (var i = 1; i <= 100; i++) {sum += i;}console.log(sum);}// 2. 调用函数getSum();getSum();</script>
4. 带参数的函数
<script>// 1. 函数可以重复相同的代码// function cook() {// console.log(\'酸辣土豆丝\');// }// cook();// cook();// 2. 我们可以利用函数的参数实现函数重复不同的代码// function 函数名(形参1,形参2...) { // 在声明函数的小括号里面是 形参 （形式上的参数）// }// 函数名(实参1,实参2...); // 在函数调用的小括号里面是实参（实际的参数）// 3. 形参和实参的执行过程function cook(aru) { // 形参是接受实参的 aru = \'酸辣土豆丝\' 形参类似于一个变量console.log(aru);}cook(\'酸辣土豆丝\');cook(\'大肘子\');// 4. 函数的参数可以有，也可以没有个数不限</script>
5. 利用函数求任意两个数的和
<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>
6. 函数形参实参个数匹配
<script>// 函数形参实参个数匹配function getSum(num1, num2) {console.log(num1 + num2);}// 1. 如果实参的个数和形参的个数一致 则正常输出结果getSum(1, 2);// 2. 如果实参的个数多于形参的个数 会取到形参的个数getSum(1, 2, 3);// 3. 如果实参的个数小于形参的个数 多于的形参定义为undefined 最终的结果就是 NaN// 形参可以看做是不用声明的变量 num2 是一个变量但是没有接受值 结果就是undefinedgetSum(1); // NaN// 建议 我们尽量让实参的个数和形参相匹配</script>
7. 函数的返回值
<script>// 1.函数是做某件事或者实现某种功能// function cook(aru) {// console.log(aru);// }// cook(\'大肘子\');// 2. 函数的返回值格式// function 函数名() {// return 需要返回的结果;// }// 函数名();// (1) 我们函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名() 通过return 实现的// (2) 只要函数遇到return 就把后面的结果 返回给函数的调用者 函数名() = return后面的结果// 3. 代码验证function getResult() {return 666;}getResult(); // getResult() = 666console.log(getResult());// function cook(aru) {// return aru;// }// console.log(cook(\'大肘子\'));// 4. 求任意两个数的和function getSum(num1, num2) {return num1 + num2;}console.log(getSum(1, 2));</script>
8. 求两个数的最大值（函数版)
<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>
9. 求数组中的最大值(函数版)
<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>
10. 函数返回值注意事项
<script>// 函数返回值注意事项// 1. return 终止函数function getSum(num1, num2) {return num1 + num2; // return 后面的代码不会被执行alert(\'这里不会执行！\')}console.log(getSum(1, 2)); // 3// 2. return 只能返回一个值function fn(num1, num2) {return num1, num2; // 返回的结果是最后一个值}console.log(fn(1, 2)); // 2// 3. 我们求任意两个数的 加减乘数结果function getResult(num1, num2) {return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];}var re = getResult(1, 2); // 返回的是一个数组console.log(re); // [3, -1, 2, 0.5]// 4. 我们的函数如果有 return 则返回的是 return 后面的值，如果函数没有 return 则返回 undefinedfunction fun1() {return 666;}console.log(fun1()); // 返回 666function fun2() {}console.log(fun2()); // 函数返回的结果是 undefined</script>
11. arguments使用
<script>// arguments 的使用 只有函数才有 arguments对象 而且是每个函数都内置好了这个argumentsfunction fn() {// console.log(arguments); // 里面存储了所有传递过来的实参 arguments = [1,2,3]// console.log(arguments.length);// console.log(arguments[2]);// 我们可以按照数组的方式遍历argumentsfor (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>
12. 利用函数求任意个数的最大值
<script>// 利用函数求任意个数的最大值function getMax() { // arguments = [1,2,3]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, 5, 100));</script>
13. 利用函数翻转数组
<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>
14. 利用函数冒泡排序
<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>
15. 利用函数判断闰年
<script>// 利用函数判断闰年function isRunYear(year) {// 如果是闰年我们返回 true 否则 返回 falsevar 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>
16. 函数是可以相互调用的
<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();</script>
17. 输出年份的2月份天数
<script>// 用户输入年份，输出当前年份2月份的天数function backDay() {var year = prompt(\'请您输入年份:\');if (isRunYear(year)) { // 调用函数需要加小括号alert(\'当前年份是闰年2月份有29天\');} else {alert(\'当前年份是平年2月份有28天\');}}backDay();// 判断是否为闰年的函数function isRunYear(year) {// 如果是闰年我们返回 true 否则 返回 falsevar flag = false;if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {flag = true;}return flag;}</script>
爱站程序员基地
