#|javaScript基础学习 - 10 - JavaScript函数 - 案例代码案例代码|javascript|web开发|htm

javaScript基础学习 - 10 - JavaScript函数 - 案例代码

1. 什么是函数
2. 函数的使用
3. 利用函数封装求1~100的和
4. 带参数的函数
5. 利用函数求任意两个数的和
6. 函数形参实参个数匹配
7. 函数的返回值
8. 求两个数的最大值（函数版)
9. 求数组中的最大值(函数版)
10. 函数返回值注意事项

【#|javaScript基础学习 - 10 - JavaScript函数 - 案例代码】
1. 什么是函数

Document - 锐客网 > // 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);

2. 函数的使用

> // 函数使用分为两步：声明函数和调用函数 // 1. 声明函数 // function 函数名() { //// 函数体 // } function sayHi() { console.log('hi~~'); } // (1) function 声明函数的关键字全部小写 // (2) 函数是做某件事情，函数名一般是动词 sayHi // (3) 函数不调用自己不执行 // 2. 调用函数 // 函数名(); sayHi(); // 调用函数的时候千万不要忘记加小括号

3. 利用函数封装求1~100的和

> // 利用函数计算1-100之间的累加和 // 1. 声明函数 function getSum() { var sum = 0; for (var i = 1; i <= 100; i++) { sum += i; } console.log(sum); } // 2. 调用函数 getSum(); getSum();

4. 带参数的函数

> // 1. 函数可以重复相同的代码 // function cook() { //console.log('酸辣土豆丝'); // } // cook(); // cook(); // 2. 我们可以利用函数的参数实现函数重复不同的代码 // function 函数名(形参1,形参2...) { // 在声明函数的小括号里面是形参（形式上的参数）// } // 函数名(实参1,实参2...); // 在函数调用的小括号里面是实参（实际的参数） // 3. 形参和实参的执行过程 function cook(aru) { // 形参是接受实参的aru = '酸辣土豆丝' 形参类似于一个变量 console.log(aru); } cook('酸辣土豆丝'); cook('大肘子'); // 4. 函数的参数可以有，也可以没有个数不限

5. 利用函数求任意两个数的和

> // 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) 形参可以看做是不用声明的变量

6. 函数形参实参个数匹配

> // 函数形参实参个数匹配 function getSum(num1, num2) { console.log(num1 + num2); } // 1. 如果实参的个数和形参的个数一致则正常输出结果 getSum(1, 2); // 2. 如果实参的个数多于形参的个数会取到形参的个数 getSum(1, 2, 3); // 3. 如果实参的个数小于形参的个数多于的形参定义为undefined最终的结果就是 NaN // 形参可以看做是不用声明的变量num2 是一个变量但是没有接受值结果就是undefined getSum(1); // NaN // 建议我们尽量让实参的个数和形参相匹配

7. 函数的返回值

> // 1.函数是做某件事或者实现某种功能 // function cook(aru) { //console.log(aru); // } // cook('大肘子'); // 2. 函数的返回值格式 // function 函数名() { //return 需要返回的结果; // } // 函数名(); // (1) 我们函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名() 通过return 实现的 // (2) 只要函数遇到return 就把后面的结果返回给函数的调用者函数名() = return后面的结果// 3. 代码验证 function getResult() { return 666; } getResult(); // getResult()= 666 console.log(getResult()); // function cook(aru) { //return aru; // } // console.log(cook('大肘子')); // 4. 求任意两个数的和 function getSum(num1, num2) { return num1 + num2; } console.log(getSum(1, 2));

8. 求两个数的最大值（函数版)

> // 利用函数求两个数的最大值 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));

9. 求数组中的最大值(函数版)

> // 利用函数求数组 [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);

10. 函数返回值注意事项

> // 函数返回值注意事项 // 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 则返回 undefined function fun1() { return 666; } console.log(fun1()); // 返回 666function fun2() {} console.log(fun2()); // 函数返回的结果是 undefined