JavaScript基础_day4
==函数==
函数的概念
函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用
函数介绍
* 函数是一种结构，使用 function 关键字声明
* 函数不会自动运行
* 函数定义后，需要主动调用才会触发
// 1，声明函数，将代码存入结构中
function 函数名() {
函数体：一段代码
}
// 2，调用函数，执行函数体代码
函数名();
* 调用的时候千万不要忘记添加小括号
* 口诀：函数不调用，自己不执行
注意：声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码
函数的封装
* 函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口
* 简单理解：封装类似于将电脑配件整合组装到机箱中（类似快递打包）
例子：封装计算1-100累加和
// 计算1-100之间的函数
// 声明函数
function getSum () {
let sumNum = 0; // 准备一个变量，保存数字和
for (let i = 0; i<= 100; i++) {
sumNum += i; // 把每个数值都累加 到变量中
}
alert(sumNum);
}
//调用函数
getSum();
-函数参数
* 参数的母的是让函数能够变得灵活，可以完成不同的，但是功能类似的需求
* 函数参数分为两种：
# 形参：定义函数时的参数，属于占座位
# 实参：调用函数时的参数，属于实际数据
* 函数不会自动运行：所以先占位；调用时就是要实际运行，所以给数据
参数的作用：在函数内部某些值不能固定，我们可以通过参数在调用函数传递不同的值进去。
函数参数的运用
// 袋参数的函数声明
function 函数名 (形参1，形参2，形参3....) {
// 可以定义任意多的参数，用逗号分隔
// 函数体
}
// 带参数的函数调用
函数名(实参1，实参2，实参3....)；
1，调用的时候实参值是传递给形参的
2，形参简单理解为：不用声明的变量
3，实参和形参的多个参数之间用逗号 （,）分隔
函数形参和实参数量不匹配是
| 参数个数 | 说明 |
| 实参个等于形参个数 | 输出正确结果 |
| 实参个数多于形参个数 | 只取形参的个数 |
| 实参个数小于形参个数 | 多的形参定义为 undefined ，结果为 NaN |
注意：在JavaScript 中，形参的默认值是undefined。
小结：
* 函数可以带参数也可以不带参数
* 声明函数的时候，函数名括号里的是形参，形参的默认值为 undefined
* 调用函数的时候，函数名括号里面的是实参
* 多个参数中间用逗号分隔
* 形参的个数可以和实参个数不匹配，但是结果不可预计，我们尽量要匹配
==函数的返回值=
* 返回值是函数运行后的结果处理方式
* 实际开发过程中，不会再函数内部进行输出，都是把结果返回给调用者
# 函数不对结果负责：函数只负责做，至于做出来是否合适不管
* return 关键字
# JS函数可以没有返回值
#可以使用return 返回任意类型数据
# return 会终止函数的继续执行，（结束函数运行）
返回值：函数调用整体代表的数据，函数执行完成后可以通过return 语句将指定数据返回。
// 声明函数
function 函数名 () {
....
return 需要返回的值
}
// 调用函数
函数名(); //此时调用函数就可以得到函数整体内 return 后面的值
* 在使用 return 语句时，函数会停止执行，并返回指定的值
* 如果函数没有 return 返回的值是 undefined
break 、 continue 、 return 的区别
* break：结束当前的循环体（如 for、while）
* continue：跳出本次循环，继续执行下次循环（如for、while）
* return：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码
-arguments关键字
-
-
2.为什么要有arguemnts关键字
-
js是一门弱语言：声明函数的时候假如只有一个形参，实际上在调用的时候无论我们传入多少实参程序都不会报错
-
为了防止这种情况:函数有一个arguments关键字来获取所有的实参
-
-
3.arguments特点
-
1.只能在函数体中使用，在函数外使用会报错
-
2.是一个特殊的数组（伪数组）
-
有数组的三要素，但是没有数组其他的方法
-
-
3.arguemngs数组中的元素与形参一一对应
-
-
4.arguements好处:可以让函数变得更加灵活
-
可以让函数根据实参的不同而实现不同的功能
-
arguments 的使用
当不确定有多少个参数传递的时候，可以用arguments 来获取，JavaScript 中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments 对象，arguments 对象中存储了传递的所有参数。arguments展示形式是一个伪数组，因此可以进行遍历，伪数组具有以下特点：
1，具有length 属性
2，按索引方式存储数据
3，不具有数据的 push , pop 等方式
注意：在函数内部使用该对象，用此对象获取函数调用时传的实参。
函数内部可以调用另一个函数，在同一作用域代码中，函数名即代表封装的操作，使用函数名加括号即可以将封装的操作执行
函数另一种声明方式
1，函数声明： function 函数名（） {} ；
// 声明定义方式
function fn () {....}
// 调用
fn();
2，函数表达式：let 函数名 = 匿名函数
* 匿名函数：函数的字面量又称为匿名函数，顾名思义就是没有变量名的函数
* let 函数名 = function（） {}；
// 这是函数方式写法，匿名函数后面跟跟分号结束
let fn = function () {...};
//调用的方式，函数调用必须写到函数整体下面
fn();
* 因为函数没有名字，所以也被称为匿名函数
* 这个fn 里面存储的是一个函数
* 函数表达方式原理跟声明变量方式是一致的
3，两者唯一的区别：函数声明可以在任何地方调用，而函数表达式方式调用必须在声明后面
-回调函数
1，什么是回调函数，如果一个函数的参数也是一个函数，那么这个参数函数就叫做回调函数
2，为什么要有回调函数？
* 当一个函数调用执行完毕之后，我想执行另一段代码块，也就是调用另一个函数
* 但是有时候可能本函数执行完毕后，根据不同的情况需要调用的函数也不同，那么我们可以使用形参来接收这个函数，然后再调用
* 此时： 这个形参函数就称之为回调函数
<script>
//回调函数：如果一个函数的参数也是一个函数，那么这个参数函数就叫做回调函数
//回调函数在什么地方会执行呢？ 函数名() 的时候执行
//回调函数难点： 本质是一个参数
//谁来传：调用者传参 （函数名）
//谁来收,调用：函数调用 （函数执行完函数体之后，调用保存在这个参数中的一段代码）
function a ( ) {
console.log ( "哈哈" );
}
function b ( ) {
console.log ( "呵呵" );
}
//c函数有一个功能，可以接收调用者传递过来的一段代码，并且在执行完自身函数体之后，会帮调用者执行这一段代码
function c ( fn ) {
console.log ( "嘿嘿" );
//fn里面是调用者传递过来的一段代码，怎么让这段代码执行呢？
fn();
};
//调用函数c，传的是变量a中存储的一段代码
c(a);
c(b);
// 注意：回调函数是将函数的代码传递给形参，让函数内部调用
// 注意：在传递实参给形参的时候，如果是要回调函数，那么只要传入函数名字（此时不掉用，函数内部调用）：c(a)，fn = a
// 如果在传入实参的时候，给函数名增加了括号：c(a())，此时表示将a函数先执行，然后将a()函数的返回值，传递给形参fn = a()
</script>
实际应用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/**
* 求和，可以实现1到N次方的数组元素的求和
* @param {array} 要求和的数组
* @param {function} 要调用的外部方法（求N次方）
* @return sum，数组所有元素的N次方的和
*/
function getSum(arr, fn) {
//定义变量保存结果
let sum = 0;
//遍历数组
for (let i = 0; i < arr.length; i++) {
//拿到的元素需要使用fn加工
sum += fn(arr[i]);
}
//返回结果
return sum;
}
/**
* 求平方
* @param {number} num，要求平方的数据
* @return res，num的平方
*/
function fn1(num) {
return num * num;
}
/**
* 求立方
* @param {number} num，要求平方的数据
* @return res，num的平方
*/
function fn2(num) {
return num * num * num;
}
//定义数组
let arr = [1, 2, 3];
// 求数组的所有元素的平方和
console.log(getSum(arr, fn1));
//求数组的所有元素的立方和
console.log(getSum(arr, fn2));
//匿名函数回调应用：求数组的所有元素的四次方和
console.log(getSum(arr, function (num) { return Math.pow(num, 4) }));
//等价于
/*
function getSum(arr, fn) {
//定义变量保存结果
let sum = 0;
fn = function (num) { return Math.pow(num, 4) };
//遍历数组
for (let i = 0; i < arr.length; i++) {
//拿到的元素需要使用fn加工
sum += fn(arr[i]);
}
//返回结果
return sum;
}
*/
//匿名回调函数的优势：用后即焚，不占用内存
</script>
</body>
</html>
-自调用函数
1，什么是自调用函数： 函数自己调用自己
* 最常见的：匿名函数自调用
2，自调用函数作用
* 开辟作用域，js中只有函数才可以开辟作用域：防止全局污染
3，匿名函数自调用语法：( function () {} ) ()
* 将整个函数使用小括号包裹，然后再后面再加上小括号调用
<script>
/*自调用函数：函数自己调用自己
* 最常见的：匿名函数自调用
*/
//作用：开辟作用域，js中只有函数才可以开辟作用域
//匿名函数相当于字面量函数,由于没有函数名，所以只能在声明的同时调用
//语法： ( function(){} ) () 将整个函数使用小括号包裹，然后在后面再加上小括号调用
(function ( ) {
console.log ( "我是匿名函数" );
})();
//补充：其实有名字的函数也可以自己调用自己，只是比较少见
(function test( ) {
console.log ( "我是有名字的函数，我也可以自调用" );
})();
//自调用作用：暂时因为知识点不足以支撑案例使用，等后面讲到WebAPI的时候可以用到
</script>
浙公网安备 33010602011771号