JavaScript教程 - 8 函数

什么是函数呢？

先举个栗子：

假设给定两个整数，想获取其中的最大值，那么可以编写代码如下：

// 只是举个栗子，以下代码不是最简洁方式
let num1 = 24;
let num2 = 12;

let maxNum;
if (num1 > num2) {
    maxNum = num1;
} else {
    maxNum = num2;
}

console.log("较大的数为:" + maxNum); 	// 较大的数为:24

一个地方需要这个功能，我在一个地方写了这个功能的代码，100个、1000个地方需要这个功能，那就需要写1000遍。万一这个功能需要修改，修改1000个地方不得崩溃。

所以我们可以将这个功能封装为一个函数，想要使用到这个功能的时候，直接调用这个函数即可。

所以通过函数，提高代码的复用性，减少重复代码，提高开发效率。

我们前面也已经调用过一些函数，例如 console.log()、alert()、parseInt() 等，他们都实现了某些特定的功能，也就是功能进行了封装，我们只要调用就可以实现想要的功能，不用再自己编写。

在 JS 中，函数也是对象，所以函数具有对象所以的功能，而且函数还可以封装代码，提供想要的功能。

而现在我们主要学习如何自定义函数。

8.1 函数的定义

函数需要先定义，然后我们就可以调用函数了。

1 定义函数

定义函数的语法如下：

function 函数名(参数1, 参数2, ...) {  // 参数可以省略
  // 实现功能的代码
}

下面定义一个函数，函数实现的功能就是就是打印一行语句：

/**
 * 定义一个函数
 */
function sayHello() {
    alert('Hello, 欢迎来到For技术栈');
}

• 上面定义了一个函数，函数实现的功能比较简单，就是输出一句话。
• function 关键字用来定义函数，sayHello 是函数的名字，是自定义的，建议按照标识符命名规则，采用首字母小写的命名方式；
• 然后是 () ，用来指定参数，这里没有参数，后面会讲，{} 是函数体部分，可以编写函数要实现的功能。

2 函数的调用

函数已经定义好了，下面来调用函数：

/**
 * 定义一个函数
 */
function sayHello() {
  alert("Hello, 欢迎来到For技术栈");
}

// 调用函数
sayHello();

// 再次调用函数
sayHello();

• 调用函数使用 函数名(); 这样的方式来调用，函数可以调用多次，调用一次就是将函数体的代码执行一次。

执行效果如下：

3 函数的类型

查看一下函数的类型：

// 定义一个函数
function sayHello() {
  alert("Hello, 欢迎来到For技术栈");
}

console.log(typeof sayHello);  // function

• 使用 typeof 查看函数类型为 function ，typeof 操作符返回 function 并不是 object ，这只是为了区分函数和普通对象，函数只是对象类型的一种特殊形式。

4 匿名函数

上面定义函数的方式指定了函数名称，这种方式为具名函数，还有不指定函数名的函数，称为匿名函数。

举个栗子：

// 定义一个函数
let func = function() {
  alert("Hello, 欢迎来到For技术栈");
}

// 调用函数
func();

• 上面使用 function(){...} 定义了一个匿名函数，并赋值给 func 变量；
• 在调用的时候，通过变量调用即可。

5 箭头函数

ES6 引入的箭头函数，是一种更为简洁的定义函数的方式。

举个栗子：

// 定义一个函数
let func = () => {
  alert("Hello, 欢迎来到For技术栈");
}

// 调用函数
func();

• 上面通过 () => {} 的方式定义函数，并将函数赋值给变量 func，所以箭头函数也是匿名函数。

如果箭头函数的函数体只有一条语句，还可以省略 {} 。

举个栗子：

// 定义一个箭头函数
let func = () => alert("Hello, 欢迎来到For技术栈");

// 调用函数
func();

8.2 函数的参数

上面定义的函数没有参数，在实际的使用中，函数一般都有参数，例如我们之前使用的 alert('Hello'); 括号中的就是参数，通过传递不同的参数，来让函数针对不同的数据进行处理。

内容未完......

查看完整内容 →