-
函数的概念
函数:就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的使用。
-
函数的使用
函数使用分为两步: 声明函数 和 调用函数
1. 声明函数
2. 调用函数
3. 函数的封装
函数的封装是把一个或者多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口
<script>
// 利用函数计算1-100之间的累加和
// 1. 声明函数
function getSum(){
var sum = 0;
for(var i = 0; i <= 100; i++){
sum += i;
}
console.log(sum);
}
// 2. 调用函数
getSum();
</script>
-
函数的参数
1. 形参和实参
示例及注意点:
<script>
// 1. 函数可以重复相同的代码
function cook(){
console.log('番茄鸡蛋');
}
cook();
cook();
// 2. 我们可以利用函数的参数实现函数重复不同的代码
/* function 函数名(形参1, 形参2...){ // 在声明函数的小括号里面是 形参 (形式上的参数)
}
函数名(实参1, 实参2...); // 在函数调用的小括号里面是实参 (实际的参数)
*/
// 3. 形参和实参的执行过程
function cook1(aru){ // 形参是接收实参的 aru = '酸辣土豆丝'; 形参类似一个变量
console.log(aru);
}
cook1('酸辣土豆丝');
cook1('大肘子');
// 函数的参数可以有,也可以没有 参数个数不限
</script>
案例
<script>
// 1. 利用函数求任意两个数的和
function getAddNum(num1, num2){
console.log(num1 + num2);
}
addNum(1,3);
addNum(4,3);
// 2. 利用函数求任意两个数之间的和
function getSumNum(num1, num2){
var sum = 0;
for(var i = num1; i <= num2; i++){
sum += i;
}
console.log(sum);
}
sumNum(1,5);
sumNum(1,50);
// 3. 注意点
// (1) 多个参数之间用逗号隔开
// (2) 形参可以看做是不用声明的变量
</script>
2. 函数形参和实参个数不匹配的问题
注意: 在javaScript中,形参的默认值是undefined
案例
<script>
// 函数形参实参个数匹配
function getSum(num1, num2){
console.log(num1 + num2);
}
// 1. 如果实参的个数和形参的个数一致 则正常输出结果
getSum(2,3);
// 2. 如果实参的个数多于形参的个数 只取形参的个数,多于形参个数的忽略
getSum(2,6,4);
// 3. 如果实参的个数小于形参的个数
// 形参可以看做是不用声明的变量 num2 是一个变量但是没有接受值 结果是undefined
getSum(2); //NaN
// 建议 我们尽量让实参的个数和形参相匹配
</script>
3. 小结
-
函数的返回值
1. return语句
<script>
// 函数是做某件事或者实现某种功能
function cook(aru){
console.log(aru);
}
cook('大肘子');
// 2.函数的返回值格式
function 函数名(){
return 需要返回的结果;
}
函数名();
// (1) 函数只是实现某种功能, 最终的结果需要返回给函数的调用者 函数名()
// (2) 只要函数遇到return 就把后面的结果 返回给函数的调用者 函数名() = return后面的结果
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());
</script>
2. return 终止函数
return 语句之后的代码不被执行
<script>
// 函数返回值注意事项
// 1. return 终止函数
function getSum(num1, num2){
return num1 + num2; // return 后面的代码不会执行
console.log(num1);
}
var sum = getSum(1, 3);
console.log(sum);
</script>
3. return 的返回值
return 只能返回一个值。
<script>
// 函数返回值注意事项
// 1. return 终止函数
function getSum(num1, num2){
return num1 + num2; // return 后面的代码不执行
console.log(num1);
}
var sum = getSum(1, 3);
console.log(sum);
// 2. return 只能返回一个值
function fn(num1, num2){
return num1, num2; //返回的结果是最后一个值
}
console.log(fn(1, 2));
// 3. 求任意两个数的 加减乘除
function getRes(num1, num2){
return [num1+num2,num1-num2,num1*num2,num1/num2];
}
var res = getRes(2, 3); // 返回的是一个数组
console.log(res);
</script>
4. 函数没有return 返回 undefined
函数都是有返回值的
1.如果有return 则返回return 后面的值
2.如果没有return 则返回 undefined
<script>
// 函数有return 返回 return后面的值; 函数没有return返回 undefined
function fun1(){
return 666;
}
console.log(fun1()); // 返回666
function fun2(){
}
console.log(fun2()); // 返回undefined
</script>
5. break, continue, return 的区别
-
arguments的使用
<script>
// arguments 的使用 只有函数才有arguments 而且每个函数都内置了arguments
function fn(){
console.log(arguments); // 里面存储了所有传递过来的实参
console.log(arguments.length);
console.log(argument[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>
案例
<script>
// 利用函数求任意函数的最大值
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,22,35,44,55));
</script>
-
函数案例
1. 利用函数封装方式,对数组排序--冒泡排序
<script>
// 利用函数封装方式,对数组排序--冒泡排序
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([6,9,4,3]);
console.log(arr1);
</script>
2.判断闰年
<script>
// 输入一个年份,判断是否是闰年(闰年:能被4整除并且不能被100整除,或者能被400整除)
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));
</script>
3. 函数相互调用
<script>
// 函数互相调用
function fn1(){
console.log(11);
fn2(); // 在fn1 函数里面调用了 fn2 函数
}
fn1();
function fn2(){
console.log(22);
}
</script>
4. 用户输入年份,输出当前年份的2月份的天数
<script>
// 用户输入年份,输出当前年份的2月份的天数
function backDay(){
var year = prompt('请你输入年份');
if(isRunYear(year) == true){
alert('29天');
}else{
alert('28天');
}
}
backDay();
// 判断是否为闰年的函数
function isRunYear(year){
// 如果是闰年 返回true 否则返回false
var flag = false;
if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
flag = true;
}
return flag;
}
</script>
-
函数的两种声明方式
1. 利用函数关键字自定义函数(命名函数)
function fn(){
}
2. 函数表达式(匿名函数)
var 变量名 = function(aru){};
<script>
// 函数的两种声明方式
// 1. 利用函数关键字自定义函数(命名函数)
function fn(){
}
fn();
// 2. 函数表达式(匿名函数)
/* var 变量名 = function(aru){}; */
var fun = function(aru){
console.log('我是函数表达式');
}
fun('pink');
// (1) fun是变量名 不是函数名
// (2) 函数表达式声明方式跟声明变量差不多,
// (2.1)变量里面存的是值 而函数表达式存的是函数
// (3) 函数表达式也可以进行传递参数
</script>