前言
- 系列文章目录：
- 根据视频和PPT整理
- 视频及对应资料：
- JS
- 视频：JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程
- 视频对应资源(在视频简介里面)
- 链接：【https://gitee.com/xiaoqiang001/java-script.git】
- 视频对应资源(百度网盘)
- 链接：【https://pan.baidu.com/s/1q952v5mnFGR9IFjHlyn7Wg】
- 提取码：1234
1. 函数的概念
在 JS 里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。虽然 for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用 JS 中的函数。
函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。
2. 函数的使用
函数的使用分为两步：声明函数和调用函数。
2.1 声明函数
语法：
// 声明函数 function 函数名() { //函数体代码 }
注意：function 是声明函数的关键字，必须小写；由于函数一般是为了实现某个功能才定义的， 所以通常我们将函数名命名为动词，比如 getSum。
<script> // 声明函数 function sayHello() { // 函数体 console.log('hello world') } </script>
2.2 调用函数
语法：
// 调用函数 函数名(); // 通过调用函数名来执行函数体代码
注意：调用的时候千万不要忘记添加小括号；声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。
<script> // 声明函数 function sayHello() { console.log('hello world') } // 调用函数 sayHello() </script>
2.3 函数的封装
函数的封装是把实现一个或者多个功能的代码通过函数的方式封装起来，对外只提供一个简单的函数接口，在需要使用函数封装的功能时，直接调用函数即可，不用再次重复写实现功能的代码。
3. 函数的参数
参数的作用 : 在函数内部某些值不能固定，在函数声明的时候不能知道某些值具体是什么，只有在函数调用的时候才能确定，我们可以通过参数在调用函数时传递不同的值进去。
3.1 形参和实参
在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参。
形参：形式上的参数，在函数定义的时候，不知道传递的参数具体是什么。
语法：
// 带参数的函数声明 function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数，用逗号分隔 // 函数体 }
而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参。
实参：实际上的参数，在函数调用的时候传递的参数，此时知道参数的具体值。
在函数调用时，实参会传递给形参，在函数内部通过形参使用实参传递过来的值。
语法：
// 带参数的函数调用 函数名(实参1, 实参2, 实参3...);
函数的参数可以有，也可以没有，即函数参数的个数不限。
3.2 利用函数求任意两个数的和
<script> // 声明函数 function getSum(num1, num2) { console.log(num1 + num2) } // 调用函数 getSum(1, 2) getSum(3, 2) </script>
3.3 函数形参和实参个数不匹配问题
3.3.1 实参的个数等于形参的个数
如果实参的个数等于形参的个数，则正常输出结果。
<script> // 声明函数 function getSum(num1, num2) { console.log(num1 + num2) } // 调用函数 getSum(1, 2) </script>
3.3.2 实参的个数多于形参的个数
如果实参的个数多于形参的个数，则只取到形参的个数。
<script> // 声明函数 function getSum(num1, num2) { console.log(num1 + num2) } // 调用函数 // 实参的个数等于形参的个数 getSum(1, 2) // 实参的个数多于形参的个数 getSum(2, 3, 4) </script>
3.3.3 实参的个数少于形参的个数
如果实参的个数少于形参的个数，则多出来的形参的值为undefined。
在JavaScript中，形参的默认值是undefined。
<script> // 声明函数 function getSum(num1, num2) { console.log(num1 + num2) } // 调用函数 // 实参的个数等于形参的个数 getSum(1, 2) // 实参的个数多于形参的个数 getSum(2, 3, 4) // 实参的个数少于形参的个数 getSum(3) </script>
4. 函数的返回值
4.1 return 语句
函数需要将值返回给函数的调用者，此时需要通过使用 return 语句实现。
语法：
// 声明函数 function 函数名（）{ ... // 函数会将return后的值返回给函数的调用者 return 需要返回的值； } // 调用函数 变量 = 函数名(); // 此时调用函数就可以得到函数体内return的返回值
<script> // 声明函数 function getSum(num1, num2) { sum = num1 + num2 // 将计算出来的两数之和返回给函数的调用者 return sum } // 调用函数并得到函数的返回值 sum = getSum(1, 2) console.log(sum) </script>
4.2 return 终止函数
函数中的代码在执行过程中如果遇到了 return 语句，return 语句之后的代码不会被执行。
<script> // 声明函数 function getSum(num1, num2) { sum = num1 + num2 // 将计算出来的两数之和返回给函数的调用者 return sum console.log('hello world!') console.log('hello world!') } // 调用函数并得到函数的返回值 sum = getSum(1, 2) console.log(sum) </script>
4.3 return 的返回值
return 只能返回一个值。如果 return 后面的返回值是由用逗号隔开多个值组成的，则以最后一个为准。
如果需要一次性返回多个值，可以使用数组，将需要返回的多个值放入数组，然后将整个数组返回。
<script> // 声明函数 function getNum(num1, num2, num3) { return num1, num2, num3 } // 调用函数并得到函数的返回值 num = getNum(1, 2, 3) console.log(num) </script>
<script> // 声明函数 function getNums(num1, num2, num3) { return [num1, num2, num3] } // 调用函数并得到函数的返回值 nums = getNums(1, 2, 3) console.log(nums) </script>
4.4 函数没有 return 语句返回值为 undefined
函数都是有返回值的，如果有 return 语句则返回 return 后面的值，如果没有return 语句则返回 undefined。
<script> // 声明函数 function getNums(num1, num2, num3) { return [num1, num2, num3] } function fun() { console.log('fun') } // 调用函数并得到函数的返回值 nums = getNums(1, 2, 3) res = fun() console.log(nums) console.log(res) </script>
4.5 break ,continue ,return 的区别
- break ：结束当前的循环体（如 for、while）
- continue ：跳过本次循环，执行下次循环（如 for、while）
- return ：能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码
5. arguments
当我们不确定有多少个参数传递的时候，可以用 arguments 来获取传递给函数的参数。
在 JavaScript 中，arguments 实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递给函数的所有实参。
arguments展示形式是一个伪数组，因此可以进行遍历。
伪数组具有以下特点：
- 具有 length 属性
- 可以按索引方式储存数据
- 不具有数组的 push , pop 等方法
<script> // 声明函数 function fun() { console.log(arguments) console.log(arguments.length) console.log(arguments[0], arguments[1], arguments[2]) for (var i=0; i<arguments.length; i++) { console.log(arguments[i]) } } // 调用函数 fun(1, 2, 3) </script>
6. 函数可以调用另外一个函数
因为每个函数都是独立的代码块，用于完成特殊任务，我们可以在一个函数中调用另一个函数。
<script> function f1() { console.log('f1') } function f2() { console.log('f2') f1() } // 向调用 f2 函数，在 f2 函数中调用 f1 函数 f2() </script>
7. 函数的两种声明方式
7.1 利用函数关键字 function 自定义函数
语法：
// 声明定义方式 function fn() {...} // 调用 fn();
使用函数关键字 function 自定义的函数称为自定义函数，因为有函数名，所以也被称为命名函数。
调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面。因为在浏览器解析js代码时，会将使用 var function 关键字声明定义代码提到其他js代码的前面。
<script> f1() function f1() { console.log('f1') } </script>
7.2 函数表达式声明函数
语法：
// 这是函数表达式写法 var fn = function(){...} // 调用的方式，函数调用必须写到函数体下面 fn()
由于使用函数表达式声明的函数没有名字，所以这种函数也被称为匿名函数。这种方式只是声明了一个匿名函数，然后将函数赋值给变量 fn。
这个fn 里面存储的是一个函数，函数表达式方式原理跟声明变量方式是一致的。
<script> var f1 = function() { console.log('f1') } f1() </script>
函数调用的代码必须写到函数体后面。这是由于js代码在浏览器解析时会将使用 var function 关键字声明定义代码提前，但是赋值的代码并不会提前，所以这种方式声明的函数调用的代码必须写到函数体后面。如果在函数赋值前调用函数，相当于undefined()，undefined不是函数，会报错。
<script> console.log(f1) f1() var f1 = function() { console.log('f1') } </script>
![[JS]同事：这次就算了，下班回去赶紧补补内置函数，再犯肯定被主管骂](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635463/20241109/c55917b4a28342b78633c9da58d86e30.png?x-oss-process=image/resize,h_160,m_lfit)
