基本语法

注意：要将箭头函数赋值给变量或常量，否则无法调用

形式一

(参数:类型) => 表达式

形式二

(参数:类型) => {
    代码块
}

箭头函数的写法

只有一个参数，() 可以省略（没有参数或多个参数，不能省略）
{} 中只有一行代码，{} 可省略
{} 中只有一行代码，而是是 return ，{} 和 return 可以省略

例子：没有形参，{}中只有一条语句

没有形参，() 不可省略
{}中只有一条语句，{} 可以省略

普通函数：

function test():number {
  return 10
}

let res = test()
console.log("res="+res)

箭头函数：

// 没有形参，不可省略 ()
// 同时省略{} 和 return，自动将该行代码的结果返回
let test2 = () => 10

let res2=test2()
console.log("res2="+res2)

例子：只有一个形参，{}中有一条语句

只有一个形参，() 可省略
{}中只有一条语句，{} 可以省略

普通函数：

function test(a:number):number {
  return a*2
}

let res:number=test(3)
console.log("res="+res)

箭头函数：

// 因为这里无法推断出形参 a 的类型，所以不能省略()。最为回调函数时，可以推断出类型，就可省略()
// 同时省略{} 和 return，自动将该行代码的结果返回
let test2 = (a:number) => a*2

let res2:number = test2(3)
console.log("res2="+res2)

例子：多个参数，{}中有多条语句

多个形参，() 不可省略
{} 中有多条语句，{} 不可省略

普通函数：

function add(a:number,b:number):number {
  console.log("a="+a)
  console.log("b="+b)
  return a+b
}

let res:number = add(1,2)
console.log("res="+res)

箭头函数：

// 多个形参，不可省略()
// {}中有多行代码，不可省略{}
let add2 = (a:number,b:number) => {
  console.log("a="+a)
  console.log("b="+b)
  return a+b
}

let res:number = add2(1,2)
console.log("res="+res)

与传统函数的核心区别

this 绑定规则不同

传统函数：this 指向调用时的上下文（动态绑定），取决于谁调用它。
箭头函数：没有自己的 this，它的 this 继承自声明时所在的上下文（词法绑定），且无法通过 call/apply/bind 改变。

class Example {
  value = "class value";

  // 传统函数方法
  traditionalMethod() {
    console.log("traditionalMethod:", this.value); // 正确访问类的 value
  }

  // 箭头函数作为类属性
  arrowMethod = () => {
    console.log("arrowMethod:", this.value); // 正确访问类的 value
  }

  test() {
    // 传统函数作为回调，this 丢失（指向全局或 undefined）
    setTimeout(function() {
      console.log("setTimeout 传统函数:", this?.value); // 输出: undefined
    }, 100);

    // 箭头函数作为回调，this 继承自 test() 的上下文（Example 实例）
    setTimeout(() => {
      console.log("setTimeout 箭头函数:", this.value); // 输出: class value
    }, 100);
  }
}

const obj = new Example();
obj.traditionalMethod(); // traditionalMethod: class value
obj.arrowMethod();       // arrowMethod: class value
obj.test();

其他关键差异

特性	传统函数	箭头函数
`new` 调用	可以（作为构造函数）	不可以（会报错）
`arguments` 对象	有（类数组参数集合）	没有（可用剩余参数替代）
`prototype` 属性	有	没有
作为对象方法	`this` 指向对象实例	`this` 继承外部上下文

常见使用场景

回调函数

简化数组方法（map/filter/reduce 等）、定时器、事件监听等场景的回调：

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

// 数组 map 回调
const doubled = numbers.map(n => n * 2); // [2, 4, 6, 8, 10]

// 数组 filter 回调
const evens = numbers.filter(n => n % 2 === 0); // [2, 4]

// 事件监听
const button = document.getElementById("myButton");
button?.addEventListener("click", () => {
  console.log("Button clicked");
});

简化匿名函数

在 Promise、异步操作中替代冗长的匿名函数：

// Promise 回调
fetch("/data")
  .then(response => response.json())
  .then(data => console.log("Data:", data))
  .catch(error => console.error("Error:", error));

// 异步函数中的回调
async function loadData() {
  try {
    const response = await fetch("/data");
    const data = await response.json();
    console.log("Data:", data);
  } catch (error) {
    console.error("Error:", error);
  }
}

注意事项

避免在需要动态 this 的场景（如对象方法、构造函数）使用箭头函数。
当箭头函数返回对象时，必须用括号包裹对象字面量（() => ({ key: value })），否则会被解析为代码块。

箭头函数没有 arguments 对象，如需获取所有参数，可使用剩余参数：

const logArgs = (...args: any[]) => {
  console.log(args); // 数组形式的参数集合
};

原文出处：/show_1GW1wie2eOjM.html