20220302 前端学习 - JS

函数的使用

1. 函数使用分为两步：声明函数 和 调用函数
声明函数
function 函数名 () {
           //函数体
}
- function是声明函数的关键字，必须小写

代码体验：

function sayHi () {
    console.log('hi');
}
// 1. function 声明函数的关键字 全部小写
// 2. 函数是做某件事情，函数名一般是动词  例如sayHi
// 3. 函数不调用自己不执行

调用函数
函数名 (); // 通过调用函数名来执行函数体代码

• 调用函数的时候千万不能忘记加小括号！
• 口诀：函数不调用，自己不执行

注意： 声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。

1.2 函数的封装

• 函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口；
• 简单理解：封装类似于将电脑配件整合组装到机箱中（类似快递打包）

2. 函数的参数
2.1 形参和实参

function 函数名(形参1,形参2...) {  
// 在声明函数的小括号里面的是 形参 （形式上的参数）
    
}
函数名(实参1,实参2...);  // 在函数调用的小括号里面的是实参（实际的参数）

// 函数的参数可以有，也可以没有个数不限

在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用该函数是，同样也需要传递相应的参数，这些参数被称之为实参

参数	说明
形参	形式上的参数， 函数定义 的时候 传递的参数 当前并不知道是什么
实参	实际上的参数 函数调用 的时候传递的参数 实参是传递给形参的

参数的作用：在函数内部某些值不能固定，我们可以通过参数在调用函数是传递不同的值进去。

注意点：

• 多个参数用逗号隔开；
• 形参可以看做是不用声明的变量

2.3 函数形参和实参个数不匹配问题

• 如果实参个数多于形参的个数，会取到形参的个数
• 如果实参的个数小于形参个数，相当月没有取到形参的个数相当于没有接收值的变量，结果是undefined，所以建议尽量让实参的个数和形参个数相等；

参数个数	说明
实参个数等于形参个数	输出正确结果
实参个数多余形参个数	只取到形参的个数
实参个数小于形参个数	多的形参定义为undefined，结果为NaN

注意：在JavaScript中，形参的默认值为undefined。

小结：

• 函数可以带参数也可以不带参数；
• 声明函数的时候，函数名括号里面的是形参，形参的默认值为undefined；
• 调用函数的时候，函数名括号里面的是实参；
• 多个参数中间用逗号隔开；
• 形参的个数可以和实参个数不匹配，但是结果不可预计，我们尽量要匹配；

3. 函数的返回值
3.1 return 语句
有时候，我们会希望函数将值返回给调用者，此时通过使用 return 语句就可以实现。
语法格式：

function 函数名 () {
return 需要返回的结果;
}
函数名();

• 函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名() 通过return 实现的
• 只要函数遇到 return 就把后面的结果 返回给函数的调用者 函数名() = return 后面的结果
  代码验证：

function getCook(aru) {
    return aru;
}
// getCook();
console.log(getCook('芒果布丁'));
console.log(getCook('沙拉'));

3.2 return 的返回值
return 只能返回一个值。如果用逗号 隔开多个值，以最后一个为准。

3.3 函数没有 return 返回 undefined
函数都是有返回值的

• 如果有 return 则返回 return 后面的值
• 如果没有 return 则返回 undefined

3.4 break，continue，return区别

• break：结束当前的循环体（如 for、while）
• continue：跳出本次循环，继续执行下一次循环（如for、while）
• return：不仅可以退出循环，还能够返回return语句中的值，同时还可以结束当前的函数体内的代码

4. arguments的使用

当我们不确定有多少个参数传递的时候，可以用 arguments来获取。在JavaScript中，arguments实际上它是当前函数的一个内置对象。所有函数都内置一个argument对象，argument对象中存储了传递的所有参数。

arguments展示形式是一个伪数组，因此可以进行遍历，伪数组具有以下特点：

• 具有length属性
• 按索引方式储存数据
• 不具有数组的push ，pop等方法
• 只有函数才有 arguments 对象，而且是每个函数都内置好了这个arguments

5. 函数案例

函数可以调用另一个函数
因为每个函数都是独立的代码块，用于完成特殊任务，因此经常会用到函数相互调用的情况。