箭头函数参数中的大括号{ }有何作用？含TypeScript场景疑问

没问题，我来帮你拆解这个TypeScript写法：

1. 写法的核心作用 #

这是对象解构赋值 + 箭头函数短语法结合的用法，主要用来快速从数组的对象元素中提取指定属性值，生成一个新数组。

拆解来看：

• .map()是数组的迭代方法，它接收的回调函数会处理数组的每一个元素
• 箭头函数的参数({ value })是对象解构：意思是回调函数接收的每个参数是一个对象，我们直接从这个对象里提取出value属性，作为单独的变量使用
• 箭头函数的短语法会自动返回value变量，不需要额外写return语句

举个实际的例子更清楚：

// 原始数组，每个元素都是带value属性的对象
const fruitItems = [
  { value: '草莓', id: 1 },
  { value: '芒果', id: 2 },
  { value: '猕猴桃', id: 3 }
];

// 使用这个写法提取所有value值
const fruitValues = fruitItems.map( ({ value }) => value );
// fruitValues 的结果是：['草莓', '芒果', '猕猴桃']

2. 语法支持性 #

这个写法完全被TypeScript（以及ES6+标准的JavaScript）支持：

• 从ES6（ECMAScript 2015）开始，对象解构和箭头函数就成为了标准语法，所有现代浏览器（Chrome、Firefox、Edge等）都原生支持
• TypeScript从诞生之初就兼容这套语法，不管你把代码编译到ES5还是更高版本，都能正常转换运行

3. 和你提到的规则的契合点 #

你之前提到的「箭头函数参数需要加括号」的规则，这个写法完全符合：
当箭头函数的参数不是简单的单个变量名（而是解构表达式、带类型注解、多个参数时），就必须用括号包裹参数列表。这里的({ value })是对象解构，所以必须加括号，和你给出的.map( (arg1: ArgType) => returnValue )这类示例的规则一致。

如果需要给参数加类型注解，写法也很规范：

// 先定义对象类型
interface FruitItem {
  value: string;
  id: number;
}

// 解构时添加类型注解
const fruitValues = fruitItems.map( ({ value }: FruitItem) => value );

内容的提问来源于stack exchange，提问作者abdul-wahab