箭头函数的简写形式

箭头函数的基本语法

箭头函数是ES6引入的一种更简洁的函数写法。基本语法如下：

(param1, param2, ..., paramN) => { statements }

当只有一个参数时，可以省略圆括号：

param => { statements }

当函数体只有一条语句时，可以省略大括号和return关键字：

param => expression

单参数箭头函数的简写

对于只有一个参数的函数，箭头函数可以省略参数周围的圆括号：

// 传统函数写法
const square = function(x) {
  return x * x;
};

// 箭头函数完整写法
const square = (x) => {
  return x * x;
};

// 简写形式
const square = x => x * x;

这种简写形式在处理数组方法时特别有用：

const numbers = [1, 2, 3, 4];
const squares = numbers.map(x => x * x); // [1, 4, 9, 16]

无参数箭头函数的简写

当函数没有参数时，必须保留空括号：

// 传统写法
const getRandom = function() {
  return Math.random();
};

// 箭头函数写法
const getRandom = () => Math.random();

多参数箭头函数的简写

对于多个参数的情况，必须保留参数列表的圆括号：

// 传统写法
const sum = function(a, b) {
  return a + b;
};

// 箭头函数写法
const sum = (a, b) => a + b;

函数体简写

当函数体只有一条表达式时，可以省略大括号和return关键字：

// 完整写法
const double = x => {
  return x * 2;
};

// 简写形式
const double = x => x * 2;

如果函数体有多条语句，则必须使用大括号和return语句：

const process = x => {
  const y = x * 2;
  return y + 10;
};

返回对象字面量的简写

当需要返回对象字面量时，需要用圆括号包裹对象：

// 错误写法
const createUser = (id, name) => { id: id, name: name }; // 语法错误

// 正确写法
const createUser = (id, name) => ({ id: id, name: name });

箭头函数与this绑定

箭头函数没有自己的this值，它会捕获所在上下文的this值：

function Timer() {
  this.seconds = 0;
  
  // 传统函数写法，this指向问题
  setInterval(function() {
    this.seconds++; // 这里的this指向window/undefined
  }, 1000);
  
  // 箭头函数写法，this正确绑定
  setInterval(() => {
    this.seconds++; // 这里的this指向Timer实例
  }, 1000);
}

箭头函数作为回调

箭头函数特别适合作为回调函数：

// 传统回调写法
[1, 2, 3].map(function(x) {
  return x * 2;
});

// 箭头函数写法
[1, 2, 3].map(x => x * 2);

箭头函数与数组方法

箭头函数与数组方法结合使用可以写出非常简洁的代码：

const numbers = [1, 2, 3, 4, 5];

// 过滤偶数
const evens = numbers.filter(n => n % 2 === 0);

// 计算总和
const sum = numbers.reduce((acc, curr) => acc + curr, 0);

// 查找大于3的第一个元素
const firstLarge = numbers.find(n => n > 3);

箭头函数的限制

箭头函数不能用作构造函数：

const Foo = () => {};
const foo = new Foo(); // TypeError: Foo is not a constructor

箭头函数没有prototype属性：

const Bar = () => {};
console.log(Bar.prototype); // undefined

箭头函数不能用作生成器函数：

const gen = *() => {}; // SyntaxError

嵌套箭头函数

箭头函数可以嵌套使用：

const add = x => y => x + y;
const add5 = add(5);
console.log(add5(3)); // 8

这种写法在函数式编程中很常见，称为柯里化(Currying)。

默认参数与箭头函数

箭头函数也支持默认参数：

const greet = (name = 'Guest') => `Hello, ${name}!`;
console.log(greet()); // Hello, Guest!
console.log(greet('Alice')); // Hello, Alice!

剩余参数与箭头函数

箭头函数可以使用剩余参数语法：

const sumAll = (...numbers) => numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sumAll(1, 2, 3, 4)); // 10

解构参数与箭头函数

箭头函数参数也可以使用解构：

const getUserName = ({ name }) => name;
const user = { id: 1, name: 'Alice' };
console.log(getUserName(user)); // Alice

立即执行箭头函数

箭头函数也可以立即执行：

const result = ((x, y) => x + y)(3, 4);
console.log(result); // 7

箭头函数与Promise链

箭头函数可以简化Promise链：

fetch('/api/data')
  .then(response => response.json())
  .then(data => processData(data))
  .catch(error => console.error('Error:', error));

箭头函数与事件处理

箭头函数在事件处理中需要注意this绑定：

class Button {
  constructor() {
    this.text = 'Click me';
    this.element = document.createElement('button');
    
    // 传统函数写法，this指向按钮元素
    this.element.addEventListener('click', function() {
      console.log(this.text); // undefined
    });
    
    // 箭头函数写法，this指向Button实例
    this.element.addEventListener('click', () => {
      console.log(this.text); // 'Click me'
    });
  }
}

箭头函数与高阶函数

箭头函数非常适合用于创建高阶函数：

const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);

const double = x => x * 2;
const square = x => x * x;

const transform = compose(double, square);
console.log(transform(5)); // 50 (先平方再翻倍)