函数
Js函数的定义：封装了一段可重复执行调用的代码块。
目的：可以让大量代码重复使用
函数的体验
函数之求和
函数名的命名是动词，而变量名的命名是名词
<script>
function getSum(num1, num2) {
var sum = 0;
for (var i = num1; i <= num2; i++) {
sum = sum + i;
}
return sum;
}
console.log(getSum(1, 100)); //求~100的和
console.log(getSum(1, 1000)); //求1~1000的和
</script>
函数的使用
- 声明函数
- 调用函数
声明函数
function 函数名() {
//函数体
}
调用函数
函数名()
注意事项
- function是声明函数的关键字，因此必须是小写
- 函数是做某件事情，因此函数的命名为动词
- 函数本身不执行，必须要调用才能执行
- 调用时千万不要忘记加小括号
函数的简单使用
<script>
//声明函数
function sayHi() {
return '尧子陌'
}
//调用函数
console.log(sayHi())
</script>
函数的封装
简单而言，就是把一个功能及多个功能以函数的方式进行封装，对外提供一个简单的函数接口。
简单理解：类似于快递打包
函数的封装之求1~10之间的累乘
<script>
function getSum(num1, num2) {
var sum = 1;
for (var i = num1; i <= num2; i++) {
sum = sum *i;
}
return sum;
}
console.log(getSum(1, 10)); //求~10的相乘的结果
</script>
函数的参数
- 函数的参数：形参与实参
- 声明函数时，函数名后面的小括号里面的参数被称为形参，形参是形式上的参数，是为了接收实参传递过来的值。
- 调用函数时，函数名后面的小括号里面的参数被称为实参。
- 函数内部的值不确定，可以通过实参传递不同的值进去
- 函数的参数可有可无
函数案例
函数案例之任意两个数的和
<script>
// 声明函数
function getSum(num1, num2) {
return num1 + num2
}
//调用函数
console.log(getSum(100, 200))
console.log(getSum(10, 20))
</script>
函数案例求任意两个数之间的和
<script>
//声明函数
function getSum(star, end) {
var sum = 0;
for (var i = star; i <= end; i++) {
sum = sum + i;
}
return sum
}
//调用函数
console.log(getSum(20, 50))
console.log(getSum(1, 100))
</script>
函数的形参与实参之个数的匹配
函数的形参与实参之个数一致的情况下
函数的形参与实参个数一致的情况下，则正常输入结果
<script>
//声明函数
function getSum(num1, num2) {
return num1 + num2
}
//调用函数
console.log(getSum(10, 20))
</script>
函数的实参的个数大于形参的情况下
函数形参的个数小于实参的个数，则取形参的个数为准
<script>
//声明函数
function getSum(num1, num2) {
return num1 + num2
}
//调用函数
console.log(getSum(1, 200, 500))
</script>
函数的形参大于实参的情况下
函数形参的个数大于实参的个数，则结果为NaN
注意事项
- 函数的形参可以看做未赋值的变量，值为undefined;
- undefined加任何数值，最终结果都为NaN(非数值)
<script>
//声明函数
function getSum(num1, num2, num3) {
return num1 + num2 + num3
}
//调用函数
console.log(getSum(100, 200)) //形参的个数大于实参的个数的情况下
console.log(getSum(100, 200, 500)) //形参的个数与实参的个数一致的情况下
</script>
函数参数的总结
- 函数可以带参数，也可以不带参数
- 函数有多个参数时，中间以英文状态下的逗号相隔
- 声明函数时，函数后面的小括号里面的参数为形参，其默认值为undefined
- 调用函数时，函数后面的小括号里面的参数为实参
- 参数的形参与实参应当一致，否则结果难以预计。
函数的返回值
函数是为了实现某件事情或某种功能，最终都会将返回值返回给函数的调用者。
在函数的执行过程，遇到return便会把后面的结果返回给函数调用者。
<script>
//声明函数
function getResult() {
return 520
}
//调用函数
console.log(getResult())
</script>
函数的返回值求两个数之间的最大值
第一种:利用if语句
<script>
function comParison(num1, num2) {
if (num1 > num2) {
return num1
} else {
return num2
}
}
console.log(comParison(20, 50))
</script>
第二种:利用三元表达式
<script>
function comParison(num1, num2) {
return num1 > num2 ? num1 : num2
}
console.log(comParison(20, 50))
</script>
函数的返回值求数组最大值
在实际开发中，通常用变量来接收函数的返回值
<script>
function getMax(arr) {
var max = arr[0]
for (var i = 0; i < arr.length; i++) {
if (max <= arr[i]) {
max = arr[i]
}
}
return max;
}
var result = getMax([5, 10, 52, 38, 98,69]);
console.log(result);
</script>
return
return:终止函数
return后面的语句将不会被执行
<script>
function getSum(num1, num2) {
return num1 + num2;
alert('hello word')
}
getSum(10, 20);
console.log(getSum(10, 20));
</script>
return后面只能返回一个值
<script>
function fn(num1, num2) {
return num1, num2
}
console.log(fn(20, 50));
</script>
return之利用数组可以返回多个值
<script>
function fn(num1, num2) {
return [num1 * num2, num1 / num2, num1 - num2, num1 + num2]
}
console.log(fn(20, 50));
</script>
break continue return的区别
- break:结束当前循环
- continue:结束当前循环，继续进行下次循环
- return:不进可以跳出循环并且结束函数体内的代码，将结果返回给函数的调用者
通过榨汁机看透函数
arguments的使用
当我们不确定有多少实参的时候，可以使用arguments对象，arguments是函数的内置对象，存储所有传递所有传递过来的实参。
<script>
function fn() {
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
fn(5, 20, true, false, '李小龙', '张飞');
</script>
注意事项
- arguments是伪数组，并不是真正意义上的数组
- arguments具有length属性，按照索引的方式进行排序
- arguments不能使用真正的数组方法，如push,pop
利用arguments求数组中的最大值
思路：求数组的最大值的思路一致
<script>
function fn() {
//声明一个最大值变量max
var max = 0;
for (var i = 0; i < arguments.length; i++) {
if (max < arguments[i]) {
max = arguments[i]
}
}
return max
}
var result = fn(2, 5, 15, 20, 25, 85, 55, 64);
console.log(result);
</script>
函数封装案例
函数封装案例之翻转任意数组
<script>
function reserve(arr) {
var newArray = [];
for (var i = arr.length - 1; i >= 0; i--) {
newArray[newArray.length] = arr[i]
}
return newArray;
};
console.log(reserve([20, 50, 60, 80, 100]));
</script>
函数封装之实现冒泡排序
<script>
function fn(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
}
console.log(fn([20, 80, 15, 2, 69, 35]));
</script>
利用函数封装的方式判断闰年及平年
声明一把锁，如果是闰年，则返回true，如果不是闰年，则返回false
<script>
function isRunYear(year) {
var flag = false;
if (year % 4 == 0 && year % 400 != 0 || year % 400 == 0) {
flag = true;
}
return flag
}
console.log(isRunYear(2000))
console.log(isRunYear(2001))
</script>
函数之间之相互调用
每个代码都是一个特殊的代码块，为了完成特殊的任务，函数之间可以相互调用
<script>
function fn1() {
console.log(111);
fn2()
}
fn1();
function fn2() {
console.log(222);
}
</script>
函数之相互调用的案例
<script>
function fn1() {
console.log(111);
fn2();
console.log('fn1')
}
function fn2() {
console.log(222);
console.log('fn2')
}
fn1()
</script>
函数之间相互调用之求二月份的天数
在feBruary函数中，if判断语句中调用isRunYear函数并传参进去，如果为true，则弹出2月份有29天，如果是false，则弹出二月份有28天
<script>
function feBruary() {
var year = prompt("请输入当前的年份")
if(isRunYear(year)) {
alert('当前是闰年 2月份有29天')
}else {
alert('当前是平年 2月份有28天')
}
}
feBruary() //调用函数
function isRunYear(year) {
var flag = false;
if(year % 4 ==0 && year % 400 != 0 || year % 400 == 0) {
flag = true;
}
return flag
}
</script>
函数的两种声明方式
function关键字声明
<script>
function fn(str) {
console.log(str);
}
fn('hello')
</script>
函数表达式声明函数
<script>
var fn = function(str) {
console.log(str)
}
fn('hello word')
</script>
注意
- fn是变量名，不是函数名
- 声明函数和声明变量的方式差不多，只不过一个存储的是变量，一个存储的是函数
- 函数表达式也可以传递参数。