箭头函数（Arrow Function）是 ES6 引入的一种简洁的函数表达式语法，以下是其完整格式和用法详解：

1. 基础格式 ★★★

完整形式（多行）

const 函数名 = (参数1, 参数2) => {
  // 函数体
  return 返回值;
};

示例：

const sum = (a, b) => {
  const result = a + b;
  return result;
};

单行简写（隐式返回）

const 函数名 = (参数) => 返回值;

示例：

const double = num => num * 2; // 自动返回计算结果

2. 参数格式

3. 特殊格式规则

对象返回值的简写

需用括号包裹对象，避免与函数体冲突：

// 错误写法（会被解析为函数体）
const createObj = () => { name: 'Alice' }; 

// 正确写法
const createObj = () => ({ name: 'Alice' });

立即执行箭头函数（IIFE）

(() => {
  console.log('立即执行');
})();

4. 与传统函数对比

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

// 箭头函数等价形式
const add = (a, b) => a + b;

关键区别：

1. 箭头函数没有自己的 this（继承外层作用域）
2. 不能用作构造函数（无 prototype 属性）
3. 没有 arguments 对象

5. 常见使用场景

数组方法

const numbers = [1, 2, 3];
numbers.map(n => n * 2); // [2, 4, 6]

事件处理器（需注意 this）

// React 示例（类组件）
class MyComponent extends React.Component {
  handleClick = () => {
    console.log(this); // 正确绑定组件实例
  };

  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

异步操作

fetch('/api')
  .then(response => response.json())
  .then(data => console.log(data));

6. 格式注意事项

1. 参数括号

   • 单个参数可省略括号：x => x * 2
   • 零或多个参数必须加括号：(x, y) => x + y

2. 函数体括号

   • 单行表达式可省略 {} 并隐式返回
   • 多行语句必须用 {} 且需要显式 return

3. this 绑定
   箭头函数的 this 在定义时确定，无法通过 call/apply/bind 修改：

   const foo = () => console.log(this);
   foo.call({ bar: 1 }); // this 不会改变

总结

箭头函数通过简化的语法和固定的 this 绑定，特别适合：

• 短小的回调函数
• 需要保持 `this 一致性的场景
• 函数式编程中的纯函数

但在以下场景应避免使用：

• 对象方法定义
• 需要动态 this 的场景（如 DOM 事件处理器）
• 需要使用 arguments 或作为构造函数时