菜单

函数和箭头函数

相关源文件

本文档概述了 Airbnb JavaScript 风格指南中关于声明和使用 JavaScript 函数及箭头函数的约定和最佳实践。这些指南有助于在项目中保持代码的一致性、清晰性和质量。

概述

Airbnb JavaScript 风格指南区分了传统函数和箭头函数,并为两者提供了具体的建议。两者各有不同的用途和适用的场景。

来源: README.md661-941 README.md943-1106

传统函数

函数声明 vs. 函数表达式

风格指南建议使用**命名函数表达式**而不是函数声明。

原因? 函数声明会被提升(hoisted),使得在文件定义之前就可以使用该函数。这可能导致可读性和可维护性问题。命名函数表达式提供更好的堆栈跟踪和自文档化代码。

来源: README.md664-683

立即调用函数表达式 (IIFE)

IIFE 应被括号包围以提高清晰度。

来源: README.md686-696

函数上下文和参数

参数处理

  • 切勿在非函数块(如 ifwhile 等)中声明函数
  • 切勿将参数命名为 arguments (这会覆盖内置的)
  • 使用 rest 语法(...)代替 arguments 对象
  • 使用默认参数语法,而不是修改参数
  • 将默认参数放在参数列表的最后
  • 避免在默认参数表达式中产生副作用

来源: README.md699-719 README.md736-811 README.md843-885

参数修改与重新赋值

切勿修改或重新赋值参数。

来源: README.md843-885

函数空格与格式

  • 函数签名中的空格保持一致
  • 对于多行签名或调用,使用带尾随逗号的一致缩进模式

来源: README.md826-840 README.md908-939

箭头函数

箭头函数应用于匿名函数,尤其是在回调函数中。它们通过词法作用域绑定 this,这通常是期望的行为。

来源: README.md946-965

何时使用箭头函数

  • 对于匿名函数(尤其是回调函数)
  • 当需要词法绑定 this
  • 对于简短的、单表达式的函数,使用隐式返回更清晰

来源: README.md946-965 README.md967-1009

隐式返回 vs. 显式返回

如果函数体只包含一个没有副作用的表达式,则省略花括号并使用隐式返回。否则,保留花括号并使用 return 语句。

来源: README.md967-1009

格式指南

  • 总是在参数周围包含括号,即使只有一个参数
  • 对于多行表达式,用括号包围以提高可读性
  • 注意与比较运算符混淆的语法(=> vs >=, <=
  • 隐式返回箭头函数体的放置保持一致

来源: README.md1012-1105

ESLint 规则:函数与箭头函数

风格指南通过 ESLint 规则强制执行。关于函数和箭头函数的主要规则包括:

规则目的
func-style强制使用函数表达式而非函数声明
func-names确保函数具有名称以获得更好的堆栈跟踪
wrap-iife强制 IIFE 的统一包装
no-loop-func防止在循环中定义函数
prefer-rest-params鼓励使用 rest 语法而非 arguments
default-param-last要求默认参数放在最后
no-new-func防止使用 Function 构造函数
space-before-function-paren强制函数中的空格一致
no-param-reassign防止参数被修改和重新赋值
prefer-spread鼓励使用 spread 语法而非 .apply()
prefer-arrow-callback鼓励使用箭头函数作为回调函数
arrow-spacing强制箭头函数箭头前后空格一致
arrow-parens强制箭头函数参数周围有括号
arrow-body-style控制箭头函数体中使用花括号的情况
no-confusing-arrow防止箭头语法与比较混淆
implicit-arrow-linebreak控制隐式返回时的换行

来源: README.md664 README.md799 README.md946 README.md967 README.md1034

最佳实践总结

函数最佳实践

  1. 使用命名函数表达式而不是函数声明
  2. 将 IIFE 包装在括号中
  3. 切勿在非函数块中声明函数
  4. 使用 rest 语法而不是 arguments
  5. 使用默认参数语法处理可选参数
  6. 切勿修改或重新赋值参数
  7. 使用一致的空格和格式

箭头函数最佳实践

  1. 将箭头函数用于匿名回调
  2. 对单表达式使用隐式返回
  3. 总是在参数周围包含括号
  4. 将多行表达式包装在括号中
  5. 注意与比较运算符混淆的语法

与其他风格指南的关系

函数和箭头函数的指南与其他风格指南部分协同工作

  • 有关使用函数的模块导入/导出,请参阅 模块
  • 有关类方法(它们也是函数),请参阅 类与构造函数
  • 有关函数参数解构,请参阅 解构
  • 有关函数内的变量声明,请参阅 变量

函数和箭头函数的指南是 Airbnb JavaScript 风格指南编写干净、可维护的 JavaScript 代码方法中的关键部分。

来源: README.md661-1106