JavaScript 函数基础教程：从入门到实践-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00795/article/details/148416156

JavaScript 函数基础教程：从入门到实践

zh.javascript.info 现代 JavaScript 教程（The Modern JavaScript Tutorial），以最新的 ECMAScript 规范为基准，通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript 相关知识。项目地址: https://gitcode.com/gh_mirrors/zh/zh.javascript.info

什么是函数？

在编程中，函数是执行特定任务的自包含代码块。想象一下函数就像一个工厂里的机器：你输入原材料（参数），机器进行处理（函数体），然后输出成品（返回值）。函数的主要目的是避免代码重复和提高代码可维护性。

函数声明与调用

基本语法

function 函数名(参数1, 参数2, ...) {
  // 函数体
  return 返回值; // 可选
}

示例：

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('Alice')); // 输出: Hello, Alice!

函数调用机制

当调用函数时，JavaScript引擎会：

创建一个新的执行上下文
创建参数和局部变量
执行函数体内的代码
遇到return语句则返回结果，否则返回undefined
销毁该执行上下文（除非有闭包）

变量作用域详解

局部变量 vs 全局变量

| 特性 | 局部变量 | 全局变量 | |------|---------|---------| | 声明位置 | 函数内部 | 函数外部 | | 可见范围 | 仅在函数内 | 整个程序 | | 生命周期 | 函数执行期间 | 程序运行期间 | | 推荐使用 | 优先使用 | 尽量避免 |

最佳实践：尽量使用局部变量，减少全局变量的使用，以避免命名冲突和意外的值修改。

参数传递的深入理解

参数与实参的区别

形参(Parameters)：函数定义时声明的变量
实参(Arguments)：函数调用时实际传入的值

JavaScript的参数传递是"按值传递"的，但对于对象类型，传递的是引用的副本。

默认参数的高级用法

ES6引入的默认参数功能非常强大：

function createUser(name, age = 18, hobbies = []) {
  // ...
}

默认值可以是：

原始值（数字、字符串等）
表达式
函数调用结果

function log(message = getDefaultMessage()) {
  console.log(message);
}

返回值的最佳实践

返回值的注意事项

函数可以没有return语句，此时返回undefined
return语句可以单独使用，不带返回值
一个函数可以有多个return语句（通常在条件分支中）
return语句会立即终止函数执行

返回多个值的技巧

虽然函数只能直接返回一个值，但可以通过以下方式返回多个值：

返回数组

function getMinMax(arr) {
  return [Math.min(...arr), Math.max(...arr)];
}

返回对象

function getStats(arr) {
  return {
    min: Math.min(...arr),
    max: Math.max(...arr),
    avg: arr.reduce((a,b) => a+b) / arr.length
  };
}

函数命名的艺术

命名约定

动词开头：函数通常表示动作
驼峰命名法：如calculateTotalPrice
描述性：名称应清晰表达函数功能
一致性：团队应保持命名风格一致

常见前缀及其含义

| 前缀 | 含义 | 示例 | |------|------|------| | get | 获取数据 | getUserById | | set | 设置值 | setUserName | | is | 返回布尔值 | isValidEmail | | has | 检查存在性 | hasPermission | | calc | 计算 | calculateTotal | | create | 创建新实例 | createUser | | handle | 处理事件 | handleClick | | show | 显示内容 | showMessage |

函数设计原则

单一职责原则

一个函数应该只做一件事，并且做好这件事。如果函数太大或太复杂，考虑将其拆分为多个小函数。

纯函数概念

理想情况下，函数应该是"纯函数"：

相同输入总是产生相同输出
没有副作用（不修改外部状态）
不依赖外部状态

示例：

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

// 非纯函数
let counter = 0;
function increment() {
  counter++; // 修改了外部状态
}

函数长度建议

一般来说：

10行以内的函数最理想
超过20行的函数应考虑拆分
避免超过50行的函数

实际应用示例

用户验证函数

function validateUser(user) {
  if (!user) return { isValid: false, error: 'No user provided' };
  
  const { name, email, age } = user;
  
  if (!name || name.length < 2) {
    return { isValid: false, error: 'Invalid name' };
  }
  
  if (!/^\S+@\S+\.\S+$/.test(email)) {
    return { isValid: false, error: 'Invalid email' };
  }
  
  if (age < 13 || age > 120) {
    return { isValid: false, error: 'Invalid age' };
  }
  
  return { isValid: true };
}

温度转换函数

function convertTemperature(value, fromUnit, toUnit) {
  const units = ['celsius', 'fahrenheit', 'kelvin'];
  
  if (!units.includes(fromUnit) {
    throw new Error(`Invalid fromUnit: ${fromUnit}`);
  }
  
  if (!units.includes(toUnit)) {
    throw new Error(`Invalid toUnit: ${toUnit}`);
  }
  
  if (fromUnit === toUnit) return value;
  
  // 先转换为摄氏温度
  let celsius;
  switch (fromUnit) {
    case 'fahrenheit':
      celsius = (value - 32) * 5/9;
      break;
    case 'kelvin':
      celsius = value - 273.15;
      break;
    default:
      celsius = value;
  }
  
  // 从摄氏温度转换为目标单位
  switch (toUnit) {
    case 'fahrenheit':
      return celsius * 9/5 + 32;
    case 'kelvin':
      return celsius + 273.15;
    default:
      return celsius;
  }
}