1.函数的概念
封装了一段可被重复调用执行的代码块,通过函数可以实现大量代码的重复使用。函数是一种数据类型。
虽然for循环语句也能实现一些简单的重复操作,但是比较具有局限性,此时我们就可以使用JS中的函数
2.函数的使用
2.1 声明函数
function 函数名(){
//函数体
}
例:
<script>
function sayHi() {
console.log('Hi');
}
//function声明函数的关键字 全部小写
//函数是做某些事情,函数名一般是动词
//函数不调用自己不执行
</script>
2.2 调用函数
sayHi();
-
函数名();
-
调用函数的时候千万不要忘记加小括号
注:声明函数本身并不执行代码,只有调用函数时才会执行函数体代码。
2.3 函数的封装
-
函数的封装是把一个或者多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口
-
简单理解:封装就类似于将电脑配件整合组装到机箱中(类似快递打包)
案例:利用函数计算1-100之间的累加和
<script>
function getSum() {
var sum = 0;
for (var i = 1; i <= 100; i++) {
sum += i;
}
console.log(sum);
}
getSum();
</script>
提问:
1、函数是做什么的?
大量代码重复使用,封装大量代码方便使用
2、声明函数用什么关键字?
function
3、如何调用函数?
函数名加上小括号。
4、封装是什么意思?
打包,将函数整合成一个整体。
3.函数的参数
3.1 形参和实参
1、函数可以重复相同的代码
<script>
function cook() {
console.log('酸辣土豆丝');
}
cook();
</script>
2 、我们可以利用函数的参数实现函数重复不同的代码
function 函数名(形参1,形参2,形参3...){//在声明函数的小括号里面是 形参(形式上的参数)
}
函数名(形参1,形参2,形参3...);//在函数电泳的小括号里面是实参(实际的参数)
3、形参和实参的执行过程
<script>
function cook(aru) {//实参是接收实参的 aru='酸辣土豆丝'
console.log(aru);
}
cook('酸辣土豆丝');//'酸辣土豆丝'实参
cook('红烧肉');
</script>
4、函数的参数可以有、可以没有个数不限
在声明函数时,可以在函数名称后面的小括号中添加一些参数,这些参数被称之为形参,而在调用该函数时,同样也需要传递相应的参数,这些参数被称之为实参。
参数 | 说明 |
---|---|
形参 | 形式上的参数,函数定义时传递的参数,当前并不知道是什么 |
实参 | 实际上的参数,函数调用时,函数用的时候传递的参数,实参是传递给形参的 |
参数的主要作用:在函数内部某些值不能固定,我们可以通过参数在调用函数时传递不同的值进去。
3.2 练习:求和
<script>
//求两个数的和
function getSum(num1, num2) {
var num1 = prompt('请输入第一个数:');
var num2 = prompt('请输入第二个数:');
alert(parseFloat(num1) + parseFloat(num2));
}
getSum();
//求两个数之间的和
function getSum(num1, num2) {
var num1 = prompt('请输入第一个数:');
var num2 = prompt('请输入累加的最后一个数:');
var sum = 0;
for (var i = parseFloat(num1); i <= parseFloat(num2); i++) {
sum += i;
}
alert(sum);
}
getSum();
</script>
注:
-
多个参数之间用逗号隔开
-
形参可以看做是不用声明的变量
3.3 函数形参和实参个数不匹配的问题
<script>
function getSum(num1, num2) {
console.log(num1 + num2);
}
//1.实参个数与形参一致 正常输出
getSum(1, 2);//3
//2.实参个数多于形参 会取到形参的个数
getSum(1, 2, 3);//3
//3.实参个数小于形参 多余的形参定义就是undefined 最终的结果就是NaN
// 形参可以看做是不用声明的变量 num2是一个变量但没有接收值 结果就是undefined
getSum(1);//NaN
</script>
参数个数 | 说明 |
---|---|
实参个数等于形参个数 | 输出正确结果 |
实参个数多于形参个数 | 只取到形参的个数 |
实参个数小于形参 | 多的形参定义为undefined,结果为NaN |
注:尽量让实参与形参的个数相匹配
3.4 小结
-
函数可以带参数也可以不带参数
-
声明函数的时候,函数名括号里面的是形参,形参的默认值为undefined
-
调用函数的时候,函数括号里面的是实参
-
多个参数之间用逗号分隔
-
形参和实参的个数可以不匹配,但是结果不可预计,我们尽量匹配
4.函数的返回值
4.1 return语句
有时候,我们希望函数将值返回给调用者,此时通过使用return语句就可以实现。
返回值:函数调用整体代表的数据;函数执行完成后可以通过return语句将指定数据返回 。
函数的返回值格式
function 函数名(){
return 需要返回的结果;
}
函数名();
-
函数只是实现某种功能,最终的结果需要返回给函数的调用者函数名() 通过return实现的
-
只要函数遇到return 就把后面的结果 返回给函数的调用者 函数名()=return后面的结果
-
代码验证:
<script>
function getResult() {
return 666;
}
// getResult();//getResult =666
console.log(getResult());
//大肘子逻辑正确时的输出写法
function cook(aru) {
return aru;
}
console.log(cook('大肘子'));
//求任意两个值的和
function getSum(num1, num2) {
return num1 + num2;
}
console.log(getSum(1, 2));
</script>
案例1:利用函数求任意两个数的最大值
<script>
// function getMax(num1, num2) {
// if (num1 > num2) {
// return num1;
// } else {
// return num2;
// }
// }
// console.log(getMax(1, 2));
function getMax(num1, num2) {
return num1 > num2 ? num1 : num2;
}
console.log(getMax(1, 2));
</script>
案例2:利用函数求任意一个数组中的最大值
求数组[5,2,99,101,67,77]中的最大值
<script>
function getMax(arr) {//接收一个数组
var max = arr[0];
for (var i = 1; i <= arr.length; i++) {
if (arr[i] > max) {
var max = arr[i];
}
}
return max;
}
re = getArrMax([5, 2, 99, 101, 67, 77]);//实参是一个数组送过去
//实际开发中,我们经常用一个变量来接收函数的返回结果 使用简单
console.log(re);//实参是一个数组
</script>
4.2 return 终止函数
-
return语句之后的代码不被执行。
<script>
function getSum(num1, num2) {
return num1 + num2;//return后面的代码不会被执行
alert('我是不会被执行的哦!');
}
console.log(getSum(1, 2));
</script>
-
return只能返回一个值,如果用逗号隔开多个值,以最后一个为准。
<script>
function getNum(num1, num2) {
return num1, num2;
}
console.log(getNum(1, 2));//返回的结果是最后一个值 2
</script>
-
求任意两个数的 加减乘除结果
<script>
function getResult(num1, num2) {
return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];
}
var re = getResult(1, 2);//返回的是个数组
console.log(re);
</script>
4.3 函数没有return返回undefined
<script>
function fun1() {
return 666;
}
console.log(fun1());//返回 666
function fun2() {
}
console.log(fun2());//返回undefined
</script>
4.4 break、continue、return的区别
-
break:结束当前的循环体(如for、while)
-
continue:跳出本次循环,继续执行下次循环(如for、while)
-
return:不仅可以退出循环,还能返回return语句中的值,同时还可以结束当前的函数体内的代码
通过榨汁机看透函数
作业:
1、写一个函数,用户输入任意两个数字的任意算数运算(简单的计算器小功能),并能弹出运算后的结果
<script>
var sever = prompt('1、两数相加\n2、两数相减\n3、两数相乘\n4、两数相除\n5、两数相余\n6.退出\n请输入序号:');
function getResult(num1, num2) {
var num1 = prompt('请输入一个数字:');
var num2 = prompt('请再输入一个数字:');
num1 = parseFloat(num1);
num2 = parseFloat(num2);
switch (sever) {
case '1':
result = num1 + num2;
break;
case '2':
result = num1 - num2;
break;
case '3':
result = num1 * num2;
break;
case '4':
result = num1 / num2;
break;
case '5':
result = num1 % num2;
break;
case '6':
break;
}
alert(result);
sever = prompt('1、两数相加\n2、两数相减\n3、两数相乘\n4、两数相除\n5、两数相余\n6.退出\n请输入序号:');
}
while (1 == 1) {
if (sever == '1') {
getResult('1');
}
if (sever == '2') {
getResult('2');
}
if (sever == '3') {
getResult('3');
}
if (sever == '4') {
getResult('4');
}
if (sever == '5') {
getResult('5');
}
if (sever == '6') {
break;
}
}
</script>
2、写一个函数,用户输出任意两个数,弹出输出最大值
<script>
function getMax(num1, num2) {
var num1 = prompt('请输入一个数字:');
var num2 = prompt('请输入另一个数字:');
num1 = parseFloat(num1);
num2 = parseFloat(num2);
if (num1 > num2) {
return num1;
} else {
return num2;
}
}
alert(getMax());
//方法二
function getMax(num1, num2) {
var num1 = prompt('请输入一个数字:');
var num2 = prompt('请输入另一个数字:');
num1 = parseFloat(num1);
num2 = parseFloat(num2);
return num1 > num2 ? num1 : num2;
}
alert(getMax());
</script>
3、写一个函数,用户输入任意三个不同数字,求最大值,并能弹出结果
<script>
function getMax(num1, num2, num3) {
var num1 = prompt('请输入第一个数字:');
var num2 = prompt('请输入第二个数字:');
var num3 = prompt('请输入第三个数字:');
num1 = parseFloat(num1);
num2 = parseFloat(num2);
num3 = parseFloat(num3);
if (num1 > num2 && num1 > num3) {
return num1;
} else if (num2 > num3) {
return num2;
} else {
return num3;
}
}
alert(getMax());
</script>
4、写一个函数,用户输入一个数判断是否为素数,并弹出值(又叫质数,只能被1和自身整除的数)
<script>
function getNum(num1) {
var num1 = prompt('请输入一个数字:');
if (num1 == 1) {
return num1 + '不是质数';
}
if (num1 == 2) {
return num1 + '是质数';
}
for (var i = 2; i <= num1; i++) {
if (num1 % i == 0) {
return num1 + '不是质数';
} else {
return num1 + '是质数';
}
}
}
alert(getNum());
</script>
5.arguments的使用
当不确定有多少个参数传递的时候,可以用 arguments 来获取。JS中,arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象,arguments 对象中存储了传递的所有实参。arguments展示形式是一个伪数组,因此可以进行遍历。
5.1arguments的使用
<script>
//只有函数才有arguments对象 而且是每个函数都内置好了arguments
function fn() {
console.log(arguments);//里面存储了所有传递过来的实参
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);
</script>
-
arguments具有伪数组,伪数组不是真正意义上的数组,伪数组具有以下特点:
-
具有length属性
-
按索引方式存储数据
- 不具有数组的push(),pop()等一些方法
案例:利用函数求任意个数的最大值
<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, 4, 5));
</script>
6.函数案例:
案例1:利用函数封装方式,翻转任意一个数组
<script>
function getOverturn() {
var arr = [];
for (var i = 0; i < arguments.length; i++) {
arr[i] = arguments[i];
arguments[i] = arguments[arguments.length - 1];
arguments[arguments.length - 1] = arr[i];
arguments.length--;
} return arguments;
}
console.log(getOverturn(1, 2, 3, 4, 5));
//方法二
function reverse(arr) {
var Newarr = [];
for (var i = arr.length - 1; i >= 0; i--) {
Newarr[Newarr.length] = arr[i];
} return Newarr;
}
var arr1 = reverse([5, 4, 3, 2, 1])
console.log(arr1);
</script>
案例2:利用函数,冒泡排序
<script>
function sort(arr) {
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - 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([5, 4, 3, 2, 1]);
console.log(arr1);
</script>
案例3:判断闰年
要求:输入一个年份,判断是否是闰年(闰年:能被4整除并且不能被100整除,或者能被400整除)
<script>
function isLeapyear(year) {
var flag = false;
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
flag = true;
}
return flag;
}
var year1 = isLeapyear(2000);
console.log(year1);
var year2 = isLeapyear(1999);
console.log(year2);
</script>
函数可以调用另外一个函数
因为每个函数都是独立的代码块,用于完成特殊任务,因此经常会用到函数的相互调用的情况。
<script>
function fn1() {
console.log(11);
fn2(); //在fn1中调用fn2的函数
}
fn1();
function fn2() {
console.log(22);
}
</script>
小练习:执行结果为?
<script>
function fn1() {
console.log(111);
fn2();
console.log('fn1');
}
function fn2() {
console.log(222);
console.log('fn2');
}
fn1();//111 222 fn2 fn1
</script>
案例4:用户输入年份,输出当前年份2月份的天数
<script>
function february() {
var year = prompt('请输入年份:');
if (isLeapyear(year)) {
alert('当前年份是闰年2月份有29天');
} else {
alert('当前年份是平年2月份有28天');
}
}
february();
//判断是否为闰年的函数
function isLeapyear(year) {
var flag = false;
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
flag = true;
}
return flag;
}
</script>
7.函数的两种声明方式
7.1 利用函数关键字自定义函数
function fn(){
}
fn();
7.2 函数表达式
var 变量名 = function() {};
<script>
var fun = function (aru) {
console.log('我是函数表达式');
console.log(aru);
}//无名的函数(匿名函数)
fun('我是神');
</script>
-
fun为变量名 不是函数名
-
函数表达式声明方式跟声明变量差不多,只不过变量里面存的是值,而函数表达式里面存的是函数
-
函数表达式也可以进行传递参数