函数与箭头函数

发布: 3小时前 (2025年12月6日 GMT+8 04:43)

7 min read

Source: Dev.to

什么是函数？

如果用简单的话来说，它们是 JavaScript 的主要构建块之一。它们用于把代码组织成更小、可复用的片段，这样我们就可以重复使用它们，避免一次又一次地重写相同的逻辑。本文将会拆解函数是什么、如何使用它们，以及普通函数和箭头函数之间的区别。

为什么会有函数？

从本质上讲，函数是一种存储可重复工作以保持一致性的方式。可以把它们想象成一个小机器；你给它输入，它完成一些工作，然后输出结果。

这与核心编程原则之一——DRY（Don’t Repeat Yourself）原则密切相关，简而言之，它指出如果你需要在代码中多次重复同一过程，就不要每次都重新编写，而是把该过程封装进函数，然后在需要时调用该函数。

这真的能让你的代码更易读、易维护，并且以后更容易调试。可以把它想象成咖啡机：有了机器后，你不必每次想喝咖啡时都重新制造或购买新机器，只需按下按钮即可。

声明函数

编写函数最常见的方式是使用 function 关键字：

/* Function with no arguments */
function showGreet() {
    return `Hello world!`;
}

/* Function with argument name */
function showPersonalizedGreeting(name) {
    return `Hello, ${name}!`;
}

虽然函数名可以随意取，但保持统一的命名规范对保持代码库整洁非常重要。模糊不清的函数名会导致 bug。

函数命名最佳实践

保持首选的命名约定；常见的选择是 camelCase。
由于函数往往执行操作，它们的名称通常应该是动词短语（例如 calculateTotal、filterResults、checkValidation）。
确保名称具有描述性（避免使用像 doSomething 或 myAmazingFunction 这样模糊的名字）。

常用前缀 用于指示函数的目的：

get：获取数据（例如 getUser）
set：修改数据（例如 setUserName）
handle：处理事件（例如 handleFormSubmission）
is、has、can：返回布尔值的谓词函数（例如 canLogin、isNumber、hasRequiredFlag）

避免使用不明显的缩写以保持可读性。

调用函数

要使用函数，只需调用它：

/* Function with no arguments */
function showGreet() {
    return `Hello world!`;
}

/* Function with argument name */
function showPersonalizedGreeting(name) {
    return `Hello, ${name}!`;
}

/* Call function to store the value in a variable */
let simpleGreeting = showGreet();                     // "Hello world!"
let greeting = showPersonalizedGreeting('Friend');   // "Hello, Friend!"

/* Call function directly in a console */
console.log(showPersonalizedGreeting('Friend'));     // "Hello, Friend!"

传递参数

你可以通过参数传递信息，将外部数据送入函数进行处理：

const width  = 15;
const height = 20;
let area;

function calculateArea(_width, _height) {
    return _width * _height;
}

area = calculateArea(width, height); // area = 300

返回值

函数可以使用 return 关键字返回结果。如果你没有显式返回任何内容，函数会返回 undefined。

函数表达式

除了直接声明函数外，你还可以把函数赋值给变量：

const multiply = function (a, b) {
    return a * b;
};

console.log(multiply(4, 2)); // 8

这被称为 函数表达式。当你想把函数作为值传递（例如传入另一个函数）时，函数表达式非常有用。

箭头函数

ES6 引入的箭头函数为函数表达式提供了更简洁的语法：

const divide = (a, b) => {
    return a / b;
};

关键区别：

没有 function 关键字。
参数与函数体之间使用 “箭头” =>。
如果函数只有一个参数，可以省略圆括号：

const square = x => x * x;

隐式返回

如果函数体只有一个表达式，箭头函数可以隐式返回它（无需 return 关键字）：

const add = (a, b) => a + b;

何时使用箭头函数？

一般来说，箭头函数非常适合短小的函数，常用于：

map、filter 或事件监听器等回调。
在类内部，当你不希望函数绑定自己的 this 时。

何时避免使用箭头函数

需要将 this 绑定到特定上下文时。
当函数较长且复杂时；简洁的语法可能会降低可读性。

简而言之

In a nutshell examples

小结

函数让你的代码保持整洁且可复用，而箭头函数提供了一种简写语法，特别适合现代 JavaScript。需要明确 this 或更高可读性时使用普通函数，需要简洁时使用箭头函数。

现在你已经掌握了函数的使用方法，请记住：当你发现自己多次编写相同逻辑时，可能是时候把它封装进函数了。

接下来

现在我们已经知道如何创建函数以及想要的变量类型，接下来就该为它们添加逻辑了！在下一篇文章 “JavaScript 101 – Control Flow Basics” 中，我们将探讨通过 if、else if 和 else 来控制代码执行的最基础方式。