初学者这样学习 javascript 函数就对了（通俗易上手）

文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 JavaScript 的部分，瑶琴会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。

在平时的编码中，函数的调用和封装是必不可少的一部分，用一个通俗的例子来解释函数，函数就像是一张食谱，它接受原料（参数），经过定义的步骤进行处理，最后得到一个结果（输出）。

函数是一种封装机制，它允许你将一组相关的代码块组织在一起，形成一个单一的功能单元。这有助于提高代码的可维护性，本篇会的详细介绍到函数的定义、调用，以及如何使用函数。跟着瑶琴一起来学习吧。

1.函数的作用

封装：函数允许你将代码块封装在一个单一的单元中，这有助于提高代码的可维护性和可读性。

重用：你可以多次调用同一个函数，实现代码的重用。

参数传递：函数可以接收参数，允许你在调用时向函数传递数据。

返回值：函数可以返回值，这使得函数能够产生输出并与其他部分的代码进行交互。

2.函数的定义

关键字： function，用 function 关键字来声明一个函数。

函数4大要素： 函数名、函数体、参数、返回值

javascript 复制代码

function 函数名(参数1, 参数2, ...) {
    // 执行一系列任务
    // 使用参数进行计算
    // 返回结果
    return 结果;
}

函数名：这是你给函数起的名字，用来在其他地方调用这个函数。比如，如果你有一个计算两个数字和的函数，你可以取名为 add。
参数：这是一些你给函数的输入。它们是可选的，你可以定义一个没有参数的函数，也可以定义有多个参数的函数。在上面的例子中，(参数1, 参数2, ...) 就是参数的地方。
函数体：这是函数的主要部分，包含一系列的任务。这可以是任何你想要计算的东西，例如两个数字的和，或者一些复杂的逻辑。这是用花括号 {} 包裹起来的代码块。
返回语句：函数通常会返回一个值。这个值可以是计算的结果。在函数的最后，你会看到 return 语句，它告诉函数返回什么结果。

举个例子，如果我们要定义一个简单的加法函数：

javascript 复制代码

function add(a, b) {
    var sum = a + b;
    return sum;
}

这个函数名是 add，有两个参数 a 和 b，函数体中进行了加法运算，最后用 return 返回了结果。调用这个函数，比如 add(3, 4)，会得到结果 7。这就是函数的基本定义。

2.函数调用

函数通过在函数名称后面加上括号来调用。调用函数时，可以传递参数。

javascript 复制代码

function sayHello(name = '张三') { // 给参数一个默认值
    console.log("Hello" + name);
}

上面的例子给参数 name 设置了一个默认值，调用函数时没有传入参数时会使用默认值

javascript 复制代码

sayHello(); // 调用 sayHello 函数，无参数

sayHello('小明'); // 调用 sayHello 函数，有参数

3. 函数的类型

普通函数：使用 function 关键字声明的函数。

javascript 复制代码

// 函数声明
function add(a, b) {
    return a + b;
}

匿名函数：没有名称的函数，通常赋值给变量或作为其他函数的参数。

javascript 复制代码

// 函数表达式
const multiply = function(x, y) {
    return x * y;
};

箭头函数：ES6 引入的一种更简洁的函数写法。

javascript 复制代码

const multiply = (x,y) => {
    return x * y;
};

4. 函数的重用和可读性

函数允许你在代码中重用相同的逻辑。通过定义函数，你可以多次调用相同的功能，而不必在每个地方都编写相同的代码。

javascript 复制代码

function greet(name) {
    return "Hello, " + name + "!";
}

let greeting1 = greet("Alice");
let greeting2 = greet("Bob");

5. 封装和可维护性

函数是一种封装机制，它允许你将一组相关的代码块组织在一起，形成一个单一的功能单元。这有助于提高代码的可维护性，因为你可以更容易地理解和修改函数，而不必关心函数内部的实现细节。

例子：

javascript 复制代码

// 不使用函数封装
let width = 10;
let height = 5;
let area = width * height;

// 使用函数封装
function calculateArea(width, height) {
    return width * height;
}

let area = calculateArea(10, 5);

通过封装，你将计算面积的细节隐藏在函数内部，提高了代码的可读性和可维护性。

函数的参数和返回使得函数能够产生输出并与其他部分的代码进行交互

在JavaScript中，函数的重要性不言而喻，函数可以提高代码的可读性和可维护性，增加的代码的复用性。函数使得你可以按照模块的方式开发应用程序，每个函数都可以看作是一个模块，有特定的功能。

初学者学习函数时要注意理解函数的基本概念和语法，理解参数和返回值，在前期学习使用函数时可以使用调试工具查看函数的调用过程，这可以帮助你更容易发现和解决错误。

希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师，加油。

最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。