第 05 课30 分钟

JavaScript 基础：方法与函数

title 你的JavaScript函数冒险

课程内容

JavaScript 基础：方法与函数

JavaScript Basics - Functions

速记图由 Tomomi Imura 制作

journey
    title 你的JavaScript函数冒险
    section 基础
      Function Syntax: 5: You
      Calling Functions: 4: You
      Parameters & Arguments: 5: You
    section 高级概念
      Return Values: 4: You
      Default Parameters: 5: You
      Function Composition: 4: You
    section 现代JavaScript
      Arrow Functions: 5: You
      Anonymous Functions: 4: You
      Higher-Order Functions: 5: You

课前测验

重复写同样的代码是编程中最常见的挫败感之一。函数解决了这个问题，它让你把代码打包成可重复使用的块。把函数想象成使亨利·福特的装配线革命化的标准化零件——一旦你创建了一个可靠的组件，就可以在任何需要的地方使用它，而不必重新构建。

函数允许你把一段代码打包，这样你就能在整个程序中重复使用它们。你不用到处复制粘贴相同的逻辑，而是创建一个函数，然后在需要时调用它。这种方法让你的代码更有条理，也更容易维护。

在本课中，你将学习如何创建自己的函数、如何传递信息给它们以及如何从中获取有用的结果。你会发现函数和方法的区别，学习现代的语法写法，并看到函数是如何与其他函数协作的。我们将一步步构建这些概念。

? 点击上方图片查看关于方法与函数的视频。

你也可以在 Microsoft Learn 上学习本课内容！

mindmap
  root((JavaScript 函数))
    Basic Concepts
      Declaration
        传统语法
        箭头函数语法
      Calling
        使用括号
        需要括号
    Parameters
      Input Values
        多个参数
        默认值
      Arguments
        传入的值
        可以是任何类型
    Return Values
      Output Data
        return 语句
        退出函数
      Use Results
        存储在变量中
        链式调用函数
    Advanced Patterns
      Higher-Order
        函数作为参数
        回调函数
      Anonymous
        无需名称
        内联定义

function nameOfFunction() { // 函数定义
 // 函数定义/函数体
}

function displayGreeting() {
  console.log('Hello, world!');
}

// 调用我们的函数
displayGreeting();

flowchart TD
    A["✏️ 定义函数"] --> B["? 打包代码"]
    B --> C["?️ 给它命名"]
    C --> D["? 需要时调用"]
    D --> E["? 任意重用"]
    
    F["? 好处"] --> F1["无代码重复"]
    F --> F2["易于维护"]
    F --> F3["组织清晰"]
    F --> F4["测试更简单"]
    
    style A fill:#e3f2fd
    style E fill:#e8f5e8
    style F fill:#fff3e0

function name(param, param2, param3) {

}

function displayGreeting(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
}

displayGreeting('Christopher');
// 运行时显示 “你好，Christopher！”

flowchart LR
    A["? 函数调用"] --> B["? 参数"]
    B --> C["⚙️ 函数体"]
    C --> D["? 结果"]
    
    A1["displayGreeting('Alice')"] --> A
    B1["name = 'Alice'"] --> B
    C1["模板字面量\n\`Hello, \${name}!\`"] --> C
    D1["'Hello, Alice!'"] --> D
    
    E["? 参数类型"] --> E1["字符串"]
    E --> E2["数字"]
    E --> E3["布尔值"]
    E --> E4["对象"]
    E --> E5["函数"]
    
    style A fill:#e3f2fd
    style C fill:#e8f5e8
    style D fill:#fff3e0
    style E fill:#f3e5f5

function displayGreeting(name, salutation='Hello') {
  console.log(`${salutation}, ${name}`);
}

displayGreeting('Christopher');
// 显示 "Hello, Christopher"

displayGreeting('Christopher', 'Hi');
// 显示 "Hi, Christopher"

stateDiagram-v2
    [*] --> NoParams: function greet() {}
    [*] --> WithParams: function greet(name) {}
    [*] --> WithDefaults: function greet(name, greeting='Hi') {}
    
    NoParams --> Static: 始终相同的输出
    WithParams --> Dynamic: 随输入变化
    WithDefaults --> Flexible: 可选的自定义
    
    Static --> [*]
    Dynamic --> [*]
    Flexible --> [*]
    
    note right of WithDefaults
        最灵活的方法
        向后兼容
    end note

return myVariable;

function createGreetingMessage(name) {
  const message = `Hello, ${name}`;
  return message;
}

const greetingMessage = createGreetingMessage('Christopher');

flowchart TD
    A["? 函数处理"] --> B{"return 语句？"}
    B -->|是| C["? 返回值"]
    B -->|否| D["? 返回 undefined"]
    
    C --> E["? 存储在变量中"]
    C --> F["? 在表达式中使用"]
    C --> G["? 传递给函数"]
    
    D --> H["⚠️ 通常没有用处"]
    
    I["? 返回值的用途"] --> I1["计算结果"]
    I --> I2["验证输入"]
    I --> I3["转换数据"]
    I --> I4["创建对象"]
    
    style C fill:#e8f5e8
    style D fill:#ffebee
    style I fill:#e3f2fd

pie title "常见返回值类型"
    "字符串" : 30
    "数字" : 25
    "对象" : 20
    "布尔值" : 15
    "数组" : 10

function displayDone() {
  console.log('3 seconds has elapsed');
}
// 定时器值以毫秒为单位
setTimeout(displayDone, 3000);

setTimeout(function() {
  console.log('3 seconds has elapsed');
}, 3000);

setTimeout(() => {
  console.log('3 seconds has elapsed');
}, 3000);

flowchart LR
    A["? 函数风格"] --> B["传统"]
    A --> C["箭头"]
    A --> D["匿名"]
    
    B --> B1["function name() {}"]
    B --> B2["提升的"]
    B --> B3["有名的"]
    
    C --> C1["const name = () => {}"]
    C --> C2["简洁语法"]
    C --> C3["现代风格"]
    
    D --> D1["function() {}"]
    D --> D2["无名称"]
    D --> D3["一次性使用"]
    
    E["⏰ 何时使用"] --> E1["传统：可重用函数"]
    E --> E2["箭头：简短回调"]
    E --> E3["匿名：事件处理器"]
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e0f2f1

quadrantChart
    title 函数选择决策矩阵
    x-axis 简单 --> 复杂
    y-axis 一次性使用 --> 可复用
    quadrant-1 箭头函数
    quadrant-2 命名函数
    quadrant-3 匿名函数
    quadrant-4 传统函数
    
    Event Handlers: [0.3, 0.2]
    Utility Functions: [0.7, 0.8]
    Callbacks: [0.2, 0.3]
    Class Methods: [0.8, 0.7]
    Mathematical Operations: [0.4, 0.6]

graph TD
    A["? JavaScript 函数"] --> B["? 函数声明"]
    A --> C["? 参数"]
    A --> D["? 返回值"]
    A --> E["? 现代语法"]
    
    B --> B1["function name() {}"]
    B --> B2["描述性命名"]
    B --> B3["可重用代码块"]
    
    C --> C1["输入数据"]
    C --> C2["默认值"]
    C --> C3["多个参数"]
    
    D --> D1["return 语句"]
    D --> D2["退出函数"]
    D --> D3["传回数据"]
    
    E --> E1["箭头函数: () =>"]
    E --> E2["匿名函数"]
    E --> E3["高阶函数"]
    
    F["⚡ 关键优势"] --> F1["代码重用性"]
    F --> F2["更好组织"]
    F --> F3["更易测试"]
    F --> F4["模块化设计"]
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e0f2f1
    style F fill:#fce4ec

journey
    title 你的函数信心演变
    section 今天
      语法困惑: 3: 你
      理解基础: 4: 你
      编写简单函数: 5: 你
    section 本周
      使用参数: 4: 你
      返回值: 5: 你
      现代语法: 5: 你
    section 下个月
      函数组合: 5: 你
      高级模式: 5: 你
      教授他人: 5: 你