JavaScript 学习笔记(四)-JavaScript 函数

1. 函数的概念

在 JS 里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用

虽然 for 循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时就可以使用 JS 中的函数

函数：就是封装了一段 可被重复调用执行的代码块 。通过此代码块可以实现大量代码的重复使用

2. 函数的使用

1. 声明函数

语法规范：

1
2
3

function 函数名() {
  // 函数体代码
}

function 是声明函数的关键字，必须小写
由于函数一半是为了实现某个功能才定义的，所以通常将 函数名 命名为 **动词**，比如 getSum

2. 调用函数

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

调用时 不要忘记添加小括号
函数不调用，自己不执行

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

3. 函数的封装

函数的封装是把一个或者多个功能通过 函数的方式封装起来，对外只提供一个简单的函数接口

3. 函数的参数

1. 形参和实参

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

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

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

2. 实例

利用函数求任意两个数的和

function getSum(num1, num2) {
  console.log(num1 + num2);
}
getSum(999, 999); // 结果输出 1998
getSum(666, 999); // 结果输出 1665

利用函数求任意两个数之间的和

function getSums(start, end) {
  var sum = 0;
  for (var i = start; i <= end; i++) {
    sum += i;
  }
  console.log(sum);
}
// 1 - 100 之间所有数的和
getSums(1, 100); // 结果输出 5050
// 100 - 1000 之间所有数的和
getSums(100, 1000); // 结果输出 495550

3. 形参和实参个数不匹配问题

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

function sum(num1, num2) {
  console.log(num1 + num2);
}
sum(100, 200); // 形参和实参个数相等，输出正常结果
sum(100, 200, 300, 400); // 实参个数多于形参，只取到形参的个数
sum(100); // 实参个数少于形参，多的形参定义为 undefined，结果为 NaN

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

4. 函数的返回值

1. return 语句

当 JavaScript 到达 return 语句，函数将停止执行。

如果函数被某条语句调用，JavaScript 将在调用语句之后“返回”执行代码。

函数通常会计算出返回值。这个返回值会返回给调用者

// 语法格式
// 1. 函数只是实现某种功能，最终的结果需要返回给函数的调用者 函数名()
// 2. 只要函数遇到 return 就把后面的结果，返回给函数的调用者 相当于 函数名() = return后面的结果
function 函数名() {
  return 需要返回的结果;
}
函数名();

实例：

// 求任意两个数的和
function getSum(num1, num2) {
  return num1 + num2;
}
console.log(getSum(1, 2)); // 输出结果 3
console.log(getSum(5, 6)); // 输出结果 11

2. return 终止函数

return 语句之后的代码不被执行

function getSum(num1, num2) {
  return num1 + num2; // return 后面的代码不会被执行
  alert('我是不会被执行的哦！'); // 代码不执行
}
console.log(getSum(1, 2)); // 输出结果为 3，alert 语句没有被执行

3. return 的返回值

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

function fn(num1, num2) {
  return num1, num2; // 返回的结果是最后一个值
}
console.log(fn(1, 2)); // 结果返回 2

4. 函数没有 return 则返回 undefined

函数如果有 return，则返回的是 return 后面的值

函数如果没有 return，则返回 undefined

function fun1() {
  return 666;
}
console.log(fun1()); // 结果返回 666
function fun2() {}
console.log(fun2()); // 结果返回 undefined

5. break，continue，return 的区别

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

5. arguments 的使用

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

function fn() {
  console.log(arguments); // 存储了所有传递过来的实参
}
fn(1, 2, 3);

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

具有 length 属性
按索引方式存储数据
不具有数组的 push，pop 等方法

6. 函数相互调用

函数可以调用另外一个函数

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

function fn1() {
  console.log(1);
  fn2();
}
fn1(); // 输出结果为 1  2

function fn2() {
  console.log(2);
}

7. 函数的两种声明方式

利用函数关键字自定义函数（命名函数）

1 2	function fn() {} fn();

函数表达式（匿名函数）

// var 变量名 = function() {};
var fun = function () {
  console.log('我是函数表达式');
};
fun();

fun 是变量名，不是函数名
函数表达式声明方式和声明变量差不多，只不过变量存的是值，函数表达式存的是函数
函数表达式也可以进行传递参数

8. 案例

用户输入年份，输出当前年份 2 月份的天数

如果是闰年，则 2 月份有 29 天

如果是平年，则 2 月份有 28 天

function backDay() {
  var year = prompt('请输入当前年份');
  if (isLeapYear(year)) {
    alert(year + '年是闰年,2月份有29天');
  } else {
    alert(year + '年是平年,2月份有28天');
  }
}
backDay();

// 判断是否为闰年
function isLeapYear(year) {
  var flag = false;
  if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
    flag = true;
  }
  return flag;
}